CSS to color tribe-events-button works on one page but not on another

[Cynthia Lockley]

I have CSS that colors the iCal button on the tribe_show_month view (see http://events.stcwdc.org/) but it doesn’t work for the +Google Calendar +iCal Import buttons on the event description page (see below the author box on http://events.stcwdc.org/event/stc-wdcb-summer-vision-day-meeting/) See snippit for the CSS at http://snippi.com/s/rc8ivm0
Why doesn’t it work on both pages?
Why is there only an iCal button on the first page?

[snorton]

This is due to specificity. Look at your body classes on either page and see that on the actual event description page you have tribe classes on the body. So, the way that ECP applies styles will override yours because it is more specific. You will want to rewrite your CSS to target the tribe-events-ical and tribe-events-gcal classes more specifically.

[Cynthia Lockley]

These are both uncustomized Events Calendar files and they both use class=”tribe-events-ical tribe-events-button” for the iCal button so I don’t understand why they aren’t both using the CSS style in themes/mytheme/tribe-events/tribe-events.css. The Tribe classes are supposed to be overridden by the tribe-events.css

[snorton]

I agree with you, the Tribe classes are supposed to be overridden, but the styles that are applied on the second are more specific than your code.

For your css, try below (adds .single-tribe_events class selector for your declaration. A higher level of specificity overrides more general selectors. You can add !important to your property value to see your style applied regardless of specificity, but it is often times bad practice to leave important in your css. So tribe-events.css WILL override the other tribe styles that have equal or lesser specificity):

/* ~~~~~~~~ Added color focus, visited, and hover actions to ical button ~~~~~~~~ */

a.tribe-events-ical, a.tribe-events-gcal, .single-tribe_events a.tribe-events-ical, .single-tribe_events a.tribe-events-gcal {
color: #fff;
background-color: #5f9ea0; // green
}

.tribe-events-calendar td.tribe-events-present div[id*=”tribe-events-daynum-“], .tribe-events-calendar td.tribe-events-present div[id*=”tribe-events-daynum-“] > a, #tribe_events_filters_wrapper input[type=”submit”], .tribe-events-button, .tribe-events-button.tribe-inactive, .tribe-events-button:hover, .tribe-events-button.tribe-active:hover, .single-tribe_events .tribe-events-calendar td.tribe-events-present div[id*=”tribe-events-daynum-“], .single-tribe_events .tribe-events-calendar td.tribe-events-present div[id*=”tribe-events-daynum-“] > a, #tribe_events_filters_wrapper input[type=”submit”], .single-tribe_events .tribe-events-button, .single-tribe_events .tribe-events-button.tribe-inactive, .single-tribe_events .tribe-events-button:hover, .single-tribe_events .tribe-events-button.tribe-active:hover {
color: #fff;
/* background-color: #21759b; // turquoise blue */
background-color: #005ea1; // blue
}

[Cynthia Lockley]

Thanks. That is better than what I was going to try to do. I’ll give it a whirl.

[snorton]

By the way, did you know there are two comment boxes on your event details page? I noticed that when I visited your link earlier. 🙂

[Cynthia Lockley]

It is mostly working. Gotta figure out why the green buttons on the event description page don’t have the white font color like the first page does.

[Cynthia Lockley]

Ooo–even more interesting. I clicked on the Google button by accident and got (I’m in the Firefox browser):

Google
414. That’s an error.
The requested URL /… is too large to process. That’s all we know.

I’ll start a new thread about that one!

[snorton]

Same principle here, regarding specificity and overrides. In your case with this, you’ve got a declaration under the comment on your stylesheet that says /* Tribe Theme Color */ which re-declares the link color

[Cynthia Lockley]

I tried adding .tribe-events-button to the a links for green that took out the green. I tried adding the buttons’ div class tribe-events-cal-links but that also took out the green.

[Cynthia Lockley]

Yes, I know I have two comment boxes. I have another thread for that and Neil is trying to figure it out. I noticed that someone else in a different thread also has two comment boxes. Perhaps others do also–they just don’t scroll down far enough.

[Cynthia Lockley]

Got the white font to work by moving the Tribe theme CSS above it.

[Cynthia Lockley]

This can be closed now. Very complicated CSS!

[Rob]

Major thanks for the assist here, snorton.

Cynthia: thanks for bearing with us. The complicated CSS has been an overwhelming bit of feedback we’ve received from the community since launching, and we’re looking at ways to rectify that now 🙂 Thanks for being vocal about it and stay tuned as we announce our findings on that end.

Closing this thread for now, but if anyone needs anything else, let me know.

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts