First of all - thanks for this fabulous theme. I have looked at many different ones, nothing comes close. Donation made....

I am looking for a way to change background colors on individual widgets (category, pages, different text blocks) in order to put a little life into the sidebars. I know I can change the general sidebar color and the general widget color, but how about a different color for each widget? Can that be done?

Thanks.

Thank you for the donation

Use Firebug or the "View Source" option of your browser to find out the ID or a unique class for the widget you want to style. For instance the archives widget looks like this:

<div id="archives" class="widget widget_archives">

<div class="widget-title">
<h3>Widget Title</h3>
</div>

<div class="widget-content">
Widget content here...
</div>

</div>

The DIV container for the whole "Archives" widget has 1 ID "archives", a general class "widget" and an individual class "widget_archives":

ID = archives
class = widget
class = widget_archives

Add as HTML/CSS Inserts -> CSS Insert

div#archives {
... /* style for the whole widget */
}
div#archives div.widget-title {
... /* style for the widget title box */
}
div#archives div.widget-title h3 {
... /* style for the widget Headline text */
}
div#archives div.widget-content {
... /* style for the widget body */
}
div#archives div.widget-content p {
 ... /* style for paragraphs inside the widget body */
 }
div#archives div.widget-content img {
  ... /* style for images inside the widget body */
  }

The unique class "widget_archives" makes sense once you start using multiple instances of the same widget, i.e. multiple text widgets.

Then you would use the semi-unique class "widget_text" to "group style" all text widgets, and each text widget's unique ID "text-1234567890" to apply additional, individual CSS for each single text widget.

Thanks for the detailed info - this helps a lot!

Hej!

A little question. To change the color/background of my widget, I have to:

- locate my text-widget's ID
- add the code on the box "css insert"

and then? Where do I have to add the widget's ID? How can I change his background?

Thanks a lot!

Originally Posted by Fredr

Hej!

A little question. To change the color/background of my widget, I have to:

- locate my text-widget's ID
- add the code on the box "css insert"

and then? Where do I have to add the widget's ID? How can I change his background?

Thanks a lot!

The red part is the widget ID. In the source code of your browser-rendered page you'd find it as:

<div id="archives" class="widget widget_bla blabla">

And in a HTML/CSS Insert -> CSS Insert you'd use it as:

div#archives {
... /* style for the whole widget */
}