Wordpress Themes - WP Forum at BFA - Style All Widget LI Uniformly

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)

- - Style All Widget LI Uniformly (http://forum.bytesforall.com/showthread.php?t=16159)

Style All Widget LI Uniformly

First,

Thanks for the great theme. The more I work with it the better I like.

I am having some trouble styling all of the widgets in the right sidebar on my blog Swanson Tech Online, where I have praised this theme.

I have created the following Custom CSS and applied at ATO>Add CSS Inserts:

Code:

#right div.widget ul li{

display: block;

width: auto;

margin: 3px;

background-color: #21759b;

border: solid 1px #CCCCCC;

border-top-left-radius: 0px;

border-top-right-radius: 8px;

border-bottom-left-radius: 0;

border-bottom-right-radius: 8px;

}



div.widget ul li a{

margin: 0 12px 0 0;

}



div.widget ul li a:hover{

color: #FFFFFF;

}



#right div.widget ul li:hover,

#right div.widget ul li.sfhover{

display: block;

width: auto;

margin: 3px;

background-color: #000000;

border: solid 1px #FFFFFF;

border-top-left-radius: 0px;

border-top-right-radius: 8px;

border-bottom-left-radius: 0;

border-bottom-right-radius: 8px;

}

The problem I am having is that when I 'hover' over either the Meta Widget or the BFA Recent Comments Widget items, I can only click if I am directly over the text and not just on the shaded area or the hovered 'area' of the <li>.

Not sure what I am missing, but I would prefer that all of these areas act like buttons.

Any help correcting this would be immensely appreciated.

Thanks,

GD (Sven)

the situation is because the two widgets have a different class on the main <div>. The META widget has

HTML Code:

<div id="meta-3" class="widget widget_meta">

and the CUSTOM MENU widget has

HTML Code:

<div id="nav_menu-3" class="widget widget_nav_menu">

the class 'widget_nav_menu' is what creates the full with link ability.

So you have two choices
1) look thru the CSS for all the selectors hthat include 'widget_nav_menu' and copy that code and rename 'widget_nav_menu' to 'widget_meta' and put that in CSS Inserts or
2) edit the WP core and add 'widget_nav_menu' to the class for the meta widget (wordpress/includes/default_widgets.php line 282 in v3.2.1)

Be aware that on items like the links to the posts by Gary the whole menu would have to link to the Gary archives or the post.

Thanks for the swift reply.

Just to be clear, the Custom Menu items are all working as planned when hovered and clicked on.

The Meta Widget and the BFA Recent Comments Widget are not. And they are not working in an odd manner, that is the style is being applied (see website), including the color change when hovered, but the whole element <li> is not clickable on the Meta Widget and the BFA Recent Comments Widget items.

Is this due to some structural manner in which these items are actually created in the code? Why is it that the only thing that does not work on these is the actual click on the li?

Are these not div.widget ul li items?

Sorry if I am being inept on this, I am still unclear why the current setup is behaving the way it is on the Meta Widget and the BFA Recent Comments Widget items, but is working as expected on the Custom Menu items with the used CSS Inserts being as is.

The meta widget is WordPress code, the theme has no control over it or what classes are assign to the various parts. Same goes for any widget that doesn't start with 'bfa'

It would be nice if all developers juse the same naming conventions and class names, but I'd rather see all the browsers treat the same code the same way.

OK, that makes sense.

Again, may thanks.