changing the colors in Events Pro calendar widget and the font in calendar view

Home Forums Calendar Products Events Calendar PRO changing the colors in Events Pro calendar widget and the font in calendar view

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #111390
    Patricia Swartz
    Participant

    Hi there, wonderful calendar — I recently purchased the pro version for a site I’m designing. I need to change the colors of the widget to match the yellow-orange on the rest of my site (#FFCB59). I want that color to replace the dark grey color of the mini calendar widget on my sidebar (so the background color for the month + days of the week at the top, the highlighted current day, and highlighted upcoming event days). In addition, I want to change the dark grey to this orange color in the upcoming events listed below it (the mini calendar date page to the left of a listing). Nothing I’ve tried so far has worked, hoping you can point me in the right direction? I’ll also want to change the medium grey color (for days with no events listed) to a lighter orange, something like #ffe4ab.

    I’ll also need to change the colors for the main calendar page (changing the default blue color to a purple, for example). And there is an odd font at the top of this calendar page used for the search fields and “FIND EVENTS” button. Is there an easy way for me to change it to match the rest of my site?

    Sorry to put so many questions out there at once… hopefully this isn’t going against some sort of forum rule — this is my first time posting here. I appreciate your help!

    #111779
    Brook
    Participant

    Howdy jek678,

    Welcome to the forums! No worries, all of your questions seem quite related so it makes sense to keep them in one topic.

    Are you familiar with using your browser’s inspector tool to find which css rule is applied to what element? Since Chrome is probably the most popular browser among developers. There is a pretty good video on YouTube walking you through the basics of using this tool, just in case you do not already know how it works.

    Using dev tools is probably the easiest way to figure out how to style an element. I’ll walk you through how to style the background color of the calendar empty date columns:

    1) Right click on one of the gray columns, click inspect.

    2) Click on the parent <td> node in the Elements pane. In the styles pane you will note all of the CSS styles and rules that apply to this element. You should notice .tribe-mini-calendar td{} in the Styles pane on the right hand side. In side of that CSS Rule you will see the background and border color.

    3) The easiest way to restyle that is to copy that CSS rule to your theme’s custom css file.  I like to precede the rule with the body tag in my custom css file, thus making it more specific and overriding the default. So I would change ‘.tribe-mini-calendar td’ to ‘body .tribe-mini-calendar td’. Now you can make changes to colors, sizes, etc.

    If the above makes no sense, or sounds like Greek to you, that’s cool too. Sadly though, in order to make modifications like the one you want you need to understand CSS rules and how to override them pretty well. If that does not describe you, have no fear. We actually keep a list of freelancers who are quite capable of making changes on your behalf. You can obtain this list by emailing [email protected] and requesting it.

    Does that make sense? Do you have any other questions? Please let me know. Cheers!

    – Brook

    #112399
    Patricia Swartz
    Participant

    Brook,
    Thank you sooo much for your kind and detailed response! I’m self-taught so I often get tripped up and sometimes jut googling it doesn’t help. I primarily use Chrome but have found I prefer Firebug while using Firefox to inspect these elements and preview changes. I think what I was missing was adding “body” before these CSS rules when changing it in my custom CSS file, and so far it seems to have worked. So thank you!!! I still can’t seem to find how to change the color for when you hover on an event (it looks grey), and when you click on an event (it turns blue). Do you know what those tags are?

    I also noticed that while it looks great in Chrome and Safari, it looks slightly different in Firefox – the past events in the mini calendar, which were pre-set at that .35 opacity, have an extra bit of border on the bottom and right side of each date box. Is there an easy way for me to fix this? If not it’s ok, probably not a big enough deal, just thought I’d ask.

    #112420
    Brook
    Participant

    Sometimes it can be a bit tricky to find out what is causing the border for an element. Sometimes it is not even a border, but an outline or a background of an element behind it. Usually though it is a border, and it is from an element that is either contained within, or contains the one you are inspecting. You basically just have to play around in order to find. Eventually everyone gets very skilled at diagnosing these oddities, so if you’re not there yet you will be soon.

    Hover CSS is specified be the :hover psuedo selector. I like Firebug too, but this is one area where Chrome might be better (at least it was since the last time I user Firebug). Chrome lets you set an element state, like :hover, and thus inspect what css is applied when hovering. Maybe Firebug lets you do that as well now?

    I am really happy that the post helped. There is only so much we can assist you with when it comes to CSS modification, especially when you have lots of changes. Our scope of support dives into a bit more detail here, but when it comes to modifications like these we tend to offer a general overview of advice, and it is up to you to apply that to your specific site. I hope that makes sense. And, I am very glad to further assist you to the extent outlined in out support agreement. Cheers!

    – Brook

    #112440
    Patricia Swartz
    Participant

    Thanks very much Brook. I do like that element state feature in Chrome! But even when using that I can’t seem to find the right line of code to change for the hover and selected state. I understand you can’t help me with specific changes like this… so I’ll try emailing for the list of freelancers, and hopefully I can afford someone to help with these small changes that have stumped me!

    Best,
    Jane

    #112554
    Brook
    Participant

    You are very welcome, Jane. I appreciate your understanding in this regard. We’d love to help everybody in every way we can, but we had to find a proper balance between the plugin cost and how much support we sell with it.

    I am sure you will find some awesome devs, I hope they will fit within your project budget. Please feel free to open up a new thread for new issues and questions. Happy developing!

    – Brook

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘changing the colors in Events Pro calendar widget and the font in calendar view’ is closed to new replies.