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 »

[SOLVED] is possible to give each widget header a different background pic?


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 May 13, 2012, 11:40 PM
mtouchette
 
9 posts · Apr 2012
i want to add a little background graphic to the right edge of each widget. the graphics are all the same size and configuration, but i want to make a class(?) for each widget so i can specify which graphic goes in each.

is this possible? if so, any tips or tricks to get me heading in the right direction? i'm pretty good with html and css, but wordpress in general and theme customization specifically are both fairly new to me...and i know nothing about [hp.

thanks in advance. :-)
  #2  
Old May 14, 2012, 08:33 AM
lmilesw's Avatar
lmilesw
 
10,047 posts · Jul 2009
Central New York State USA
I generally just target the widget with it's own id. If you have a situation where several widgets will be styled one way and several another then setting a class would indeed be helpful. There are plugins that let you specify classes for widgets. You should be able to find with a quick search on wordpress.org.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old May 14, 2012, 08:37 AM
juggledad's Avatar
juggledad
 
21,949 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
The HTML for widgets is controled by the plugin that it is associated with it. While most add a class of 'widget' not all do, so you might have to edit the plugin's code to add your class
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #4  
Old May 14, 2012, 01:16 PM
mtouchette
 
9 posts · Apr 2012
thank you both for your replies.

i got the widget info via firebug as follows:
Code:
<div id="text-3" class="widget widget_text">
<div class="widget-title">
from there i derived
Code:
#text-3 widget widget_text widget-title
.

for testing purposes i added a red background as follows:
Code:
#text-3 widget widget_text widget-title {background-color: red;}
. but it didn't take.

is my derivation incorrect? i've not that much experience with designating styles for compound cascading elements.

or do i have to find the the style sheet for the text and modify text-1, text-2, etc., directly on the dedicated widget style sheet?

here is the url: http://pbn.mtouchette.com; "text-3" is the "Quick Links" area.

more thanks... :-)
  #5  
Old May 14, 2012, 02:08 PM
juggledad's Avatar
juggledad
 
21,949 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
HTML Code:
#text-3 widget widget_text widget-title {background-color: red;}
In English that says 'apply a background color red to the HTML element 'widget–title'
that is a sub-element of an HTML element 'widget_text',
which is a sub-element of the HTML element 'widget',
which is a sub-element of an HTML element with an ID of text–3.

Not quite what you were meaning to say I would guess.

I suggest you run through a CSS tutorial (good one can be found at HTTP://htmldog.com)so you'll have an idea of how to write CSS.
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #6  
Old May 14, 2012, 02:48 PM
lmilesw's Avatar
lmilesw
 
10,047 posts · Jul 2009
Central New York State USA
Also, once you get the syntax figured out and since they are classes, you need to add a . before some of the selectors (EG .widget .widget_text .widget-title
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old May 14, 2012, 11:40 PM
mtouchette
 
9 posts · Apr 2012
Quote:
Originally Posted by juggledad
In English that says 'apply a background color red to the HTML element 'widget–title'
that is a sub-element of an HTML element 'widget_text',
which is a sub-element of the HTML element 'widget',
which is a sub-element of an HTML element with an ID of text–3.

Not quite what you were meaning to say I would guess.
--actually, that is exactly what i meant to say. though i took your comment to mean otherwise and started by eliminating the middle-man selector. it worked.

Quote:
Originally Posted by juggledad
I suggest you run through a CSS tutorial (good one can be found at HTTP://htmldog.com)so you'll have an idea of how to write CSS.
nice resource, wish i had known of it way back when i was learning all the stuff it talks about.

the closest thing to my issue was the section on grouping and nesting. however, it didn't mention anything about how to determine when one should go straight from point a (text–3) to point c (widget_text), or take the long way 'round and include all--or just some--things in between. i'd've kept including it had you not already intimated i should do otherwise. so, i'm still a bit foggy in that respect.

@larry, thanks. i was wondering whether or not to include # and . after the first selector designation. i probably tried it both ways, but with the extra selector in there it was moot. i was able to combine your tip with what i learned above to make it all work.

thank you both for your time and assistance. :-)
  #8  
Old May 15, 2012, 05:36 AM
juggledad's Avatar
juggledad
 
21,949 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
be careful of your assumptions!
HTML Code:
#text-3 widget widget_text widget-title {background-color: red;}
and
HTML Code:
#text-3 .widget .widget_text .widget-title {background-color: red;}
are two different thinge. the first is totally invalad because it would be looking for an HTML element <widget> and <widget_text> and <widget-title> and they are all invalid HTML Elements.

but glad it it is working I will close this.
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
background image in header with a widget area on top abdell Header configuration & styling 9 Feb 9, 2012 06:38 AM
[SOLVED] styling background in header widget areas emanuel1969 Sidebars & Widgets 5 Apr 30, 2010 08:40 PM
Help! I can't use my own image in the header and I'm about to give up!! spookyq Header configuration & styling 6 Jul 16, 2009 06:02 PM


All times are GMT -6. The time now is 11:30 AM.


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