[SOLVED] How to style Title of just one widget
in this same example how would we address the title area of an individual widget? I Just need to know how to find the ID. How do I find that? this is great... Im wondering if there is a plug in to address this?
Maralian, don't forget Juggledad has a contribution button. |
The title should have the class 'widget-title'.
To find the widget's ID you have to look at the source of a generated page. You can learn a lot by looking at the source of the generated pages. |
I understand how to get the id from this discussion. I'm trying to figure out how to address this specific instance of the class "widget-title" (I think) and not the overall class. I looked at several css online explanations of this but could not find a place that address a class within an id. It seems to me that the ID is the over all container for a specific instance of a widget and that it calls the class, in this case widget-title
I tried these two as an insert.. no go: 1. #text-2.widget-title {background: #fa7elc;} 2) #text-2 {.widget-title {background: #fa7elc;}} Here is the source: id=text-2 is the specific widget I am trying to modify (right side titled "Test Header"). I'm trying to change the color of widget title for individual widget instances so they stand out. <div id="text-2" class="widget widget_text"><div class="widget-title"><h3>Test Header</h3></div> <div class="textwidget">this is text in the widget</div> </div> test site: www.online.rssupplyllc.com I'd like to find a good tutorial on this as I think I'll do it often. thanks. Maybe I need to have some eggnog.. |
ok so you have this code
HTML Code:
<div id="text-2" class="widget widget_text"> HTML Code:
div.widget-title {color: blue;} HTML Code:
div#text-2 div.widget-title {color: blue;} HTML Code:
#text-2 .widget-title {color: blue;} |
I inserted the following into HTML/CSS inserts:
HTML Code:
div#text-2 div.widget-title {color: blue;} and: HTML Code:
#text-2 .widget-title {color: blue;} then HTML Code:
div#text-2 div.widget-title {background: #fa7elc;} |
go to ato->Style POSTS & PAGES->POST Container: STICKY and get rid of the 'background' line that contains <?php.....
That line is throwing off the css |
HTML Code:
div#text-2 div.widget-title {background: #fa7elc;} HTML Code:
div#text-2 div.widget-title {background-image:url('http://www.online.rssuppyllc.com/images/widget-title-orange-right.jpg')} |
#text-2 .widget-title {color: blue;} this does not change text in title
#text-2 {color: blue;} this does change text blue in widget body for the specific widget... good.. syntax? |
Quote:
HTML Code:
#text-2 .widget-title h3 {color: blue;} |
How to address CSS styling in a specific instance of a widget title:
This overrides the characteristics of the class"widget-title" for a single instance only. I use it to be able to have a different color as background for a specific widget so it stands out. HTML Code:
1) view source of page with widget to style. |
Glad to see you got it to work! I'll close this one
|
All times are GMT -6. The time now is 11:51 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.