Styling particular WordPress 2.9 widgets with CSS

sidebarwidgetApplying 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.

3 comments

  1. Pingback: Styling particular WordPress 2.9 widgets with CSS | position … | CSS Guru How to CSS
  2. hi – is it just me !! can any one explain why when i type in the bing browser “www.position-relative.com” i get a different site yet whe i type it in google its ok? could this be a bug in my system or is any one else having same probs ?
    sadensy

Leave a Reply

Your email address will not be published. Required fields are marked *