WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Footer Widget CSS (5 posts)

  1. word-wiz
    Member
    Posted 2 years ago #

    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

  2. Caroline Moore
    Member
    Posted 2 years ago #

    You can target the areas using the unique list item ID, ie. li#text-3, li#text-4, li#text-5, etc.

  3. word-wiz
    Member
    Posted 2 years ago #

    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.

  4. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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
  5. word-wiz
    Member
    Posted 2 years ago #

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

    Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic