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

<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>

if you use

div.widget-title {color: blue;}

it will apply to ALL widget titles (that don't have other CSS) so how to assign it to just this widget. the key is that classes can be used on many HTML elements, but ID's must be unique. So you just have to make the CSS Selector (the part before the {...}) a little more specific by using it's ID or

div#text-2 div.widget-title {color: blue;}

which you can also code using shorthand as

#text-2 .widget-title {color: blue;}

I inserted the following into HTML/CSS inserts:

div#text-2 div.widget-title {color: blue;}

No go
and:

#text-2 .widget-title {color: blue;}

no go

then

div#text-2 div.widget-title {background: #fa7elc;}

no go

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

div#text-2 div.widget-title {background: #fa7elc;}
#text-2 .widget-title {color: blue;}

tried these two separately, no go.

div#text-2 div.widget-title {background-image:url('http://www.online.rssuppyllc.com/images/widget-title-orange-right.jpg')}

would love to do this but no go..

#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?

Originally Posted by swimflyfast2

#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?

Add h3 to the end of the first one

#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.

1) view source of page with widget to style.
2) Identify the ID of the specific widget
    This can be done by searching for the title of your specific widget then looking for div id="text-x"  in front of it where x is the variable

3) Put the following code in ATO>Add HTML/CMSS inserts>  #text-x .widget-title h3 {color: blue; background #fb7f1d;} 
   x is the id number from step 2 and pick the styling you want and put it within {  }

Glad to see you got it to work! I'll close this one