|
aiact
|
September 25, 2013 at 10:23 am
Hi Guys,
I have a problem with CSS working on the calendar.
The code updates work fine on Firefox, but not on any other browsers.
Also on the on IE the register now button isn’t showing up on the event popup window.
Here’s a link to the page.
http://aiact.org/workspace/7-calendar/
|
|
Sidney Harrell
|
September 25, 2013 at 12:18 pm
The other browsers may be caching the css file, so that when you make changes to it, they don’t download the new, changed copy, but use the old cached copy instead. Try opening it in a new incognito window.
|
|
aiact
|
September 25, 2013 at 1:01 pm
That didn’t have any effect. I’m adding the following style to the custom CSS style sheet in the theme. This codes cover the calendar, the pop-up description, and the categories.
/*………calendar styles……….*/
.fc-grid th {
color: #FFFFFF;
font-size: 14px;
font-weight: normal;
text-align: center;
text-transform: uppercase;
}
.fc-grid .fc-day-number {
background-color: #CCCCCC;
color: #333333;
float: right;
font-size: 14px;
padding: 0 1px 1px 2px;
text-align: center;
width: 96%;
}
.fc-border-separate th, .fc-border-separate td {
border-width: 0;
}
.fc-border-separate th.fc-last, .fc-border-separate td.fc-last {
border-right-width: 0;
}
/*………pop-up description window……….*/
.ui-widget-header {
color: #FFFFFF;
font-weight: normal;
text-transform: uppercase;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
border: 3px solid #DC2C1F;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
border-bottom-left-radius: 0;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
border-top-left-radius: 0;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: none repeat scroll 0 0 #DC2C1F;
border: 1px solid #FFFFFF;
color: #fff;
font-weight: normal;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
border-bottom-right-radius: 0;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
border-top-right-radius: 0;
}
.ui-widget-header {
background: none repeat scroll 0 0 #999999;
}
.ui-state-default .ui-icon {
background-image: url(“images/ui-icons_888888_256x240.png”);
}
|
|
Sidney Harrell
|
September 25, 2013 at 3:05 pm
Some of your rules like this one:
.ui-state-default .ui-icon {
background-image: url(“images/ui-icons_888888_256x240.png”);
}
have identical specificity as other rules that are loaded like this one from EE’s themeroller CSS (http://aiact.org/workspace/wp-content/plugins/event-espresso/templates/css/themeroller/smoothness/style.css line 95):
.ui-state-default .ui-icon {
background-image: url(images/ui-icons_888888_256x240.png);
}
If two rules have identical specificity, then it’s a crap shoot as to which one gets loaded last and will override the other one. To guarantee that your rule will win you should add a wrapper id or class to it to improve it’s specificity score (http://specificity.keegan.st/).
#espresso_calendar .ui-state-default .ui-icon {
background-image: url(“images/ui-icons_888888_256x240.png”);
}
|
