Add Padding to Top of Page

[Erin Muck]

Dear Support,

I just installed the Event Cal Pro on a new website I’m developing.

It uses the Divi theme and has a left side nav.

I notice that the top of the calendar is right up against the top of the browser. Is there a way I can add padding so there is more room?

Also, I would like to change some of the font colors, because they are hard to read. Do you have suggestions on how I might best do that?

Thank you, Erin

[Erin Muck]

This reply is private.

[Patricia]

Hey Erin,

Thank you for reaching out to us! You can change the padding of your calendar by adding the following code in your theme’s style.css file:

#tribe-events-content {
    padding-top: 50px !important;
}

You can change the font color for your event titles by adding this code to your theme’s style.css file (in this example the font color was changed to blue):

h3.tribe-events-month-event-title a {
    color: blue !important;
}

I hope this helps! Let me know if you need anything else and I’ll be happy to assist! 🙂

Regards,

Patricia

[Erin Muck]

Thank you Patricia!

It looks so much better.

Can you also please advise me on how to also push down the EVENTS IN DATE element, that is currently in the upper right corner?

And I think the numbers on the calendar should be dark instead of white. It’s just super hard to read them.

Lastly, there is a bar at the top with the days of the week. May I please learn how to make that darker?

Thank you again, Erin

ruby slipper designs | erin o’kelley muck | website designer | 541.944.4044 | http://www.rubyslipper.com

[Patricia]

Hi Erin,

Regarding the calendar numbers, you can change their color by adding the following code to your style.css file:

.tribe-events-calendar div[id*=tribe-events-daynum-], .tribe-events-calendar div[id*=tribe-events-daynum-] a {
    color: black !important;
}

You can change the background color of the days of the week with this code:

.tribe-events-calendar thead th, .tribe-events-grid .tribe-grid-header .tribe-grid-content-wrap .column, .tribe-grid-header {
    background-color: black !important;
}

I hope this helps! Let me know if you need anything else and I’ll be happy to assist! 🙂

Regards,

Patricia

[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