I see a lot of WordPress theme developers do this and I know I’ve done it a lot in the past…we forget to include ALL the styles for the core WordPress classes, like the image alignments, captions and widgets. That is why I have added it to my WordPress Theme Development Checklist. Most of these classes are pretty easy to customize and I have already created a standard CSS which I use and customize for any theme I work on, today I decided to share a very simple style for your WordPress Calendar widget, which you can copy and paste into your theme’s style.css file to give it this minimal look.
Calendar Widget CSS
Below is the CSS required to give your calendar widget this minimal look. Note: The shadow around the calendar is just for the image on the post.
/* calendar widget */
.widget_calendar {float: left;}
#wp-calendar {width: 100%; }
#wp-calendar caption { text-align: right; color: #333; font-size: 12px; margin-top: 10px; margin-bottom: 15px; }
#wp-calendar thead { font-size: 10px; }
#wp-calendar thead th { padding-bottom: 10px; }
#wp-calendar tbody { color: #aaa; }
#wp-calendar tbody td { background: #f5f5f5; border: 1px solid #fff; text-align: center; padding:8px;}
#wp-calendar tbody td:hover { background: #fff; }
#wp-calendar tbody .pad { background: none; }
#wp-calendar tfoot #next { font-size: 10px; text-transform: uppercase; text-align: right; }
#wp-calendar tfoot #prev { font-size: 10px; text-transform: uppercase; padding-top: 10px; }Calendar Widget Style (what it should look like)
Once you have added the CSS above to your WordPress theme, the calendar widget should look like the following image. If it doesn’t it’s possible your theme already has some styles built-in for tables or the widget itself which is overriding your newly added CSS. Of course this is a very simple style widget but it’s always easier to start with a simple style and go from there. Plus, who even uses the Calendar widget these days?
Do you use the calendar widget? I’m curious to know, please let me know in the comments below. Personally I’ve never used the widget but as a developer it’s important to style it incase someone using your theme does want to use it.