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

Theme Reviewer at WordPress and Envato. Founder of http://ThemeReview.co

Tagged with:
Posted in WordPress

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: