CSS Styling for Default WordPress 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 )





  1. oumz says:

    Awesome, plugin!

  2. The download didn’t work

    1. Mr.Vibe says:

      Send us an email at [email protected] and we’ll send you the link..

  3. imadben says:

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

    1. Mr.Vibe says:

      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..

  4. ibergag says:

    Thanks that was usefull for me

  5. Rod says:

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

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

  6. stan says:

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

  7. jansen says:

    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

  8. jansen says:

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

  9. Div Balar says:

    here also download didn’t work

  10. fabosandro says:

    Calendar looks awesome but download link does not work

    1. Mr.Vibe says:

      Send me a dummy mail, I will email you the calendar plugin.

  11. Rhonda says:

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

Leave a Reply

%d bloggers like this: