PNW Topic Hotlist - Bringing Together Pacific NW Voices
Current Time:  

Sunday, February 18, 2007

Customizing the Sidebar Widget with CSS

They say no two snowflakes are alike, but the same could be said about blog templates and blogger design tastes.

When you add a widget to your sidebar, often you'd like that widget to fit the look and feel of the rest of your Web page, and to that end the Hotlist sidebar widget is configured to provide you with the ability to customize the display through CSS classnames.

There are ten of these defined for the Hotlist sidebar widget that control different aspects of the display:
Step 4 on the Sidebar Widget scroll out page (accessed from the menu atop the main Hotlist page) provides you with a means to visually see exactly what each classname affects. Simply mouse over the classname and the sample display will highlight the text it controls.

Using CSS you can change the font face, style and size. You can insert spacing between topics or blog entries.

You can add a thin black border around the entire widget by adding this markup to your blog:
<style type="text/css">
.pnwhotlisttable {
border: 1px solid black;
width: 100%;
padding: 3px 3px 3px 3px;
If you'd like to provide your own sidebar section title, you can omit the "PNW Topic Hotlist" header from the widget's display by adding this markup to your blog:
<style type="text/css">
.pnwhotlistmainheader {
Working with some CSS configurations can be tricky, but the possibilities are considerable. If you feel you need assistance, that can be provided. You can use the comment thread below, or submit your questions via email.

0 Comment(s):

Post a Comment
All comments are welcome, however, rather than posting an Anonymous comment please consider selecting Other and providing your name or nickname so others know who you are. Thanks.

<< PNW Topic Hotlist Blog Home