Wordpress Themes - WP Forum at BFA - [SOLVED] How to style Title of just one widget

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)

- - [SOLVED] How to style Title of just one widget (http://forum.bytesforall.com/showthread.php?t=16320)

swimflyfast2

Dec 21, 2011 12:16 PM

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

juggledad

Dec 21, 2011 05:07 PM

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.

swimflyfast2

Dec 22, 2011 06:37 AM

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

juggledad

Dec 22, 2011 06:43 AM

ok so you have this code

HTML 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

HTML Code:

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

HTML Code:

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

which you can also code using shorthand as

HTML Code:

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

swimflyfast2

Dec 22, 2011 07:06 AM

I inserted the following into HTML/CSS inserts:

HTML Code:

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

No go
and:

HTML Code:

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

no go

then

HTML Code:

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

no go

juggledad

Dec 22, 2011 07:29 AM

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

swimflyfast2

Dec 22, 2011 07:58 AM

HTML Code:

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

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

tried these two separately, no go.

HTML Code:

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

swimflyfast2

Dec 22, 2011 08:24 AM

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

lmilesw

Dec 22, 2011 08:45 AM

Quote:

Originally Posted by swimflyfast2 (Post 77821)

#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

HTML Code:

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

swimflyfast2

Dec 22, 2011 09:33 AM

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.

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

juggledad

Dec 22, 2011 10:40 AM

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

All times are GMT -6. The time now is 07:13 AM.