Event List View – Column widths

[Greg]

Hi there, small modification question hope you can help.

Where do I find the CSS selectors that adjust the width of the columns in list view please? I can’t seem to find them in any of the container divs/classes

Our list view example is here

http://cpmr-intermed.org/events/

and attached (for info) is what we are hoping to acheive.

Thanks very much.

Greg

[Trisha]

Hi, Greg!

Thank you for using The Events Calendar. I can help with this!

The styles that will give you the column widths you’re looking for are:

.updated.published.time-details { width: 7%; }
.fusion-tribe-events-headline { width: 63%; }
.tribe-events-venue-details { width: 10%; }

This should do the trick! Let me know how it goes!

Cheers,
Trisha

[Greg]

Thanks Trisha, I will check it out.

with this in mind, is there a central CSS file I can apply these styles to?

At present, we’re doing all Event calendar styling within the Theme’s custom CSS section, in the WP admin.

Whilst this works absolutely fine, it’s a multisite 7 site install with some sites in 4 different languages. This means we have to add the CSS classes 13 times across the different sites & languages to get a uniform appearance.

If there’s 1 central Event Calendar CSS file we can use (or create, in the required folder, maybe inside the child theme?) that will apply to all, that would be really helpful.

Thanks very much,

Greg

[Trisha]

Hi, Greg!

I’m glad to see this has worked for you so for.

I totally see your point in this situation! There is absolutely a way to do what you’re asking.

The best way to do this is to copy the stylesheet that you’re using into your child theme.

Make a note of which stylesheet you’re using, you can check this by going to ‘Events > Settings > Display’ in the WordPress admin. See the screenshot below for an example.

The stylesheets are located at ‘the-events-calendar/src/resources/css/‘

From there follow the specific instructions in the Themer’s Guide. Scroll down to the section entitled ‘Customizing Styles’.  You can find the Themer’s Guide here: https://theeventscalendar.com/knowledgebase/themers-guide/

There are also instructions at the very top of the file you’re moving.

Does this help answer your question? Let me know if you need any clarification or have any questions, I’m happy to help 🙂

Cheers,
Trisha

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts