Styling of Sidebar Widgets

Try using #sidebar ul li.widget to apply global styling to all of your sidebar widgets. Each widget also has its own individual class that you can also use to apply individual styling. Examine the source markup of your blog’s index page to identify the individual class. Or, if you use Firefox, try Firebug.

I’m having trouble with my RSS section in the sidebar here. https://www.bearhugsforbabies.org/newsite.

I created styling for “rsswidget” by adding it as

#sidebar .rsswidget {
        margin-bottom: 20px;
overflow: hidden;
line-height: 10px;
font: Trebuchet;
font-size: 10px;
}

And it applies the style partially. It still seems to take the line-height from the “#sidebar .block ul li” and I am not sure why?

any ideas?

Try this, as a quick fix…

.block li a {font-size:inherit;line-height:inherit;}

Oh I think I might not have explained right. It seems to be inheriting and I don’t want it too… Here is the entire code

#sidebar a { color: #354B59; text-decoration: none; }
#sidebar a:hover { color: #996666; }

#sidebar .block {
	overflow: hidden;
        margin-bottom: 20px;
}
#sidebar .block ul li {
border-top: 1px dotted #b7c396;
line-height: 30px;
font: Trebuchet;
font-size: 14px;
}

#sidebar .pages {
border-top: 1px dotted #b7c396;
line-height: 10px;
font: Trebuchet;
font-size: 14px;
}

#sidebar .rsswidget {
        margin-bottom: 20px;
overflow: hidden;
line-height: 10px;
font: Trebuchet;
font-size: 10px;
}

Did you actually try the suggestion though?

Your widget with the smaller text will look the like the one above it if you apply the suggested code…

?? I did, but I don’t want my rsswidget to take on the .block code font size or line-height. I want it to use the code I put in there, but for some reason – not sure why – it’s only taking on the font and fnt size, but the line-height is still being set at 30px when I want it to be 10px.

The block has the same class as the other block, how do you expect to differentiate the two if the code for both is essentially the same?

I think I am misunderstanding… I am trying to stye the RSS Widget stories only… “#sidebar .rsswidget”

I don’t want the #sidebar .rsswidget style to essentially override what the theme has for the sidebar .block or sidebar .pages… and it is in terms of font size, but not line-height.

Maybe if you could tell me what the list/links/sidebar bit you want to style “should” look like…

The line-height isn’t going to work all the way down at 10px due to the existing padding on the LI element it sits in… (i think)…

Can you handle some basic graphic chopping? .. if so can you make an image to show how you want it to look, and we can go from there…

Yes, Thank you! I want it to look like this

https://www.bearhugsforbabies.org/look.gif

I had a play around, the line-height is inheritted from the LI element.

The reason the link doesn’t accept the line-height is because it’s an inline element…

Use display:block in your CSS…
Example:
a.rsswidget {line-height:20px;display:block;margin:0}

You’ll need to set the margin to 0 to.. or you’ll notice what looks like padding beneath the links…

Play with what i’ve put above, i’m pretty sure it’ll behave as you want now..

That works perfectly. Thank you so much for taking the time to help me. I REALLY appreciate your help!

You’re welcome.. ?? ..

Admittedly i didn’t know that about inline elements until i looked at your particular problem… ?? It makes perfect sense though…