How to change the accent colors

Not stupid question!

You can insert css via your theme. In your theme settings, see if it has an insert code/css section.

To add custom CSS in YOOtheme Pro open the Customizer navigate to Settings > Custom Code and insert your CSS into the field “CSS/LESS”.

I am not sure what LESS is… shouldnt need that i guess.

Nice website!

https://yootheme.com/support/question/130045

These are all my css color corrections, and im still missing a couple. You can try this in your css, and change the color to yours after (so you can verify its working, i am using orange)

/* ----------- THE EVENTS CALENDAR -------------  */

/* Fix padding */

.tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container,
.tribe-events .tribe-events-l-container,
.content-area bb-grid-cell {
    padding-top: 0px;
    padding-bottom: 0px;
} 

/* Fix color */

.tribe-common a {
    color: #ff5e3a;
    outline: 0;
    text-decoration: none;
} 

.tribe-common .tribe-common-c-btn, .tribe-common a.tribe-common-c-btn {
    background-color: #ff5e3a;
}

.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date {
    color: #ff5e3a;
}

.tribe-common a, .tribe-common a:active, .tribe-common a:focus, .tribe-common a:hover, 
.tribe-common a:visited {
    color: #ff5e3a;
}

.tribe-events .tribe-events-c-ical__link:active, .tribe-events .tribe-events-c-ical__link:focus,
.tribe-events .tribe-events-c-ical__link:hover {
    color: #fff;
    background-color: #ff5e3a;
}

.tribe-events .tribe-events-c-ical__link {
    color: #ff5e3a;
    border: 1px solid #ff5e3a;
    margin-bottom: 16px;
}

.tribe-events .tribe-events-c-ical__link:before {
    display: none;
}

.tribe-events .datepicker .day.active, .tribe-events .datepicker .day.active.focused, 
.tribe-events .datepicker .day.active:focus, .tribe-events .datepicker .day.active:hover, 
.tribe-events .datepicker .month.active, .tribe-events .datepicker .month.active.focused, 
.tribe-events .datepicker .month.active:focus, .tribe-events .datepicker .month.active:hover, 
.tribe-events .datepicker .year.active, .tribe-events .datepicker .year.active.focused, 
.tribe-events .datepicker .year.active:focus, 
.tribe-events .datepicker .year.active:hover {
    background: #ff5e3a;
}

.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date {
    color: #fff;
    background: #ff5e3a;
}

Thank you so much @andyux for your nice and helpful answer! That really made my day!
Everything works super fine with your CSS.

The only thing that I realized today is that if I don’t have any events in a month, there’s a hint that says something like “no events found”. Do you think this text is changeable, too? I find, it would be clearer to tell the people “no events found in this month“, because otherwise, they may think I don’t offer any courses.

If that’s too circuitous, I can totally understand it. I don’t want to exploit you or hold you back.

Anyway, thank you so much for your help and the lovely compliment for my website!

• This reply was modified 4 years, 7 months ago by sophiemaidhof.

Glad to help, I was doing the exact same thing at the same time!
SO to change the text in the alert you would have to modify some of the calendar core files, its not hard, but you would have to google it, and update the file using ftp. Always keep a copy! Also when the theme updates, you would have to do it again if that file gets replaced.
Another option is to hide it, we can do that using css, and it will continue to work through updates. I just tried it, so that you for bringing that up. If you want to go that way, add this to your theme css

/* remove alert */

.tribe-events .tribe-events-header__messages {
    display: none;
}

.tribe-events .tribe-events-header {
    background-color: #FAFBFD;
}

When you have some down time, learn some css, thats what i had to do and i been doing this for a looong time, its really worth knowing. Keep asking if you need help, always learning!

btw this is to remove the white box, spacing look weird, so i made it the same color as the grey background

background-color: #FAFBFD;

Hi there!

Thanks you for your message!
We ran some tests and found an issue while you’re trying to change colors via WordPress Customiser using the new views.

Once this fix has been released we will contact you back to confirm that you’re able to use WP Customiser with Events Calendar.

In this meantime we can help you to write a CSS Snippet capable of change the colors that you want. Please let us know what you want to change and what color you’d like to apply.

So sorry for any inconvenience that this may be caused

Be safe!

Hi Deblyn, thanks. I cant figure out some of the colors (blue) in the month view for mobile. Todays date, and the blue dot where days there are events for:
https://share.getcloudapp.com/eDuxm4YE
Also, the 3 dots progress bar when switching views.
Thanks a lot

@andyux thank you so much again! You really helped me a lot.
And you’re totally right – it’s more than useful to learn some CSS and HTML, as well. As we didn’t have enough time for it in college, my knowledge is close to zero. Anyway, I’m so interested in the whole topic.
I’ll have some extra classes, for sure. Do you have a good tip for literature or websites that are helpful for beginners? I’m pretty overwhelmed by all the offers that I’ve found.
Thanks a lot again, also to you @deblynprado !

Hi,

We just wanted to let you know that a fix has been released for this issue!

Please try updating and let us know if you are experiencing any further issues. As always, we recommend running updates on your?staging site?before doing so on your live site, just to be on the safe side.

Thanks again for your patience while we worked on getting this fixed!

Hi @jaimemarchwinski ,
I am on Events Calendar release 5.1.2 and I still seem to be experiencing the problem. It appears that the accent color change is registered, but then the default css trumps it. Is anyone else still experiencing this problem on 5.1.2?

Hi @theduffmaster

I’m sorry to hear that you are still experiencing this issue!

I just tested out this functionality with version 5.1.2 and it appears to be working as expected.

Are you using thee legacy views or the updated calendar views under Events Settings > Display?

As a first step, can you try a quick test and see if the functionality works as expected with a bare WordPress install? A bare install is basically a default WordPress theme like Twenty Twenty and no other plugins besides ours installed. You may want to consider trying this out on a staging site so that you don’t have to switch things around on your live site.

Let me know if that helps!

Thanks,
Jaime

Hi @jaimemarchwinski,
Thank you for the reply and sorry for the late reply. You were right, on a bare install it worked so it’s probably a plugin problem.

The one thing I noticed is that it seems to work in the customizer (the accent color is the color I want it), but not on the live site. I think it has something to do with css optimizations made by jetpack or another plugin.

Also, it won’t let me press the checkbox for “updated calendar views.” All the other checkboxes in the Display tab work except that one. Is that normal?

Thank you so much for the help!

Hi @theduffmaster

Thanks for your response! It does sound like a plugin conflict, so I’d recommend enabling one plugin at a time to find the culprit. Maybe it’s a plugin you can live without or find a replacement for?

Does the inability to update calendar views also occur with a bare install? If so, you can also try backing up your site, and then deleting The Events Calendar, and download a fresh copy.

Let me know how it all goes!

Thanks,
Jaime

Hi @jaimemarchwinski,
Sorry for the late response, I have been away from my computer for a good bit of time.

So the ability to update calendar views seemed to have solved itself, but even after deactivating every plugin the event calendar still has the same problem. Even when the css isn’t minimized it still seems to be a problem. I doubt it is my own custom css, since I made very few custom changes to the events calendar via css.

Still, the same problem: https://i.imgur.com/NFsh4nl.png

Would you be willing to provide me some place I could send you a link to the site I’m working on? I understand if that is not an option, I just can’t post it publicly since my employer has strict language in the contract I signed not to do so.
Thank you again.