Widget Styling

  • Hi there, I’m a noob on here but have using/theming WP for some time. I’m in the process of creating a new theme, but EVERY attempt to style my widgets is failing.
    The problem is that it’s a local installation so it’s not easy to share my code.
    I’ve done this before but for some reason this time it won’t play ball.
    Following a suggestion, I tried to specifically target all widgets using:

    ul li.widget{
	display:block;
	background-color:white;
	padding:1em;
}

    But with no success. What am I missing?

Viewing 2 replies - 16 through 17 (of 17 total)
  • Thread Starter dvmac

    (@dvmac)

    Forgive me, I’m still editing my local version. This is what has been output:

    <div id="secondary" class="span3 sigwell pull-right">
<div id="search-2" class="widget widget_search">
<form>edited</form>
</div>
</div>

    And here is a rule to target it:
    #search-2 .widget .widget_search {display:block;background-color:red;padding:.5em;}

    That’s because that isn’t valid in your case.

    You should use something like this:
    #secondary .widget_search {display:block;background-color:red;padding:.5em;}

    It works like this:

    .parent-div-selector .selector-you-want-style {
      property: value;
}

    And in your case, CSS is looking first for ID secondary then element inside that ID with class widgetand then class widget_search.

    Your CSS will only work in following case:

    <div id="secondary" class="span3 sigwell pull-right">
<div id="search-2">
<div class="widget">
<div class="widget_search">
<form>edited</form>
</div>
</div>
</div>
</div>

Viewing 2 replies - 16 through 17 (of 17 total)
  • The topic ‘Widget Styling’ is closed to new replies.

Tags