CSS Styling for Default WordPress Calendar Widget

Calendar Widget

wordpress calender css stylingA lot of time when you install a theme or when you design a theme, you almost forget about the WordPress calendar widget. There are many premium themes in the market which do not care about this widget simply because it is one of the “lesser used” functionality.

So if you were thinking about having a calendar widget but your designer did not appreciate in creating extra CSS for the calendar. Here’s small piece of code for you, which I built for my next theme.

You can use the Jetpack’s latest feature “Edit CSS” under the appearance tab for this, since I’ve created this theme based on default WordPress calendar widget, so all you have to do is copy and paste the css of this plugin in “Appearance->Edit CSS”.

There are two small images which I have converted into base64 so everything is contained in this piece of CSS. However, I found that base64 images are not being rendered at all in the Jetpack “Edit CSS” feature.

So for best view, I would advice you to download the plugin version, well its only 4 lines of code :P. All you have to do is upload and click activate. Enjoy the CSS styling for your WordPress Calendar Widget.

[button url=”http://goo.gl/G9H1hr”]DOWNLOAD IT[/button]

I have used this styling on VibeThemes.com pages you can view at our Contact page sidebar.

Share your thoughts on this via comments or tweets or likes …

Enjoy the Vibe,

( v )




June 13, 2016

14 responses on "CSS Styling for Default WordPress Calendar Widget"

  1. Awesome, plugin!

  2. nice it works, but i need to resize it 🙁 can u help me ?

    • yes, instead of “width” try changing it to “max-width” in the css. so it should be max-width:300px;, this would make it responsive. Next you might need to reduce padding on individual table td’s..

  3. Thanks that was usefull for me

  4. Hi,
    Thanks for this styling.. really a great improvement on the default calendar.

    My question is this.. how can I colour weekdays and weekends differently?

  5. Hi, do you know how using css display all days and weeks in one line???

  6. great improvement, however there are issues, when clicked to an earlier month there are original styling “leftovers” and the next month’s name is displayed over the right arrow image

  7. well, it does styling to other areas in the sidebar, so I removed it, unfortunately

  8. here also download didn’t work

  9. Calendar looks awesome but download link does not work

  10. Hi, the download link did not work for the calendar css.

Leave a Reply

Template Design © VibeThemes. All rights reserved.
%d bloggers like this: