How to style WordPress .rsswidget class?

In this example I am going to show you how to style your self-hosted WordPress RSS Widget without using the actual class name (.rsswidget). The codes are from my upcoming WordPress Theme Framework and styles are for .rsswidget only, not for an entire sidebar.php.

Before we started let’s go to functions.php file so that I can show you how sidebars are styled:

http://pastebin.com/X16xJiMu

From the above image you can see that I am using .widget-box to wrap each box individually and .title-sidebar for widget titles.


.widget-box {
background: #eee;
margin-bottom: 15px;
position: relative;
top: 10px;
}

My .widget-box is pretty basic nothing fancy or complicated.

.rsswidget icon styles


.widget-box .title-sidebar img {
width: 11px;
height: 11px;
float: right;
position: relative;
top: 10px;
}

Instead of display: none; what many designers like to use I am floating an icon to the right with position relative and margin top. Width & height of the icon is just default Twenty Ten sizes. Now to match all other non-hyperlink titles such as:


.title-sidebar {
background: #555;
color: #fff;
display: block;
line-height: 33px;
height: 33px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
text-indent: 15px;
}

we’re going to add some styles to .title-sidebar a:


.title-sidebar a {
color: #fff !important;
margin: 0 0 0 -10px;
padding: 0;
position: relative;
bottom: 2px;
}

And that is all folks, nothing major or time-consuming our .rsswidget is nicely styled to match all other titles without unnecessary display:none; for RSS icon.

Advertisements
Tagged with:
Posted in WordPress