6 replies to this topic

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

 

 

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

 

 

 

 

[anet]

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.  

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

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

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

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

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

 

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.