when I add widgets in footer, as per http://forum.bytesforall.com/showthread.php?t=19079, it works great.

I need to change the color of the text in footer widgets...

I tried various things, the last being in the widgets.css file:

/* FOOTER WIDGET AREAS */
.widgetarea-three {
text-align: left;
font-size: 14px;
line-height: 1.3;
color: #ffffff;
}


also tried same code as #widgetarea-three in styles.css but in any way it is all overwritten by aside#text4-widget.

So I understand that the overall widget style is overriding the particular default footer style I selected; how would I specify specific styles and where to override the default behaviors assuming i followed the coventions widgetarea-three, widgetarea-four, and widgetarea-five??

Thanks.

There's a simple way if you're only doing a few, without even editing the css files. Just put a style change in your template such as "style = color:#ffffff;" in your sidebar div.

If you were doing many, it would be easier to put it in a css file, especially if you wanted to change them.

If you want them to be all the same look, then give them a class, so if you change one, you can change them all with one css file edit.

Try different methods, then use firebug to check your results. Validate often as you go. Have fun.

In my opinion, you should avoid inline CSS when possible, without good notes, it can make future maintenance a nightmare. By putting it into the CSS styling, you keep things together and can reuse the same CSS for multiple HTML elements

I would put any additional CSS in the last CSS file (not at my desktop so I can't name exactly) and remember the order of precedence for CSS

I tried several ways, and created a footer class for widgets called footc1 as you can see in screenshot below.

however, whereever i put it, it's css keeps getting overridden.

can anyone help? i've tried to move it several places.

thanks in advance!

you need to be more specific in the CSS Selector. since the html structure is

<div id="widgetarea-three" class="footerc1" style="padding: 0 10px">
      <aside id="text-4" class="widget widget_text cf">
        <div class="textwidget">
            your text is here
        </div>
     </aside>
  </div>

you should use 'div.footerc1 aside div.textwidget' - try that and see what it does

thanks for the reply juggledad and forgive my ignorance; where exactly should i put this??

'div.footerc1 aside div.textwidget'

should that be an entry under style.css or widget.css?

should that be

.div.footerc1 aside div.textwidget {

blah blah blah

}

or

#div.footerc1 aside div.textwidget

the html being generated is from the firebug plugin; the code generating it is from the subtemplate footer.

i'm sorry, but i am not following where exactly to put this...