Styling the Default WordPress Calendar
April 2, 2014 CSS, Development, WordPress Social Share
When you add the default WordPress calendar widget, it comes out looking pretty bland. It’s coding is stuck in the table-era of web development but it still does the job well.
To style the calendar, I started with a “reset” of sorts from WPExplorer founder AJ Clarke.
The final CSS code can be found below.
.widget_calendar h3.widget-title {display: none;}
#wp-calendar {width: 100%; margin-bottom: 10px;}
#wp-calendar caption {text-align: center; color: #ffffff; font-size: 18px; font-weight: bold; text-transform: uppercase; background-color: #000000; padding: 25px 0; font-family: 'Exo', sans-serif;}
#wp-calendar thead {background-color: #414042;}
#wp-calendar thead th {font-weight: bold; color: #ffffff; font-size: 14px; text-align: center; padding: 3px 0 5px;}
#wp-calendar tbody {color: #aaa;}
#wp-calendar tbody td {background-color: #ffffff; border: 1px solid #f4f4f5; text-align: center; padding: 8px; color: #000000;}
#wp-calendar tbody td.pad {background-color: #ffffff;}
#wp-calendar tbody td.day-with-post {background-color: #2ecefc;}
#wp-calendar tbody td.day-with-post a {color: #ffffff; text-decoration: none; font-weight: bold;}
#wp-calendar tbody td.day-with-post:hover {background-color: #f02efc;}
#wp-calendar tbody .pad {background: none;}
#wp-calendar tfoot {display: none;}
The calendar design matched the rest of their site and turned out great thanks to a bit of editing.
