How to amend the CSS

[abi]

Hi there,

I’m specifically looking to carry out the below, do I need to do this in the CSS, if so how do I access changing the CSS?

This is for this page: http://434.abd.myftpupload.com/events/

– Move the date selection button and change the styling. (events from date button, with the calendar selection)
– Remove the Title (Upcoming Events)
– Change the Styling of the Month header – “November 2017”
– Change Colour of “Recurring Events (see all)” it’s currently in black against a black background so you can’t see it.
– Hide or remove the “+Export Events” Button.

For a single event page: http://434.abd.myftpupload.com/event/all-you-can-eat-events/2017-11-20/

– Move it down and centre it. At the moment you can’t see the title of the event as it goes behind my top nav menu.
– Hide or remove the “+Google Calendar” and ” +ICAL Export” buttons
– Change the background colour and styling of how the detail of the event displays.

[Geoff B.]

Good evening Abi and welcome to the Events Calendar Support forum!

Thank you for reaching out to us.
I would love to help you with this topic.

do I need to do this in the CSS, if so how do I access changing the CSS?

For the most part the answer is yes. CSS should handle most of your needs.

In order to gain full power on your site’s look and feel, I would highly recommend reading the following articles:

• https://theeventscalendar.com/knowledgebase/wordpress-customizer/
• https://theeventscalendar.com/knowledgebase/using-google-chrome-developer-tools/
• https://theeventscalendar.com/knowledgebase/changing-fonts-and-colours/
• https://theeventscalendar.com/knowledgebase/styling-events-widgets/

With that in mind, another approach is to customize the different views to your liking by editing their files. You might want to read our Themer’s guide to get a sense of how that works.

– Move the date selection button and change the styling. (events from date button, with the calendar selection)

Using the tutorial on developper tools, look for the following CSS class and investigate all of its sub-elements with the inspector: tribe-bar-disabled

– Remove the Title (Upcoming Events)

Add a display:none rule on .tribe-events-list h2.tribe-events-page-title

– Change the Styling of the Month header – “November 2017”

Investigate the tribe-events-list-separator-month class and all its sub-elements.

– Change Colour of “Recurring Events (see all)” it’s currently in black against a black background so you can’t see it.

Perhaps you could try the Customizer tutorial to help with that.

The following CSS class controls it .event-is-recurring

– Hide or remove the “+Export Events” Button.

Add a display:none rule on .tribe-events-ical

– Move it down and centre it. At the moment you can’t see the title of the event as it goes behind my top nav menu.

This might actually benefit for trying out different settings for Events Template under Events -> Settings -> Display.

If not this one will likely require several rules to work in a responsive (mobile-friendly) way.
The element to play with is #tribe-events-pg-template, .tribe-events-pg-template

– Hide or remove the “+Google Calendar” and ” +ICAL Export” buttons

Add a display:none rule on .tribe-events-gcal

– Change the background colour and styling of how the detail of the event displays.

The customizer or different settings for the stylesheet under Events -> Settings -> Display might help.

Let me know how that goes.

Best regards,
Geoff B.

[abi]

Thanks very much Geoff, I shall look through the tutorials and things you’ve outlined.

How do I get to the CSS of the event calendar specifically?

Also, I can see that you can include html before or event the event calendar however it seems to add this before the calendar and each single event, is it possible for this to just display on the event calendar and not single events?

Thanks again

Abi

[Geoff B.]

Good evening Abi,

Thank you for taking the time to write back.

How do I get to the CSS of the event calendar specifically?

That is a great question. The most important tool for this is the Inspector tool (https://theeventscalendar.com/knowledgebase/using-google-chrome-developer-tools/)

Simply put, you click around the page with that tool and examine the CSS rules around that element (both the element itself and perhaps it’s direct parents and children.

Typically most the Events Calendar CSS will have terms such as tribe or events in them.
A good example of that is the list I provided you with in my previous answer.

Also, I can see that you can include html before or event the event calendar however it seems to add this before the calendar and each single event, is it possible for this to just display on the event calendar and not single events?

Absolutely.

Try adding the following CSS rule to your style.css file or in your Custom CSS metabox:

.single-tribe_events .tribe-events-before-html, .events-single .tribe-events-before-html {display: none !important}

Let me know how that goes.

Best regards,
Geoff B.

[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