Multiple custom styling issues
-
When adjusting the stying of my TEC implementation, my styling choices are not reflected in multiple locations.
In month view, single view, and the editor, numerous text elements ignore my selected color, and display in black.
In single view, the date-time separator and time from-to separator setting is ignored for existing events, applied only to new events.
In editor view, my date formatting settings are mostly ignored: the month name is shown in my language, but the display is month day instead of day month.
WP 6.9.4, TEC up-to-date, Edge.
The page I need help with: [log in to see the link]
-
Hi @florismk
Thanks for reaching out — I’d be happy to help with this.
Upon checking your site, I can see that Jetpack Boost is active. In cases like this, when styling changes are not being applied, the issue is often related to caching or asset optimization.
Could you please try temporarily disabling the caching/optimization features in Jetpack Boost and then check if the issue persists? If possible, I’d also recommend clearing any existing cache after making that change to ensure you’re seeing the latest version of the page.
Let me know how it goes.
Hi Darian,
Thanks for your quick response.
I’ve tested your theory by disabling Boost in two ways: one, by deactivating the entire plugin; and two, by reactivating it and switching off all its modules. In both cases, the styling issue persists. So it appears that Boost is not the culprit.
I should mention that all styling changes I’ve configured are applied. The ‘only’ problem is that some elements of the TEC pages are skipped. If it’s helpful, I can provide screenshots of the problem.
Floris
Hi @florismk ,
Thank you for your message, and I’m sorry to hear of the continued difficulties.
If you could provide screenshots and the direct URLs of the pages in question here would be extremely helpful in us investigating the matter.
Okay, thanks!
The screenshots are here: https://www.dropbox.com/scl/fo/vnvatixdyupfgyja7r9h7/AKFi6FuokyK9iVMgxcBw9is?rlkey=rtso8hjvpkcoe5ayjcz0lf6xm&st=owoe6m5x&dl=0 (I don’t see a way to share images here on the forum).
And here are direct links to affected pages.
This is the affected Events page: Evenementen in maart 2026 – Het Thrillercomplot. If you page through the months, you’ll see that the ‘no events this months’ line also ignores the font color setting.
This is an affected Event page, created prior to the separator change, with the default separators: Boekstollende avond in ReadShop Eelde – Het Thrillercomplot. This one has the most elements with wrong styling.
This is an affected Event page, created after the separator change, with the new separators used: Test event this month – Het Thrillercomplot
PS: I’ve disabled the CSS-related Boost settings for now (or possibly permanently, as they don’t seem to make a difference to site performance :-D).
-
This reply was modified 1 week, 6 days ago by
Floris.
Hi @florismk ,
Thank you for your message and the information.
To be clear, were you making your changes on styling in the theme customizer (Appearance -> Customize -> The Events Calendar)? If yes, could you share your current settings on there?
Hi Tristan,
Yes, I did the styling customization in the Customizer. I’ve added screenshots of the four sets of settings to the shared folder. I should also mention that I selected the Standard template in Settings, not the Basic. (Tested it, doesn’t make a difference to my issues.)
While making the screenshots, I did discover that the Event Title setting is available both in Global and in Single Event, so I was able to fix the title coloring issue.
But I also found a new issue: the Featured Image of my October 10 event does not appear on the single event page (it does appear in the month view popup).
Thanks again for the continuing help!
Floris
Hi @florismk
Could you try adding a featured image to your test event and see if the issue can be recreated there as well?
If it still occurs, it looks like the problem may be related to your single event template not including the Featured Image on the single event page.
To help me investigate further, could you provide:
- The theme you’re using, including the version.
- When you open your October 10 event and click “Edit Site”, a screenshot of what you see.
Once I have these details, I’ll be able to check it more thoroughly on my end.
Hi Darian,
I’ve added a featured image to the Test Event, and saved a screenshot of the editor for that event to the shared folder.
Here’s the link to the Test Event for your convenience: Test event this month – Het Thrillercomplot. (I just noticed that the ‘This event is in the past’ notification has unfamiliar styling, I think there’s no styling in the Customizer for that particular element?)
The site is on theme Twenty Twenty-Three, version 1.6 (up-to-date).
Flroris
Hi @florismk
Could you try clicking on your template and checking if the featured image block is included? If not, please add it, save your changes, and see if that resolves the issue.
For reference, see this screenshot: Screenshot guide
As for the “This event is in the past” message, you’ll need to apply custom CSS styling for that. If you can share more details about what you’re trying to achieve, I’d be happy to take a look and provide a quick CSS solution.
Hi Darian, the Featured Image block is included in the template. The ‘this event is in the past’ message is a minor issue, which doesn’t currently need our attention.
My primary issue remains the styling of multiple text elements, which display in black. Until we resolve that, I can’t use the plugin, as essential bits of text are all but unreadable to my visitors.
Floris
Hi @florismk
To address the text color issue, could you add the following CSS to Appearance > Customize > Additional CSS, and see if it helps?
.tribe-common-c-svgicon:not(.tribe-events-c-view-selector__list-item-icon-svg) path{fill:#fff !important;}
.tribe-events button.tribe-events-c-top-bar__datepicker-button{
color: #fff !important;
}
.tribe-events .tribe-events-c-view-selector__list-item-text{
color: var(--tec-color-text-primary) !important;
}
.single-tribe_events .tribe-blocks-editor .tribe-events-schedule .tribe-events-schedule__datetime{
color: #fff !important;
}Hi Darian,
That’s wonderful, that bit of CSS fixes multiple text element colors. Not all of them though.
See Evenementen in april 2026 – Het Thrillercomplot: The ‘no events this month’ notification.
And Boekstollende avond in ReadShop Eelde – Het Thrillercomplot: the access price, location below the access price, address in the location box.
The colors in the month view and the event popup there are now in order (except the ‘no events’ message as mentioned above).
PS: The issue also affects List view, which I hadn’t previously looked at. Location, description, price all use the wrong font color: Evenementen van 25 maart – 10 oktober – Het Thrillercomplot.
I’m guessing you guys will update the plugin at some point to take these elements into account for the styling?
Hi @florismk
Thanks for your response.
Please try the following CSS and see if it helps:
.tribe-events .tribe-events-header__messages{
background: #fff !important;
}
.tribe-block__event-price .tribe-block__event-price__cost, .tribe-block__event-price .tribe-block__event-price__description,
.tribe-block__organizer__details h3,
.tribe-block__venue .tribe-block__venue__meta .tribe-block__venue__address, .tribe-block__venue .tribe-block__venue__meta .tribe-block__venue__phone, .tribe-block__venue .tribe-block__venue__meta .tribe-block__venue__website,
.tribe-events-calendar-list__month-separator .tribe-events-calendar-list__month-separator-text,
.tribe-events-calendar-list__event-date-tag-daynum,
.tribe-events-calendar-list__event-venue,
.tribe-events-calendar-list__event-description,
.tribe-events-c-small-cta{
color: #fff !important;
}That did the trick! Will there be a plugin update that includes these elements in the styling changes by default?
Also, it would be great if the featured image would also display on the single event page.
-
This reply was modified 1 week, 6 days ago by
You must be logged in to reply to this topic.