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

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

Wordpress Plugin The Events Calendar - Changing Colors / CSS

WordPress Plugin The Events Calendar – Changing Colors / CSS

In Dashboard, click on “Plugins” and the sub-menu “Editor” In the upper-right corner, use the drop-down menu to choose “The Events Calendar” Then, on the right, in the list of files, look for: the-events-calendar/resources/events.css

Or, you can consider putting any of these classes below into Atahualpa’s HTML/CSS Inserts here: Appearance/Atahualpa Theme Options/Various Content Items – Add HTML/CSS Inserts

THE EVENTS CALENDAR PLUGIN – CALENDAR VIEWEvents Calendar Tutorial WordPress Plugin

Future Date Number Color
.tribe-events-calendar .daynum, .tribe-events-calendar .daynum a { background-color:#transparent; color:#fff; font-size:11px; font-weight:bold; }
 Date Number Background .tribe-events-calendar .daynum, .tribe-events-calendar .daynum a {  background-color:#F5F5F5; color:#333; font-size:11px; font-weight:bold; }
Future Dates Number Color .tribe-events-calendar .daynum, .tribe-events-calendar .daynum a { background-color:#F5F4B8;  color:#333; font-size:11px; font-weight:bold; }
Days Background Color .tribe-events-calendar th { width: 250px; height: 10px; background-color:#ddd; color: #333; padding:4px 0; text-align:center; text-transform:uppercase; letter-spacing:1px; }
 Current Day Background .tribe-events-calendar .daynum, .tribe-events-calendar .daynum a { background-color:#F5F4B8; color:#666; font-size:11px; font-weight:bold; }

THE EVENTS CALENDAR PLUGIN – EVENT LIST VIEW

The Events Calendar Plugin Change Color
Event Button OFF / Calendar Button OFF .tribe-events-calendar-buttons a.tribe-events-button-off {     background:#ddd;     color:#444; }
Event Button ON / Calendar Button ON   .tribe-events-calendar-buttons a.tribe-events-button-on {    background:#666; }
Event Title Link and Event Details Titles (Start, End, etc. on right) .events-archive .entry-title a, .tribe-events-event-meta-desc, .tribe-events-event-day { color:#333; }
Event Details .tribe-events-event-list-meta td { vertical-align:top; padding: 0 0 4px 0 !important; text-align:left; border: 0 !important;  background-color: white; }

Dynamic Content Gallery Configuration

Settings for adding the Dynamic Content Gallery to your homepage within WordPress using the Atahualpa theme.

Before you start, Add a Category of “Photos”

Click on Posts in your Dashboard, then Categories.  Under Add New Category / , type Photos and the same for the “slug” but in lowercase.  Then Save

Now you must make at least one post to this category for the category to show up in the Gallery Method Tab.

Go to Settings/Dynamic Content Gallery then use the tabs:

Javascript Options Tab:

Select Javascript framework (OPTIONAL):

          Use jQuery script. Select this option in the event of javascript conflicts with other plugins.

I have found that there is always a conflict with one of my photo plugins so I always do this first!

UN-CHECK This Option:

Show Carousel:
Check the box to display thumbnail Carousel. Default is CHECKED.

The above is a little title in the upper portion of the photo slideshow that is just a little ugly and unneeded.

Save Changes

Image Management Tab:

Check the Radio Button for

DCG Metabox requires the Image URL in this format: http://www.yourdomain.com/folder/anotherfolder/myimage.jpg
Select this option if you want complete freedom to reference images anywhere in your site and in multiple locations.

Check the Radio Button for:

Complete freedom to select up to 9 images from a mix of categories. Set up the relevant options in MULTI OPTION Settings

 Save Changes

 Descriptions Tab:

The default of “manual” is fine here.  No changes needed.

Gallery CSS Tab:

Gallery size and CSS options (jQuery):

Depending on the size of your original photos, you may need to resize your photos to a smaller size.  The options listed here are vast and require a little knowledge of html or CSS.

Other Tabs:

The other tabs can be left in default states.

Dynamic Content Gallery - Where to put your plugin code in Atahualpa

While Dynamic Content Gallery is a beautiful and functional addition to your website, it requires more than just activating a plugin.  If you are using Atahualpa, you need to place code into the index.php file found under “Appearance”, “Editor” and looking on the right hand side while in the editor, find “Main Index Template” that will have a subtitle “index.php”.  Here is how you can add Dynamic Content Gallery to your Home (Front) Page.  This works when you have told WordPress to use a “Static Page” as your “Front Page” under “Settings” and “Reading”.

Here is the first part of my “Main Index Template/index.php” (Dynamic Content Gallery Code in Bold):

<?php
list($bfa_ata, $cols, $left_col, $left_col2, $right_col, $right_col2, $bfa_ata[‘h_blogtitle’], $bfa_ata[‘h_posttitle’]) = bfa_get_options();
get_header();
extract($bfa_ata);
?>

<?php /* If there are any posts: */
if (have_posts()) : $bfa_ata[‘postcount’] = 0; /* Postcount needed for option “XX first posts full posts, rest excerpts” */ ?>

<?php if( is_front_page() ) {
dynamic_content_gallery();
} ?>

<?php // Deactivated since 3.6.5
# include ‘bfa://content_above_loop';
// Uses the following static code instead: ?>
<?php bfa_next_previous_page_links(‘Top’); // For MULTI post pages if activated at ATO -> Next/Previous Navigation:  ?>

Dynamic Content Gallery and Atahualpa

I just got the Dynamic Content Gallery Plugin to work with Atahualpa373. I had a conflict with the Lightbox Plugin and before the plugin was disabled, only a black box and “loading” image appeared. I used the php code for the gallery in Atahualpa’s index.php file and copied it directly after this code…

if (have_posts()) : $bfa_ata[‘postcount’] = 0; /* Postcount needed for option “XX first posts full posts, rest excerpts” */ ?>

Leave “Show Carousel” unchecked to leave the upper right-hand Title of the images out of the rotating images.

It is the best photo scrolling plugin I’ve seen for showing ONLY up to 9 photos. It can be resized to span your full website body and included on the homepage (this is where I have experimented) to act as a flash”y”, professional design. Enjoy!

Show background on all pages with Atahualpa theme

If you have uploaded a background to your website, you must use the whole URL address.

Appearance

Atahualpa Theme Options

Overall Style & Config.

Body, Text and Links

In the Body Style window, add your url and background color (good for slower loading computers to see a color before pic loads)

background: #CC6601 url(‘http://www.yoursitename.com/wp-content/themes/atahualpa3.?.?/images/background.jpg’) repeat-x top left;

(enter your current version of atahualpa above …/atahualpa?.?.?/images…)
SAVE