Customizing calendar CSS

• 

  cvanhasselt · Member · Dec 26, 2009 at 9:22 pm

  • Copy link
  • Add topic to favorites

  I’m trying to customize the CSS for the calendar. What I’ve been able to do, because of the ‘<td class=”today”>’ markup is to put a background image on today.

  I would like to have a evenly sized background color or image for days with posts. The days with posts can be selected with
  table#wp-calendar tbody td > a:visited, or
  table#wp-calendar tbody td > a:hover,
  for example. The problem (and I know I’m being picky) is that by selecting the ‘‘ tag instead of the parent <td> tag, sometimes the tag text is 1 character wide, and sometimes 2 characters, so the background-colored square is usually not square, or even consistently sized across the calendar.

  I’ve gathered that that there is no way with CSS (at least not CSS 2.0 without jQuery) to select the parent of an element. Can anyone suggest a good way to select a ‘<td>’ in the calendar that contains a ‘‘ tag?

  I hope that makes sense!

  The blog I need help with is: (visible only to logged in users)

• 

  cvanhasselt · Member · Dec 30, 2009 at 12:44 am

  • Copy link

  Well, I answered my own question. Once the nested tag is changed to display-block, you can add borders to it. Setting the block width to 70% (of the enclosing <td> tag) shrunk the square nicely. Looks more or less like I wanted.

• 

  timethief · Member · Dec 30, 2009 at 12:59 am

  • Copy link

  Thanks for coming back and sharing you experience so others can benefit from it in the future. Bookmarking! :)