All In One Event Calendar CSS

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/

All In One Event Calendar by Time.ly CSS

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;
}

A sample text widget

Etiam pulvinar consectetur dolor sed malesuada. Ut convallis euismod dolor nec pretium. Nunc ut tristique massa.

Nam sodales mi vitae dolor ullamcorper et vulputate enim accumsan. Morbi orci magna, tincidunt vitae molestie nec, molestie at mi. Nulla nulla lorem, suscipit in posuere in, interdum non magna.