Support » Themes and Templates » Footer Widget CSS

  • Resolved word-wiz

    (@word-wiz)


    Hi,

    I want to stop hard coding info into the footer and think text widgets would be a good way to go. I have not used them before but have just inserted simple text into all 4 widgets into a theme based on 2010.
    It seems that their is no way to target a specific footer widget area via CSS.

    <ul class="xoxo">
    						<li id="text-3" class="widget-container widget_text"><h3 class="widget-title">1st fw title</h3>			<div class="textwidget">1st fw</div>
    		</li>					</ul>
    
    					<ul class="xoxo">
    						<li id="text-5" class="widget-container widget_text">			<div class="textwidget">2nd FW</div>
    
    		</li>					</ul>
    
    					<ul class="xoxo">
    						<li id="text-4" class="widget-container widget_text">			<div class="textwidget">3rd fw</div>
    		</li>					</ul>
    
    					<ul class="xoxo">
    						<li id="text-6" class="widget-container widget_text">			<div class="textwidget">4th FW</div>
    
    		</li>					</ul>

    If this about how it works or am I missing something?

    Thanks, David

Viewing 4 replies - 1 through 4 (of 4 total)
  • You can target the areas using the unique list item ID, ie. li#text-3, li#text-4, li#text-5, etc.

    Hi 6 hrs,

    I did not test but thought the order of these ids look a bit random. What would happen if the widget was removed then reapplied, would the id change? I thought the 4 widgets in the footer would be clearly identified to allow them to be styled.

    Thanks.

    Michael

    (@alchymyth)

    Forum Moderator

    twenty ten’s footer widget areas have individual css ids – #first, #second, #third, and #fourth;

    for instance:

    <div id="first" class="widget-area">
    					<ul class="xoxo">
    						<li id="text-6" class="widget-container widget_text">			<div class="textwidget">first footer widget area text</div>
    		</li>					</ul>
    				</div><!-- #first .widget-area -->

    if you really have added one textwidget per footer widget area (however, your code does not look like it) then you should be able to style them with, for example:

    #first .textwidget { ... }
    #second .textwidget { ... }
    etc

    Hi alchymyth, yep the bare bones theme had stripped the divs out with the first, second etc

    Thanks.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Footer Widget CSS’ is closed to new replies.