Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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

[SOLVED] How to style Title of just one widget


  #1  
Old Dec 21, 2011, 12:16 PM
swimflyfast2's Avatar
swimflyfast2
 
150 posts · Aug 2010
Horse Country in Virginia
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.
  #2  
Old Dec 21, 2011, 05:07 PM
juggledad's Avatar
juggledad
 
23,632 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Dec 22, 2011, 06:37 AM
swimflyfast2's Avatar
swimflyfast2
 
150 posts · Aug 2010
Horse Country in Virginia
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..
  #4  
Old Dec 22, 2011, 06:43 AM
juggledad's Avatar
juggledad
 
23,632 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Dec 22, 2011, 07:06 AM
swimflyfast2's Avatar
swimflyfast2
 
150 posts · Aug 2010
Horse Country in Virginia
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
  #6  
Old Dec 22, 2011, 07:29 AM
juggledad's Avatar
juggledad
 
23,632 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Dec 22, 2011, 07:58 AM
swimflyfast2's Avatar
swimflyfast2
 
150 posts · Aug 2010
Horse Country in Virginia
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..
  #8  
Old Dec 22, 2011, 08:24 AM
swimflyfast2's Avatar
swimflyfast2
 
150 posts · Aug 2010
Horse Country in Virginia
#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?
  #9  
Old Dec 22, 2011, 08:45 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Quote:
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
HTML Code:
#text-2 .widget-title h3 {color: blue;}
__________________
~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.
  #10  
Old Dec 22, 2011, 09:33 AM
swimflyfast2's Avatar
swimflyfast2
 
150 posts · Aug 2010
Horse Country in Virginia
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 {  }
  #11  
Old Dec 22, 2011, 10:40 AM
juggledad's Avatar
juggledad
 
23,632 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Glad to see you got it to work! I'll close this one
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
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
I want to style text widget in bar1 (header) differently than other widget areas zingo5 Sidebars & Widgets 1 Sep 28, 2011 07:11 PM
Own style for link in widget title timdevogel Sidebars & Widgets 10 Jan 5, 2010 04:12 AM
Change Widget title type size/style rickinesc Atahualpa 3 Wordpress theme 3 Jul 24, 2009 01:57 PM
Widget style causing ugly display of widget list, breaks at special characters wfzimmerman Sidebars & Widgets 1 Mar 20, 2009 03:31 PM


All times are GMT -6. The time now is 03:12 AM.


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