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.
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;
}
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 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.
This is an Elementor Popup triggered by Text.
