Custom style in tribe-events\pro\tribe-events-pro.css has no effect

[Gerald]

Hi,
I´m an absolutely new EPC user who tries his first customizing adjustments – without success, so I´m here. 🙂

The first thing I would like to change is the background color of the current day in the month view. The current color is #21759B.

We use Tribe Style.
I created the following files and folder in our child-theme (folder wp-content\themes\feg-hd).
1) tribe-events\tribe-events.css
2) tribe-events\pro\tribe-events-pro.css

As we use the pro version I was not sure whether I should create number 1 but I did to be safe.

In both css files I copied the first three paragraphs from file:
wp-content\plugins\events-calendar-pro\resources\tribe-events-pro-theme.css
(Here I was also not sure which css file to choose.)

Than I changed the background-color in both custom css files.
This has no effect. What do I need to change?

/* Tribe Theme Color */
.tribe-events-grid .hentry.vevent a {
color: #0a9690;
}

.tribe-events-grid .tribe-grid-header .tribe-week-today {
background-color: #0a9690;
}

.tribe-grid-allday .hentry.vevent > div,
.tribe-grid-body div[id*=”tribe-events-event-“] .hentry.vevent,
.tribe-grid-allday .hentry.vevent > div:hover,
.tribe-grid-body div[id*=”tribe-events-event-“] .hentry.vevent:hover {
background-color: #0a9690;

Thanks & best regards,
Gerry

[Barry]

Hi Gerry,

We’d be happy to help but it would be easiest to view the problem in the context of your own site (as that way we can see if any CSS rules from your theme are impacting) – unfortunately the URL you shared seems not to work for me.

Can you clarify which URL I should use to access your calendar’s month view?

Thanks!

[Gerald]

This reply is private.

[Barry]

Thanks!

Your custom tribe-events-pro.css is indeed being loaded – it’s just that the rules aren’t specific enough. Can you try something like this:

table.tribe-events-calendar td.tribe-events-present { background: #0a9690 }

[Rob]

Thoughts on Barry’s last comment, Gerald? Been a few days since we heard from you.

[Gerald]

Hi Barry and Rob,
Thanks for your hint a asking again!
Indeed, I implemented your suggestion but without success. I also added another line but also withou success.
There two added lines are:
table.tribe-events-calendar td.tribe-events-present { background: #0a9690 }

.tribe-events-thismonth tribe-events-present { background: #0a9690 }

Btw, I removed the file tribe-events\tribe-events.css as I think it makes no sense to have the same coding twice. Could you confirm that my understanding is correct that the custom file tribe-events\pro\tribe-events-pro.css is enough (when using the PRO version)?

Best regards,
Gerry

[Barry]

Hi Gerry,

Yes that should be sufficient – the problem is you’ve got a syntax error in there. Before the two lines you just added you have a different rule targeting:

.tribe-grid-body div[id*=”tribe-events-event-“] .hentry.vevent:hover

Note that although you’ve (correctly) got an opening { brace you don’t have a closing } brace – and that is stopping that last two rules from being interpreted. In other words, this:

.tribe-grid-body div[id*="tribe-events-event-"] .hentry.vevent:hover {
background-color: #0a9690;

Needs to become this:

.tribe-grid-body div[id*="tribe-events-event-"] .hentry.vevent:hover {
background-color: #0a9690;
}

Does that help here?

[Gerald]

Ups, so simple. Yes, this hint helped.
Thank you!

[Rob]

Excellent to hear that got you where you needed to be! Thanks for confirming, Gerald. Going to close this one out for now…but if we can do anything else to help you out down the road, just let us know. We really appreciate your support so far 🙂

[shreinmedia]

I’m having similar issues. I read through this chat, but was hoping someone could let me know if there is something I’m easliy missing.

http://www.artesiachurch.org/events/month/

I am using ECP and have placed the CSS file in mychildtheme/tribe-events/pro/tribe-events-pro.css

The styles that I have in that css file, I applied in my wordpress css editor section and it applied the styles correctly. When I move them to this stylesheet, nothing.

Please advise. Thanks.

[pylon]

The following will style the present/current day cell background, header and hover for month view:

[code]
/* Colour the current day cell in onto view */
table.tribe-events-calendar td.tribe-events-present { background: #f8faef !important; }
table.tribe-events-calendar td.tribe-events-present:hover { background: #e6edc6 !important; }
table.tribe-events-calendar td.tribe-events-present * { background: #0098A3 !important }
[/code]

[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