position: relative;

Applying CSS styles to a particular widget in WordPress (2.9.1 is my current version at the time of this posting) is surprisingly easy.

I’m using the WPNG Calendar widget to pull in events from Google Calendar. I wanted to apply special styling to it that matches the styling of one other key widget on the home page, so here’s what I did. I found the id for the calendar widget (wpng-calendar) and then went into my CSS file to add this:

div#wpng-calendar {
position: relative;
width: 301px;
padding: 0 0 5px 0;
margin: 12px auto 10px;
background: url(../images/teaser.png) no-repeat bottom left;
}
div#wpng-calendar h3 {
position: relative;
top: 0;
margin: 0;
padding: 0.5em 0 0 1em;
background: url(../images/teaser-top.jpg) no-repeat top left;
}
div#wpng-cal-widget-events {
padding: 0.5em 1em 1em 1.2em;
}
div#wpng-cal-widget-events ul {
margin: 0 1em 0 1.5em;
list-style-type: disc;
}
div#wpng-cal-widget-events ul li {
padding: 0 0 0.2em 0;
line-height: 1.4em;
font-size: 13px;
}

Easy, and I now have a nicely-styled events listing in my sidebar.