Perk Up Your Weblog with Custom CSS

A few weeks ago we explained that the knowledge base is not just for new users and we mentioned Custom CSS. We want to share more about this feature with you now. While that big empty box may not look like it can do a whole lot, looks are very deceiving. This Pro level feature is a great way to customize your weblog's appearance without converting to Advanced Templates. With a little CSS know-how, you can be on your way to perking up your weblog in no time.

We have shown you how to center a banner in a fluid theme and how to add a banner to a pre-defined theme but how about we show you a few more tricks? Our knowledge base is always being updated to contain new information and we've added a few tips and tricks like how to add a background image to your weblog and removing padding from a banner as well.

Here's an example that you may find helpful. Let's say want to add a background color to your TypeList's header. Go to Weblogs > Design > Edit Custom CSS and add this code in the white box:

.module-header {background-color: #EEEEEE;}

In this example, we added a grey background to our header but this can be changed to display any color you would like. After saving your changes and republishing your weblog, the result should look like this:

The key to using this feature successfully is to view your weblog's source code, determine what class is applied to the item you want to modify and add in the CSS to make the change. Not experienced with CSS? That's okay, this great tutorial can help get you started. As you start making your first few modifications to your weblog, you will begin to discover that the possibilities are endless.