Everyone who uses a sidebar widget or plugin will find the need to style the elements within the item block to match their theme layout and style but many people have problems debuging their elements and applying CSS. This HowTo will hopefully show you methods you can use to make these changes quickly.

To get the most out of this HowTo you should understand the basics of HTML and CSS. If you don’t then you will need to learn the application of CSS along with the methods of using WordPress Themes to make the changes to your site.

At this point you should have WordPress installed and functioning with your selected theme. there should be no dramatic errors in the page layout or how it is loading.

Your Theme files located in your /baseinstallfolder/wp-content/themes/YOURTHEME folder will include a number of files that make up your total web page.

You will have a header.php file that starts the top of the page and includes a call to your css file styles.css, an index.php file that is the center of your page, a sidebar.php file that displays your sidebar content and a footer.php file that displays the bottom part of your page.

You will have additional files such as your comments.php for displaying visitor comments and a archive.php file that displays category pages and archives.

If your theme has more then one sidebar you may have a leftsidebar.php and a rightsidebar.php file that will load individually the names of these files will be referenced in your index.php file and are loaded with a php include call such as…

[php]

<?php include (TEMPLATEPATH . ‘/leftsidebar.php’); ?>

[/php]

Your sidebars will also be referenced in your functions.php file if the theme is widgetized meaning if the sidebar setup will allow you to drag and drop widgets from within the WordPress Appearance/Widgets page.

Now that we know which files to look in for our sidebar code we can start examining our page output for keys on how we should apply CSS to format our item blocks.

Using FireBug To Find Your CSS Selectors

Although you may only need to perform this job once in a while if not only once I would suggest that you download and install the FireBug Plugin for FireFox browsers. It makes finding CSS Selectors on your pages and editing them live much easier.  This HowTo won’t go into much detail about the FireBug Plugin so if you need help see one of our other HowTo’s or read their documentation page.

Finding Your Sidebar CSS Selectors

The first thing you need to do is take a look at your page’s source code. Using View Source from your browser or your FireBug Plugin find the area in your page code that outputs your sidebar.

If you are lucky you will see your Theme Author wrapped your whole sidebar in a DIV with a CSS Selector specific to that sidebar. Such as

<div id=”leftsidebar”>

Menu and other items here

</div>

If your author has not added a Parent ID or Class that wraps your whole sidebar then you should do  this in your sidebarX.php file.

Within the parent sidebar selector you will see widget blocks that load your menus and other plugin features such as a most popular posts, archives and other features.

Examine your sidebar item blocks and find their selectors

If you view the right sidebar on www.npsites.com you will see there is a top 10 posts item block.

The links that make up that block are wrapped in a parent div with the id of “top10posts”

In our CSS File this area is defined as:

[php]

#top10posts {
background-color: #3366CC;
border: 4px solid #DFDFDF;
font-size: 11px;
font-weight: bold;
margin: 5px 0;
padding: 0 0 5px;
}
[/php]

To style the headline or title text of this block we use

[php]

#top10posts h3 {
background-color: #3366CC;
border-bottom: 2px solid #DEDEDE;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
margin: 5px 5px 0 10px;
}

[/php]

To style the User List UL block we use

[php]

#top10posts ul {
list-style-type: none;
margin: 5px 5px 0 10px;
padding: 0;
}

[/php]

To style each Line Item LI inside the UL we use

[php]

#top10posts ul li {
background-color: #3366CC;
border-bottom: 0 solid #A9A9A9;
border-top: 0 solid #1E3589;
margin: 0;
padding: 0 0 5px;
}

[/php]

And each Link or A Selector is defined by using

[php]

#top10posts ul li a {
color: #FFFFFF;
display: block;
margin: 0 0 0 0;
padding: 0 0 0 3px;
width: 98%;
}

[/php]

Defining the CSS is Hierarchical

You will notice that as we go deeper into the nesting of the item block the parent Selector that we defined first ID = #top10posts allows us to control the inside parts without the need to add an id to each item.

For instance if you want to define the links or anchors inside a block you do not need to give them their own specific CSS Selector you simply use the Parent and the child together as is shown in the last example.

#top10posts ul li a{ define}

this will drill down to the smallest item simply by using the parent.

What About CSS Styling Widgets?

Styling a widget is a little more tricky because each time you add a new widget to your sidebar the widget code will add its own selector. Sometimes this selector is always the same.. However when you add things such as Text or Poll Widgets you will find that each widget has its own unique selector.

The only way to find the selector for a widget is to view the source of your page and use the css selector that the widget applied when you added it.

For example

<div class=”side-c widget_text” id=”text-327182321“>

There is no possible way to predict the id for this text widget id=”text-327182321” the number is generated when you add a block of text to your sidebar.

ALSO if you delete and then re-add a widget

OR if you upgrade a plugin that uses this method of adding a unique ID to the Widget Block you will need to re-apply your CSS to that new ID number in your styles.css file.

Your Functions File

All widgetized themes will have a functions.php file that defines the number of widget areas that can be shown or controlled on your pages.

Within this file you will see the widget setup area that may  show selectors such as <ul><li> being used to wrap your widgets.

If you have problems defining your CSS you may look in this file to try to debug how your author is applying tags to your widget blocks.

Unfortunately when this practice is used you may find it difficult to setup margins and padding around widgets but it is often possible for you to override this by editing the code to fit your site.

Final Note

Stylizing your Website’s Content can be time consuming even if your designs are pretty simple. Remember that the first thing you need to do when stylizing with CSS is finding or defining a Parent Selector. This is true whether you are stylizing a widget on your sidebar or the whole page of your site.

View Source is your friend and try using a inline editor such as firebug that will allow you to test your changes live.

Once you have your CSS as you like it you can transfer it to your styles.css file.

Try to stay away from inline CSS such as <a style=”font-size:14px” > because it will be too time consuming to edit all of your changes.