CSS Style For The WordPress Calendar Widget

Once the css is added to your WordPress theme the calendar Widgets got to appear to be the following image (make guaranteed to remove one style)

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;width: 100%;}
#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; }


comments 04

  1. Francisco Javier Murillo Vasquez at 5:04 am

    Hello, thank you very much your publications are very useful.


add a comment

Leave a Reply

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