Footer Widget CSS

  • Resolved word-wiz

    (@word-wiz)


    14 years, 6 months 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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Caroline Moore

    (@sixhours)

    14 years, 6 months ago

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

    Thread Starter word-wiz

    (@word-wiz)

    14 years, 6 months 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.

    Michael

    (@alchymyth)

    14 years, 6 months 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
    Thread Starter word-wiz

    (@word-wiz)

    14 years, 6 months ago

    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.