Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

Style All Widget LI Uniformly


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Dec 3, 2011, 10:30 PM
Sven
 
32 posts · Aug 2009
New Hamphire, USA
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)
  #2  
Old Dec 4, 2011, 06:53 AM
juggledad's Avatar
juggledad
 
22,379 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Dec 4, 2011, 06:57 AM
lmilesw's Avatar
lmilesw
 
10,111 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Last edited by lmilesw; Dec 4, 2011 at 07:30 AM.
  #4  
Old Dec 4, 2011, 11:01 AM
Sven
 
32 posts · Aug 2009
New Hamphire, USA
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.
  #5  
Old Dec 4, 2011, 11:27 AM
juggledad's Avatar
juggledad
 
22,379 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Dec 4, 2011, 12:28 PM
Sven
 
32 posts · Aug 2009
New Hamphire, USA
OK, that makes sense.

Again, may thanks.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
I want to style text widget in bar1 (header) differently than other widget areas zingo5 Sidebars & Widgets 1 Sep 28, 2011 08:11 PM
[SOLVED] How can I fix the widget style amy17 Forum How-To 1 Apr 8, 2011 02:46 PM
[SOLVED] Widget style Karin Sidebars & Widgets 4 Dec 22, 2010 02:43 AM
Style widget search box ggitchell Sidebars & Widgets 8 Dec 4, 2009 01:19 AM
Widget style causing ugly display of widget list, breaks at special characters wfzimmerman Sidebars & Widgets 1 Mar 20, 2009 04:31 PM


All times are GMT -6. The time now is 03:14 AM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.