customizing calendar widget with CSS?

• 

  artprop · Member · Mar 3, 2010 at 6:14 pm

  • Copy link
  • Add topic to favorites

  Some themes show the calendar widget with today’s date and days with posts displayed differently from the other days. See for example, http://oldcleeve.wordpress.com/2008/06/

  Other themes don’t do this. I am considering writing some CSS to change a theme that I would like to use, but I think I need to know the names of the relevant classes and/or tags. Is this information available somewhere?

  And in general, are all the classes and tags and what they are used for listed somewhere?

• 

  devblog · Member · Mar 4, 2010 at 4:03 pm

  • Copy link

  No, you’ll need to read the markup and get the classes/ids from there.

• 

  artprop · Member · Mar 5, 2010 at 6:25 pm

  • Copy link

  Ok, I borrowed this css from Ocean-mist and tried it out on Duotone. Looks fine.

  /* calendar - this works nicely on duotone theme */
  #wp-calendar caption {width: 157px; text-align: center; background: #4b5d67; color: #fff; border-bottom: 2px solid #e6eef7;}
  #wp-calendar { border-collapse:collapse; width: 156px; text-align: center;}
  #wp-calendar thead tr {background: url(images/cal_bkg.gif) bottom right no-repeat;}
  #wp-calendar thead th {background: url(images/cal_single.gif) top left no-repeat;}
  #wp-calendar tbody td {background: url(images/cal_single2.gif) top left no-repeat; padding: 2px 0;}
  #wp-calendar #today {background: url(images/cal_single_today.gif) top left no-repeat; color: #000;}
  #wp-calendar tbody .pad { background: url(images/cal_pad.gif) top left no-repeat;}
  #wp-calendar a {padding: 2px 0; font-weight: bold;}
  #wp-calendar tfoot td {padding: 3px 0; background: url(images/cal_pad.gif) top left no-repeat;}
  #wp-calendar #next {text-align: right; padding-right: 10px;}
  #calendar_wrap {display: block; width: 157px; background: url(images/cal_bkg.gif) bottom right no-repeat; padding: 0 1px 1px 0; margin: 0 0 18px 18px;}