Archived

This topic is now archived and is closed to further replies.

  • 0

Sidebar Widget Title Hide Technique

Question

Posted · Report post

Hi,

I've just upgraded to pagelines from platform pro, and am currently building a new site for a client. I need a simple login/logout link floated in the right corner. Since the logo is in the center Ive absolutely positioned the sidebar div such that they are inline. The display is something like:

<Logo Brand Image> Login | Register

To do this I made my own sidebar section by copying the original, placing it in the the themes section folder etc.. After This i used a text widget with the following code snippet.

<div id="login-register-top">

<ul class="login-menu">

<li><a id="login" href="#">login</a></li>

<li><a id ="register" href="#">register</a></li>

</ul>

</div>

For some reason though after styling the links, if i try to remove the widget title with the following:

ul#list_top_right_sidebar.sidebar_widgets li.widget_text div.widget-pad h3.widget-title {

display:none;

}

the hovers stop working? The widget title disappears but the hovers are a no go. Any ideas?

Below is the CSS for the area:

ul#list_top_right_sidebar.sidebar_widgets li #login-register-top a#login {

font-family: helvetica, arial, sans-serif;

font-weight:bold;

font-size: 12px;

color: #000000;

border-right: 1px solid gray;

line-height:20px;

padding-right:5px;

}

ul#list_top_right_sidebar.sidebar_widgets li #login-register-top a#login:hover{

font-family: helvetica, arial, sans-serif;

font-weight:bold;

font-size: 12px;

color:#df6338;

text-decoration:none;

}

ul#list_top_right_sidebar.sidebar_widgets li #login-register-top a#register{

font-family: helvetica, arial, sans-serif;

font-weight:bold;

font-size: 12px;

color: #000000;

line-height:20px;

}

ul#list_top_right_sidebar.sidebar_widgets li #login-register-top a#register:hover{

font-family: helvetica, arial, sans-serif;

font-weight:bold;

font-size: 12px;

color:#df6338;

text-decoration:none;

}

Share this post


Link to post
Share on other sites

11 answers to this question

Posted · Report post

No worries, i was able to get it to work. Hopefully i'll get online shortly.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

Is the issue now resolved ?

Share this post


Link to post
Share on other sites

Posted · Report post

yep, i couldnt fix the issue by placing it in hook area I wanted. Instead I placed it in the pagelines_after_branding_wrap area, then absolutely positioned the div back in place by using a negative margin.

Im still getting up to speed with pagelines... Is it possible to add reference a widget?

for example in functions.php,

//Hook to place login and register link inline with branding.

add_action('pagelines_after_branding_wrap', 'brandnav_login');

function brandnav_login() { ?>

<div id="testdiv">

<insert some widget here>

</div>

<?php }

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

If you know the correct code you can add whatever you like. However, if you need assistance with advanced customisation, I recommend you contact one of our pros.

http://www.pagelines.com/pros/

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

First things first, we need link to investigate the issue, if you can provide this link we will be able to provide support.

Secondary, when adding code to a forum post please use the [ code ] bbcode, if you have a lot of code you wish to add to your post, please use our pastie service.

http://paste.pagelines.com/

Once we have a link, we will be able to see the issue and hopefully resolve it. However, why not use a hook instead of creating a child section, this way you will be easier in my opinion and you can also add logic to the login/signup links.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

Thanks for the quick reply. Unfortunately I only currently have the site running locally so I'm unable to send a link yet.

As far as "hooks" go, I'm not familiar with this. How would I set this up? Where would I find this info?

Thanks again

Share this post


Link to post
Share on other sites

Posted · Report post

Ok,

I got going with the hooks. i did the following:

//Add Hook to place login and register link.

add_action('pagelines_branding_icons_start', 'brandnav_login');

function brandnav_login() { ?>

<ul class="login-menu">

<li><a id="login" href="">Login</a></li>

<li><a id="register" href="">Register</a></li>

</ul>

<?php }

For some reason though, Im getting some styling issues. If I use the following css

/*Header Area*/

/*Center Logo*/

.section-branding .mainlogo-link, .section-branding .mainlogo-img {

float:none;

margin: 0 auto;

}

/*Login and Register*/

ul.login-menu li {

display:inline;

}

ul.login-menu li a#login{

font-family: helvetica, arial, sans-serif;

font-weight:bold;

font-size: 11px;

color:#000000;

display:block;

}

ul.login-menu li a#login:hover{

color:#df6338;

}

The text overlaps after the display inline, and in addition the color which should be black appears gray. Im not sure whats going on. Can I adjust the z-index of the container div to bring it forward? Normally a display inline would force the text to display inline, not on top of eachother?

thanks again,

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, yes you can use css to edit the z-index. It's hard to say what to suggest without seeing the problem. You could look into using letter-spacing or line-height commands to see if they could correct it.

Share this post


Link to post
Share on other sites

Posted · Report post

Ok. below is a quick screenshot of the problem after positioning using the "pagelines_branding_icons_start".

post-44898-0-70518000-1353731250_thumb.j

If I place the element out of the header area for example "pagelines_before_branding" It appears fine. So one problem is that the css messes up once it becomes nested in the branding area, the other is that it appears to be located below the branding section since the colours are wrong. The text should be black, not gray, but the branding area must have a visbility property with an opacity or something. Thats why i was asking about the z-index.

Cheers

Share this post


Link to post
Share on other sites

Posted · Report post

Without seeing it live, it's rather difficult to properly diagnose CSS. Posting your code won't help us as we can't replicate every setting of a site. Please provide a link to your site or dev site so that we can provide a sound reply.

Share this post


Link to post
Share on other sites