Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

Change background color of individual widgets


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Mar 11, 2009, 12:35 PM
Photokitchen
 
5 posts · Mar 2009
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.
  #2  
Old Mar 11, 2009, 02:53 PM
Flynn's Avatar
Flynn
 
3,745 posts · Oct 2008
Munich, Germany
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.
  #3  
Old Mar 13, 2009, 10:33 AM
Photokitchen
 
5 posts · Mar 2009
Thanks for the detailed info - this helps a lot!
  #4  
Old May 9, 2009, 01:39 AM
Fredr
 
2 posts · May 2009
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!
  #5  
Old May 9, 2009, 05:55 AM
Flynn's Avatar
Flynn
 
3,745 posts · Oct 2008
Munich, Germany
Quote:
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 */
}

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Change background colors for each individual page wing23 Atahualpa 3 Wordpress theme 7 Aug 15, 2009 04:08 PM
How do you change the background color? theyankeeblog Header configuration & styling 2 May 13, 2009 12:09 PM
[SOLVED] How to get a background image show thru background color juggledad Header configuration & styling 3 Apr 18, 2009 05:03 AM
How do I change the background color of the Kicker? whatsmytruth Post-Kicker, -Byline & -Footer 1 Apr 9, 2009 02:02 PM
Fixed width site. Different page background color from body color? blueprairie Forum How-To 1 Mar 20, 2009 08:55 PM


All times are GMT -6. The time now is 12:57 PM.


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