Get Your Free Copy of All-In-One Event Calendar

Version 1.10.9 is current as of 12-12-13 (CSS Tutorial Below)

http://time.ly/

The CSS for the calendar can be added to your Theme’s CSS

Find your Theme’s CSS file here:

In your dashboard on your website, Click on Appearance then Editor and look for a file with the ending .css
Click on the file and add the CSS code below (or your version) to the end of the text

.ai1ec-agenda-widget-view {
background: transparent;
}

.ai1ec-agenda-widget-view .ai1ec-date.ai1ec-today, .ai1ec-agenda-view .ai1ec-date.ai1ec-today {
border-top: 0px solid #f0f0a9;
background: #f6f6cc;
background: -webkit-gradient(linear,0 0,0 100%,from(#f4f4bf),color-stop(1em,#f4f4bf),to(#fff));
background: -webkit-linear-gradient(#f4f4bf,#f4f4bf 1em,#fff);
background: -moz-linear-gradient(top,#f4f4bf,#f4f4bf 1em,#fff);
background: -ms-linear-gradient(#f4f4bf,#f4f4bf 1em,#fff);
background: -o-linear-gradient(#f4f4bf,#f4f4bf 1em,#fff);
background: transparent;
background-repeat: no-repeat;
}

.ai1ec-agenda-widget-view .ai1ec-date {
background: transparent;
border: 0px;
}

.timely {
color: #ffffff;
font-size:1em;
line-height: 1.2em;
}

.ai1ec-label {
color: #D57A45;
font-size: 1.2em;
}

The information below is out of date but can be used for version 1.8.3

Before editing the CSS Files, Choose your All-In-One-Event-Calendar theme in your website under Dashboard/Appearance/Calendar Themes.

Kompozer is a free HTML editor.  I’m using the Calendar Theme Umbra so I would open Kompozer, Choose File/Open, then find my downloaded Calendar file, open it to all-in-one-event-calendar/themes-ai1ec/umbra/css.  Make sure the drop down menu at the bottom is selected to “All Files” so you can see the “calendar” and “event” css files.  Then follow individual instructions below.

I use FILEZILLA (client) to upload files to my website (you must know your user name and password for FTP – sometimes this is the same as your hosting account’s user name and password).  To upload the calendar, you need to place it here:

/public_html/yourwebsitename/wp-content/plugins

To upload changes in CSS go here: wp-content/themes-ai1ec/umbra

all-in-one-event-calendar/themes-ai1ec/umbra/style.css (must have “All Files” selected to see this file when opening in Kompozer (version 1.83 = style.css)

WIDGET BACKGROUND GRADIENT (May be different colors in CSS depending on which calendar theme you have chosen) 
FOR CURRENT DAY:

Here I have changed the background of the widget to transparent and “Commented Out” (/*   */) the background gradients.

.ai1ec-agenda-widget-view .ai1ec-date.ai1ec-today {
border-top: 1px solid #000000 !important;
background: transparent;
/*background: -webkit-gradient(linear, 0 0, 0 100%, from(#040e16), color-stop(1em, #040e16), to(rgba(4, 14, 22, 0)));
background: -webkit-linear-gradient(#040e16, #040e16 1em, rgba(4, 14, 22, 0));
background: -moz-linear-gradient(top, #040e16, #040e16 1em, rgba(4, 14, 22, 0));
background: -ms-linear-gradient(#040e16, #040e16 1em, rgba(4, 14, 22, 0));
background: -o-linear-gradient(#040e16, #040e16 1em, rgba(4, 14, 22, 0));
background: linear-gradient(#040e16, #040e16 1em, rgba(4, 14, 22, 0));
background-repeat: no-repeat;*/
}

ALSO CHANGE FOR FUTURE DATES:

.ai1ec-agenda-widget-view .ai1ec-date {
border-top: 1px solid #151515 !important;
background: transparent;
/*background: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), color-stop(1em, #222222), to(rgba(34, 34, 34, 0)));
background: -webkit-linear-gradient(#222222, #222222 1em, rgba(34, 34, 34, 0));
background: -moz-linear-gradient(top, #222222, #222222 1em, rgba(34, 34, 34, 0));
background: -ms-linear-gradient(#222222, #222222 1em, rgba(34, 34, 34, 0));
background: -o-linear-gradient(#222222, #222222 1em, rgba(34, 34, 34, 0));
background: linear-gradient(#222222, #222222 1em, rgba(34, 34, 34, 0));
background-repeat: no-repeat;*/
margin: 0 !important;
padding: 0 !important;
float: left;
width: 100%;
}

WIDGET MONTH BACKGROUND:  (changed to red here):

.ai1ec-agenda-widget-view .ai1ec-month {
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
-o-text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
-ms-text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
-moz-text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
-webkit-text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
background: #CC0000;
font-size: 0.9em !important;
padding: 0.1em 0 0.2em;
text-transform: uppercase;
letter-spacing: 0.2em;
color: #fff;
}

CALENDAR.CSS

THIS IS HOW TO CHANGE THE CALENDAR BACKGROUND COLOR 

/* Month, week tables */
table.ai1ec-month-view,
.ai1ec-week-view table {
border-collapse: collapse;
border: 1px solid #ddd !important;
margin: 0 !important;
background: transparent;
table-layout: fixed !important;
clear: both;
width: 100% !important;
}

THIS IS HOW TO CHANGE THE BACKGROUND COLOR ON THE CALENDAR FOR DAYS WITHOUT NUMBERS (DATES NOT INCLUDED WITHIN CURRENT MONTH)

.ai1ec-month-view td.ai1ec-empty {
background: #888888 !important;
}

THIS IS HOW TO CHANGE THE BACKGROUND COLOR OF THE DATES (BAR ON TOP) AND THE TEXT COLOR FOR THE DATES (DELETE TEXT SHADOWS HERE (LAST 5 LINES)

.ai1ec-month-view .ai1ec-date {
text-align: right;
font-size: 10pt;
line-height: 12pt;
padding: 0 0.4em;
background: #7E9DBD;
font: 8pt Tahoma, Geneva, sans-serif;
color: #FFF;
    text-shadow: 0 1px 0 #fff;
    -o-text-shadow: 0 1px 0 #fff;
    -ms-text-shadow: 0 1px 0 #fff;
    -moz-text-shadow: 0 1px 0 #fff;
    -webkit-text-shadow: 0 1px 0 #fff;
}

CHANGE THE COLOR OF THE DAYS TEXT (SUN, MON, ETC) AT THE TOP OR MONTH VIEW OR WEEK VIEW

.ai1ec-month-view th,
.ai1ec-week-view th,
.ai1ec-week-view .ai1ec-hour-marker div,
.ai1ec-week-view .ai1ec-allday-label {
font: bold 9pt Tahoma, Geneva, sans-serif !important;
color: #000 !important;
text-shadow: 0 1px 0 #fff;
-o-text-shadow: 0 1px 0 #fff;
-ms-text-shadow: 0 1px 0 #fff;
-moz-text-shadow: 0 1px 0 #fff;
-webkit-text-shadow: 0 1px 0 #fff;
}

TO CHANGE THE COLOR OF THE EVENT TEXT IN THE MONTH AND WEEKDAY VIEW, CHANGE THE COLOR OF THE EVENT UNDER EVENT/EVENT CATEGORIES IN DASHBOARD

THIS IS WHERE TO CHANGE THE CURRENT DAY BACKGROUND COLOR IN MONTH AND WEEK VIEW
.ai1ec-month-view .ai1ec-today,
.ai1ec-week-view .ai1ec-today {
background: #ffd !important;
background: rgba(255,255,128,0.3) !important;
}

THIS IS TO CHANGE THE BACKGROUND ON THE AGENDA VIEW (NOT WIDGET).

.ai1ec-agenda-view .ai1ec-date {
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
border-top: 1px solid #f2f2f2;
background: #f2f2f2 !important;
background: -o-linear-gradient( #f2f2f2 1em, rgba(255,255,255,0) ) !important;
background: -ms-linear-gradient( #f2f2f2 1em, rgba(255,255,255,0) ) !important;
background: -moz-linear-gradient( #f2f2f2 1em, rgba(255,255,255,0) ) !important;
background: -webkit-gradient( linear, 0 1em, 0 100%, from(#f2f2f2), to(rgba(255,255,255,0)) ) !important;
background: -webkit-linear-gradient( #f2f2f2 1em, rgba(255,255,255,0) ) !important;
}