Owning the Sugar Events Calendar with CSS

This tutorial will show you how to take your Sugar Events Calendar and own it with some simple custom CSS as seen in the example here: Customized Sugar Events Calendar.

Be sure to check out our review of Sugar Events Calendar and if you're not familiar with CSS, our tutorial on how to use the Chrome Inspect Tool before you start this tutorial. We promise it will give you some great insight.

How to customize the Sugar Events Calendar

Give Your Calendar Some Sugar!

By default the Sugar Events Calendar looks pretty plain. It offers little to no styling and most of it is pulled from your theme (links...etc). The truth is that it's pretty lame, stale, [insert your description] and not that interesting. Luckily for you, we can help you change that.

/*** Changes Background Color and Height of Days ***/
#sc_calendar td.calendar-day {
     background: lightblue;
     height: 150px;
}

/*** Changes Background Color of Days on Hover ***/
#sc_calendar td.calendar-day:hover {
background-color: lightcyan;
}

/*** Styles First Name Field ***/
#sc_calendar .calendar-row .calendar-day.today {
     background-color: #90ee90ad;
}

/*** Styles First Name Field ***/
#sc_calendar .calendar-row .calendar-day.today:hover {
     background-color: lightgray;
}

/*** Styles The Calendar Numbers ***/
#sc_calendar td div.day-number {
     font-size: 14px;
     font-weight: 700;
     background-color:white;
     border-radius: 3px;
     padding: 1px 2px 1px 2px;
}

All the CSS combined

Here's all the CSS combined in case you just want that. Keep in mind that you'll need to change up the colors and maybe play with a px to get it to suit your needs.

/*** Changes Background Color and Height of Days ***/
#sc_calendar td.calendar-day {
     background: lightblue;
     height: 150px;
}

/*** Changes Background Color of Days on Hover ***/
#sc_calendar td.calendar-day:hover {
background-color: lightcyan;
}

/*** Styles First Name Field ***/
#sc_calendar .calendar-row .calendar-day.today {
     background-color: #90ee90ad;
}

/*** Styles First Name Field ***/
#sc_calendar .calendar-row .calendar-day.today:hover {
     background-color: lightgray;
}

/*** Styles The Calendar Numbers ***/
#sc_calendar td div.day-number {
     font-size: 14px;
     font-weight: 700;
     background-color:white;
     border-radius: 3px;
     padding: 1px 2px 1px 2px;
}

Now what?

Now copy and past this into your custom CSS area either in the Customize section (under Appearance in the Admin Dashboard), or if your Theme and/or Child Theme has a place for custom CSS add it there.

The only thing left now, is to comment and share a picture of your calendar and to share this tutorial.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Code Vertical Icon
From web design, WordPress, tutorials, and web developement, we have you covered.
Web Design
Website by VerticalHosts.com

This is an Elementor Popup triggered by Text.

built with love using elementor pro

codevertical.com

Code Vertical Icon

Customizing the Elementor Popup Close Button

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram