Overriding tribe-events-full-mobile.min.css

[Megan Sukys]

I have tried creating a file within my-theme/tribe-events/ called tribe-events-full-mobile.css (not .min, since I am not minifying) and it does nothing.

I also tried renaming the file to add .min to the name – still doesn’t do anything.

How can I add rules that override this stylesheet? Can I use an unminified file and where should it go?

[Cliff]

Hi Ryan. Thanks for your detailed question.

To clarify, is your ideal that our /wp-content/plugins/the-events-calendar/src/resources/css/tribe-events-full-mobile.min.css file never load on the page, or are you wanting help overriding a few things?

If the latter, please provide a link to your site and describe/screenshot what you’re wanting changed at that link.

[Megan Sukys]

Just override a few things. Here’s the CSS I currently have in /my-theme/tribe-events/tribe-events.css. I just prefer not to use “!important” when there is architecture in place to allow overriding, as there is with the above stylesheet. Is this not possible with the mobile stylesheet?

I also definitely do not want to modify the core plugin, so we are able to update in the future.

@media all and (max-width: 768px) {
#tribe-events-pg-template {
padding: 0 !important;
}

.tribe-events-list .tribe-events-event-image + div.tribe-events-content {
width: auto !important;
}

.tribe-events-loop .tribe-events-event-meta {
background-color: transparent !important;
border: none !important;
padding: 0 !important;
}

.tribe-events-list .tribe-events-venue-details {
padding-left: 0 !important;
}

.tribe-events-single ul.tribe-related-events li .tribe-related-event-info {
padding-top: 10px !important;
padding-left: 10px !important;
}
}

[Cliff]

If you’d like to provide an annotated screenshot and link to where that screenshot came from, I can probably help you find more CSS specificity for what you’re wanting.

[Megan Sukys]

Sure.
Link: http://gtcf.metricmedia.com/event/test-event/all/
Login: gtcf/staging

Note the changes have already been applied so the above URL represents the “after” state. The “before” state is in the screenshot attached, with markup as to what we’re trying to fix.

You can look at the CSS applied to the page above to see the !important rules added to override the styles from your mobile CSS file that we can’t seem to override.

[Cliff]

Okay, so you have already made the changes you wanted, right — so what else do I need to help with?

How/Where did you add these changes (CSS code)?

[Megan Sukys]

Maybe I need to explain to you how your software works (sigh).

To allow theming you instruct the user to create files within a tribe-events folder in the theme with the same name as your default files. Those files allow modifying the base styles without having to use the hack of !important to force an override.

This works where I made these changes (which, if you read my post above you will see are at /my-theme/tribe-events/tribe-events.css), but again, does not fit the model established since I must forcibly override the mobile stylesheet. Based on your theming guide I should be able to just create a mobile CSS file and have that override the default mobile CSS file. It is frankly half-assed to provide a whole process for theming the desktop version without extending that same functionality to overriding the mobile styles.

Can you please pass this task to someone more senior? I need to communicate with someone who understands all this.

[Cliff]

Ryan, I was asking how you accomplished the CSS tweaks you had already implemented. There are a variety of ways you could have done it, and I wasn’t certain from your previous replies how you implemented your custom CSS. Sometimes people think they’re doing one thing when they’re really doing another, and I was trying to confirm. Thank you for confirming.

Just as an FYI: the theme folder method that you’re using is documented at https://theeventscalendar.com/knowledgebase/themers-guide/#customizingstyles

The code that implements the custom stylesheet from your theme is from https://github.com/moderntribe/the-events-calendar/blob/4.2.4/src/Tribe/Asset/Events_Css.php#L45-L54

I didn’t see a mobile equivalent for it, but you could add media query selectors in your theme’s tribe-events.css file.

Here’s a video I made trying it out on my localhost testing site demonstrating the tribe-events.css theme override working as desired.

We’re limited in helping with styling customizations, per our Scope of Support / Terms. I was trying to better understand where you were and where you were wanting to get to — so I could possibly pass along a few styling tweaks (typically needing more CSS specificity) — but I’ll leave all of that to you, in line with our Terms.

Regarding the use of !important, that really shouldn’t ever be needed when customizing our plugin. You could leverage body classes or a variety of other selectors to make your CSS rules more specific to avoid using !important

To your question of loading a separate tribe-events-mobile.css theme override file, I think that’s a valid idea to bring up to the team. If you’d like, you can suggest that at our plugins’ UserVoice page.

This allows others who are interested in that feature to easily voice their support. We frequently review suggestions there to find out which ones are popular, then we implement as many of them as we can.

Once you post it, feel free to link to it from here in case anyone comes across this forum thread in the future.

I hope this reply is satisfactory, but if it’s not, please feel free to reply so I can further assist.

[Megan Sukys]

Hmm – well strangely now everything is working. I am able to add rules in a media query and they override the mobile stylesheet. This did not work for me previously. I realized one thing – that some of the rules (for related events) are in a separate stylesheet for the pro calendar, which has to be overridden separately. That may be part of what threw me off.

I appreciate you making the video, which made me realize that !important was not required, and I apologize for being snippy. Just frustrated that things were not doing what I was asking them to do.

Oh and by the way I’m not Ryan, I’m the developer working on the project for Ryan, who is our client and who purchased the plugins. Ryan is nicer than me. I’m nice sometimes though. Most of the time.

[Cliff]

I’m glad you got things working, whatever your name is 😉

[Author]

Posts