All In One Event Calendar IE7 and IE8 OPACITY FIX

You may need the latest Time.ly release of the FREE PREMIUM EDITION to change the CSS.

In the file calendar.css in wp-content/themes-ai1ec/umbra (or whatever theme you are using)/css/

Easiest way to find the code is to search (Ctrl + F  keys on keyboard) for “.ai1ec-posterboard-view .ai1ec-date-block-wrap”

change the filter: alpha(opacity=7);

to filter: alpha(opacity=50);

FIND THIS CODE

.ai1ec-posterboard-view .ai1ec-date-block-wrap {

float: right;
margin: 0 0 0.5em 0.5em;
background: #5e8cba;;
text-align: center;
color: #FFFFFF;
opacity: 0.7;
-moz-opacity: 0.7;
filter: alpha(opacity=50); /*CHANGE THIS NUMBER FROM 7 TO 50*/
-webkit-transition: 0.2s all ease-out;
-moz-transition: 0.2s all ease-out;
-ms-transition: 0.2s all ease-out;
-o-transition: 0.2s all ease-out;
transition: 0.2s all ease-out;
-webkit-transform: translatez(0);
}

Using Dynamic Content Gallery to display Events on Homepage

****DATES

Do not put DATES as text in the event description.  You may reuse the events or the event may be recurring.  The actual date is entered in a separate window below.

Log In

Add

/wp-admin

to the end of your url (ex. http://www.mysitename.com/wp-admin)

Hit Enter on keyboard

Click on Events

Add a New Event

OR

Use an old Event with “Draft” written next to the title

 Fill Out the needed fields

 Make a Repeating Event

 Upload a Picture

 Add a Picture from your computer

Check that the Image does

1. not contain a Link,

2. is Right-Aligned,

3. is Full Sized,

4. and Insert Into Post

 

 

Check “Events” button under Categories

Publish

ADD AN EVENT WITH ALL-IN-ONE EVENT CALENDAR AND DYNAMIC CONTENT GALLERY

Plugins Used In This Tutorial:

  • Dynamic Content Gallery
  • Resize At Upload Plus
  • All-In-One Event Calendar
    1. This first video is how to check that your settings in Resize At Upload Plus match your Dynamic Content Gallery image sizes.
    2. Add an event with All-In-One Event Calendar which will be displayed in your “rotating pictures” with your Dynamic Content Gallery.
      Watch on YouTube for a clearer video. VIDEO

      1. Add the title
      2. Add a picture
        1. Upload
        2. Copy the file location
        3. Add Keywords for Google
        4. Insert into post (choose right-align and full-size image)
      3. Paste the file location (url) into the Dynamic Content Gallery Image Url
      4. Choose the Date and Time
      5. Give the Post an Expiration Date (UNLESS it is recurring)
      6. Select the Category (Events)
      7. Publish or Update (save)

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