Is there a way to change all of the Events+ Calendar color settings?

Hi,
I've checked out the forum and was able to obtain information about changing the background color, but it's unclear how I would be able to change the header, font and actual event colors.

Right now, the header is black, the event button green and the hover button dark grey with black font.

I look forward to hearing from you.

Sincerely,
Kimberly

  • Milan

    Hello @Kimberly Cohen,

    I hope you are having a good day and thanks for the asking. :slight_smile:

    I am afraid you can't narrow down your tweaks to single event out of box. But don't worry I've identified some of the css selectors for you which can let you target single event element, then you can write custom css rules for individual events for calendar view. So here are these css selectors with some test custom css rules. :slight_smile:

    td.eab-has_events{
        /* Will target single day block of event calendar view   */
    /*     background-color: whitesmoke; */
    }
    
    .wpmudevevents-calendar-event-info{
        /*      Target block which displays additonal event information to user when user hover over the event block */
    /*     color: red !important;
        background-color: white !important; */
    }

    You can use this plugin for managing custom css code snippets.
    https://wordpress.org/plugins/simple-custom-css

    I hope this helps you.

    Please let me know if there is anything else I can help you with or advise me if I missed something. :slight_smile:

    Best Regards,
    Milan.

  • Kimberly Cohen

    Hi Milan,

    Thank you for your help. The code you've provided isn't accomplishing everything I'd like it to. Can you either provide me with or direct me to a list of all the css elements associated with the calendar so I can experiment with them please.

    I'd installed the Simple Custom CSS before and it has worked very well. Thank you for reaffirming my selection of the plug-in.

    Sincerely,
    Kimberly

  • Milan

    Hello @Kimberly Cohen,

    I hope you are having a good day and sorry for being late here. :slight_smile:

    Unfortunately there isn't any documentation of css selectors used by event+ plugin. But you can use chrome developer tools or firefox developer tools to identify css selectors which used to style calendar shortcode. :slight_smile:

    To identify css selector of element please select element from developer tool context, and then view its class property. Class property usually contains css selectors for element. I've attached screenshots explaining you how you can use chrome developer tool to identify css selector of an element.

    For more information about chrome developer tools you can read here,
    https://developer.chrome.com/devtools

    For more information about firefox page inspector tool you can read here,
    https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector

    I hope this helps you.

    Please let me know if there is anything else I can help you with.

    Best Regards,
    Milan Savaliya.