Jump to content


Photo

Help with Text Widget Styling


Best Answer Danny , 22 March 2013 - 10:15 AM

Hi,

 

If you use Firebug or your browsers web dev tools and inspect your text widget, you will see that all text widgets are given the following class.

.widget_text

 

Which you can use to style all text widgets.

 

Not sure what you're referring to, by image widgets.

Go to the full post


  • Please log in to reply
10 replies to this topic

#1 anet

anet

    Advanced Member

  • Members
  • PipPipPip
  • 34 posts
  • Country: Country Flag

Posted 21 March 2013 - 11:42 PM

Hi, I have read the thread on here about how to add background color to text widgets. I've done that, and it worked, but I am not happy with the look.

 

1.

Here's a screenshot of the result when I used the following code in custom css:

 

 
.widget .textwidget {
  background-color: #d0cece;
}
 
 
 
2.
And here is what I've tried, after inspecting the element, to put the background behind the whole widget, including the title:
 
.widget .textwidget .widget-pad {
  background-color: #d0cece;
}
 
But with this code there is no background at all. As you can see from the site as it is now:
www.laccdev.lightoflearning.org/directions/
 
 
 
Can anyone help me see what I need to see in firebug inspections in order to write the code to get a background behind the whole widget? I want it change all the text widgets in sidebars; several pages have them, that's why I tried writing the code with .widget etc.
 
If I could just get how to write the code for this, then I can venture on to rounded corners! lol!
 
 
Thanks for any help!
 
 
 
 


#2 anet

anet

    Advanced Member

  • Members
  • PipPipPip
  • 34 posts
  • Country: Country Flag

Posted 22 March 2013 - 01:23 AM

OK, so I found something on another thread (http://www.pagelines...und#entry130423)

 

and adapted it like this for my color choice:

 

 

.<span class="searchlite">widget</span> 
.<span class="searchlite">widget</span>-pad {
    <span class="searchlite">background</span>: #d0cece;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    padding: 5px;
}
 
Now the padding area as well as the text area have background color. GREAT!

 

 

But I still don't understand...

What is 'searchlight' and how would I have know to use that? It's not anywhere in the w3schools.com stuff I read on selectors or classes.

 

When making css classes like this, do we just make up a name? If so, how is my site figuring out that 'searchlight' is my textwidget and not other widgets? Otherwise, when I use firebug, as in my post above, I tried to put what I found as the selector, but the code wasn't generating anything for the textwidgets.

 

Just to learn, I changed the code to this:

 

.<span class="textwidget">widget</span> 
.<span class="textwidget">widget</span>-pad {
    <span class="textwidget">background</span>: #d0cece;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    padding: 5px;
}
 
and the change made no effect; it still does what the same code did when 'searchlight' was in there.
 
So, now my question is:

How do I write the selector portion so that ONLY my Text Widgets in the Sidebar are affected and not my Image Widget?

 

On this page of my site (www.laccdev.lightoflearning.org/now/), I have an Image Widget on top, then a Text Widget. I'd like to control what happens to each kind of widget...

 

Anyway, now I also have rounded corners, and I'm happy about that bonus in this 'fix'.

 

Thanks for any help coming my way.   :)



#3 anet

anet

    Advanced Member

  • Members
  • PipPipPip
  • 34 posts
  • Country: Country Flag

Posted 22 March 2013 - 01:36 AM

Ok, I'm learning and learning...sorry for the many posts.

 

After I reloaded my Custom Css page, the code cleaned itself up to the following (which still puts a background behind the widget+padding for all sidebar widgets, as it did up above when it had the 'searchlight' stuff in it):

 

 

.widget
.widget-pad 
 {
    background: #d0cece;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    padding: 5px;
    margin: 5px;
}
 
 
Guess that's PageLines CSS doing it's magic.
 
My last question still stands: how do I write the selector in this code so that only the textwidgets in the sidebar are affected, and not the image widget? 
 
Thanks again tons and tons!!!


#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 22 March 2013 - 03:09 AM

Hi Anet

 

If you're looking to target one particular text-widget with css, you can use the 'text-li' id to apply the css to.

 

Like here - http://screencast.com/t/v98CninpS

 

You'd place that in front of your selector.

 
#text-9 
.widget
.widget-pad 
 {
    background: #d0cece;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    padding: 5px;
    margin: 5px;
}
 

If you just wanted to affect widgets in the sidebar, add the sidebar class as a prefix to your css.

 

 
.section-sb_primary
.widget
.widget-pad 
 {
    background: #d0cece;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    padding: 5px;
    margin: 5px;
}
 

Think of it was each time you put a higher prefix in from of your code, you're making that code more specific, closing in on certain areas etc.

 

Hope that helps.



#5 anet

anet

    Advanced Member

  • Members
  • PipPipPip
  • 34 posts
  • Country: Country Flag

Posted 22 March 2013 - 09:38 AM

Hi, James,

 

What you wrote is helpful. But I want to target all textwidgets in the sidebars, and at the same time not target the image widgets in the side bars...any way to do that?

 

If not possible, I can live with the background on both textwidgets and imagewidgets, but wanted to know how to target one type of widget.

 

Thanks very much!



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 16313 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 22 March 2013 - 10:15 AM   Best Answer

Hi,

 

If you use Firebug or your browsers web dev tools and inspect your text widget, you will see that all text widgets are given the following class.

.widget_text

 

Which you can use to style all text widgets.

 

Not sure what you're referring to, by image widgets.



#7 anet

anet

    Advanced Member

  • Members
  • PipPipPip
  • 34 posts
  • Country: Country Flag

Posted 22 March 2013 - 01:06 PM

Hi, James,

 

Ok, I was using textwidget, cuz that's what was highlighted when I clicked to inspect the textbox...here's a screenie.

 

I guess I should have known to use the 'higher' class?

 

I'll go play with that in the code later today; working on other things for a few hours.

 

Thanks so much for all your help!!

 

 

 

oh, Image widgets = another kind of widget that I also use in the sidebars.


Edited by anet, 22 March 2013 - 01:07 PM.


#8 bleuy

bleuy

    Advanced Member

  • Members
  • 77 posts
  • LocationHampshire
  • Framework Version:Developer
  • Country: Country Flag

Posted 28 May 2013 - 05:11 PM

Hi Guys

 

I was looking to achieve what James suggested here - I'm just trying to target the 'Connect with Us' Widget (bottom left of the screen) but when I change the CSS nothing happens..... what am I doing wrong?!

 

the CSS reads

 

#text-5 
.widget
.widget-pad
 
 {
    background: #333333;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    padding: 5px;
    margin: 5px;
}

Related website: www.akita-investments.co.uk/redcross-reigate.co.uk

 

Eagerly waiting a response.

 

Thanks



#9 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 28 May 2013 - 11:16 PM

Hi there, I can't see the widget in question. Have you changed the layout since posting?



#10 bleuy

bleuy

    Advanced Member

  • Members
  • 77 posts
  • LocationHampshire
  • Framework Version:Developer
  • Country: Country Flag

Posted 27 June 2013 - 12:07 AM

Yup, sorry - I managed to figure another way around the problem, but thanks for the response



#11 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 27 June 2013 - 05:20 PM

thanks for letting us know