Jump to content
anet

Help with Text Widget Styling

Recommended Posts

anet    0
anet

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:

http://i.imgur.com/eDyZe60.jpg

 

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

Share this post


Link to post
Share on other sites
anet    0
anet

OK, so I found something on another thread (http://www.pagelines.com/forum/topic/22438-need-help-with-sidebar/?hl=widget+background#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.   :)

Share this post


Link to post
Share on other sites
anet    0
anet

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

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
anet    0
anet

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!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
anet    0
anet

Hi, James,

 

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

http://i.imgur.com/ESZdf6m.jpg

 

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 (see edit history)

Share this post


Link to post
Share on other sites
Bleuy+    0
Bleuy

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

Share this post


Link to post
Share on other sites
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Bleuy+    0
Bleuy

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

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

thanks for letting us know 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×