Jump to content


Photo
- - - - -
Open

Sidebar Widget Title Hide Technique



  • Please log in to reply
11 replies to this topic

#1 steck1983

steck1983

    Member

  • Members
  • 27 posts
  • Framework Version:2.02
  • Country: Country Flag

Posted 23 November 2012 - 10:34 AM

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;
}

#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 November 2012 - 01:33 PM

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.

Please Login or Register to see this Hidden Content



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.

#3 steck1983

steck1983

    Member

  • Members
  • 27 posts
  • Framework Version:2.02
  • Country: Country Flag

Posted 23 November 2012 - 01:54 PM

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

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 23 November 2012 - 03:25 PM

You can find more info about hooks here:

Please Login or Register to see this Hidden Content


Please Login or Register to see this Hidden Content



#5 steck1983

steck1983

    Member

  • Members
  • 27 posts
  • Framework Version:2.02
  • Country: Country Flag

Posted 24 November 2012 - 03:56 AM

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,

#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 24 November 2012 - 04:17 AM

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.

#7 steck1983

steck1983

    Member

  • Members
  • 27 posts
  • Framework Version:2.02
  • Country: Country Flag

Posted 24 November 2012 - 04:30 AM

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

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  7.57KB   5 downloads

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

#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 25 November 2012 - 05:54 PM

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.

#9 steck1983

steck1983

    Member

  • Members
  • 27 posts
  • Framework Version:2.02
  • Country: Country Flag

Posted 26 November 2012 - 07:34 AM

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

#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 26 November 2012 - 07:43 AM

Hi,

Is the issue now resolved ?

#11 steck1983

steck1983

    Member

  • Members
  • 27 posts
  • Framework Version:2.02
  • Country: Country Flag

Posted 26 November 2012 - 08:08 AM

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 }

#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 26 November 2012 - 09:06 AM

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.

Please Login or Register to see this Hidden Content