CSS Issues

[cybersprout]

Hello! I’m having a few issues with styling the events calendar. Here are the pages and elements:

I’m attempting to remove all background colors and switch all text to white. For some reason, it is correct for the last item on the list but none of the other.
URL: http://explorealex.com/events/2015-07-04/
.tribe-events-day-time-slot {color:#333333 !important;background:none !important;}
a.tribe-events-divider {color:white !important;background:none !important;}
a.tribe-events-venue-details {color:white !important;background:none !important;}
h2.tribe-events-list-event-title.summary {color:white !important;background:none !important;} /*problematic for font color*/

I only need to switch the “view more” link to white here.
URL: http://explorealex.com/events/
.tribe-events-viewmore {color: white !important;background:none;} /*problematic for font color*/

As a side note, I did flush the cache multiple times to make sure changes would be reflected.

Thanks for any help!

[Brian]

Hi,

Sorry for the issues you are having.

I tried to find the source of the css, but there is so many !important declarations that I do not know which is overwriting which.

Not sure where that white semi transparent background is coming from as it does not show up in the developer console.

I can try to take another look if you cannot get it.

Let me know.

Cheers

[cybersprout]

Thanks for the reply, Brian! Following your lead, I removed as many of the !important declarations as possible to simply the style sheet. Here are the elements I’m still struggling with:

Background http://explorealex.com/events/today/ (change background to ‘none’)
dd.author.fn.org (On list/day view – change text to white)
.recurringinfo (On list/day view – change text to white)
.tribe-events-viewmore (On month view – change text to white)

Thanks again for any help!

[Brian]

Hi,

I took another look and this might help get you closer:

#tribe-events-content h2.tribe-events-list-event-title.summary,
.tribe-events-day #tribe-events-content .tribe-events-day-time-slot h5 {
background: none;
}


It removed many of the backgrounds from that page. I am limited in providing much more then this unfortunately.

Cheers

[cybersprout]

That helped tremendously! The only other one that is critical element for me is to fix is the “View all 5 events” text in the month view: http://explorealex.com/events/month/

Right now this is my styling but the font color isn’t changing.

.tribe-events-viewmore {color: white !important;background:none;}

Thanks again!

[Brian]

Great glad it is moving forward.

For that one you want to target the link and not the div around it.

So this should work:


.tribe-events-month .tribe-events-calendar td .tribe-events-viewmore a {
color: #fff;
}

Cheers

[cybersprout]

Success! Love you guys!

[Brian]

Great glad it helps.

I am going to close this ticket, but if you need anything else related to this topic or another please post a new topic on the forum and we can help you out.

Thanks

[Author]

Posts