Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   Change background color of individual widgets (http://forum.bytesforall.com/showthread.php?t=727)

Photokitchen Mar 11, 2009 12:35 PM

Change background color of individual widgets
 
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.

Flynn Mar 11, 2009 02:53 PM

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

HTML Code:

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.

Photokitchen Mar 13, 2009 10:33 AM

Thanks for the detailed info - this helps a lot!

Fredr May 9, 2009 01:39 AM

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!

Flynn May 9, 2009 05:55 AM

Quote:

Originally Posted by Fredr (Post 6396)
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 */
}


All times are GMT -6. The time now is 06:48 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.