Changing colors of tab in tabbed widget

Hi, Shannon:

Slight syntax error. Try this:

.tabbed-widget .nav-tabs>li>a {
background: #81C1C9;
}

There shouldn’t be a comma after .tabbed-widget and there should be a period before nav-tabs. I also like putting a semi-colon after each property value, even though it’s strictly not necessary for the very last property. That way, if I happen to add other properties later, I won’t get a syntax error if I forget to add it.

Thanks, that works!

Another widget puzzle I can’t solve is the space between the title and the rest of the widget for the Twitter and Facebook widget. The twitter widget has a border, but there is a space between the bottom of the title and the top of the widget border. There’s a similar space with Facebook but no border.

Currently the widget titles are controlled by:

.widget-title {
background-color: #81C1C9;
padding-top: 10px;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
font-family: Yanone Kaffeesatz, sans-serif;
font-style: normal;
text-transform: normal;
text-align: center;
position: center;
}

What is the CSS for removing those spaces?

Thanks!

For the widget titles, use this rule:

.widget h4.widget-title {
    margin-bottom: 10px;
}

10px is the current setting, change it to zero to remove all of the extra spacing.

For the Facebook widget, it looks like you added an empty text widget so you could get a consistent looking title for it (very clever!). To close up the space between the title and the Facebook widget, use this rule:

#text-2.widget {
    margin-bottom: 30px;
}

The #text-2 selector specifically targets the text widget with the Facebook title. 30px is the default spacing between widgets, so change this value to your liking.

This works perfectly!

After adding these I figured out how to put a border around the categories and Facebook widget, but can’t figure out how to:

1) make the border rounded like the Twitter widget–for the MailChimp, category and Facebook widgets.

2) how to round the widget title corners

3) how to get rid of that space between the category-widget title and the border.

Thanks for your help!

4) And if the space at the bottom of the Facebook widget can be shrunk.

In your custom CSS, you have this rule:

.post,#comments,#pings,#no-comments,#comment-form,.widget{
   box-shadow:none !important;
   border-radius:0 !important
}

In general, you should avoid the use of !important whenever possible. It makes later changes (like in this situation) more difficult (i.e., that’s why the border-radius property you added for the Facebook widget isn’t working). If some rule isn’t working, then just make the selector more specific instead of adding !important.

So, first remove the !important clause from the border-radius property because you’re going to use the border-radius property to make the rounded corners. You should see the corners round on your Facebook widget. To make a more general rule for all widget, you can add this:

#sidebar .widget {
   border-radius: 8px;
}

I just used the same value that you added for your Facebook widget.

For the widget titles, you can use this:

.widget-title {
   border-radius: 8px;
   margin-top: 0;
}

The margin-top of zero will eliminate the extra space at the top of the Category widget. The single value for border-radius rounds all four corners. If you want to have just the top corners rounded, use this instead:

.widget-title {
   border-radius: 8px 8px 0 0;
   margin-top: 0;
}

As far as the extra space at the bottom of the Facebook widget, that’s a bit more problematic. There’s an inline style which sets the height of the iframe to 400px (an iframe is like a window into another site, in this case, Facebook). To override this, you can add this CSS:

#facebook-likebox-2 iframe {
    height: 250px !important;
}

Note that in this case, the use of the !important clause is necessary because that’s the only way to override an inline style (an inline style is one which is written directly into the element and not contained in an external file). As the the number of FB likes for your page grows, you’ll have to increase the height value accordingly.

Thanks! This is really helpful!