Jump to content
Sign in to follow this  
steck1983

Sidebar Widget Title Hide Technique

Recommended Posts

steck1983    0
steck1983

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
steck1983    0
steck1983

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
steck1983    0
steck1983

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
steck1983    0
steck1983

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
steck1983    0
steck1983

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
Danny    1,327
Danny

Hi,

Is the issue now resolved ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
steck1983    0
steck1983

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
Danny    1,327
Danny

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/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×