Calendar – Month Title: Need to Change Font Color

  • On the full-size and small calendars, the Month name is outside of the calendar square, and is a black font. The buttons to advance or go back a month (< Today >) are in a dark grey.

    I am using both calendars on a dark background, and it is virtually impossible to see the black text and grey buttons.

    I would like to change the font color and button colors. How would I do that? Thank you in advance. Other than this, Events Manager is exactly what we need and it works perfectly. Thank you!

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)

  • The following css should fix the problem (I chose white for the color):

    .em.em-view-container .em.em-calendar .em-cal-nav .month-nav .em-calnav, .em.em-calendar .em-cal-nav .month input, .em-em-view-container .em.pixelbones .input .button {
    color: #fff !important;
}
    Thread Starter plautia

    (@plautia)

    Wonderful! That got the month name changed, thank you!

    How about the navigation buttons? They are still grey and hard to see.

    Try changing it to this:

    .em.em-view-container .em.em-calendar .em-cal-nav .month input[type=text], .em.em-view-container .em.em-calendar .em-cal-nav .month-nav .em-calnav, .em.em-calendar .em-cal-nav .month input, .em-em-view-container .em.pixelbones .input .button {
    color: #fff !important;
    opacity: 1 !important;
}
    Thread Starter plautia

    (@plautia)

    This change looks the same to me – white month/year, but grey nav buttons.

    https://cortezpickleball.com/club-events/

    This will make the “today” text white but I don’t know how to change the arrows.

    .em.em-view-container .em.em-calendar .em-cal-nav .month-nav .em-calnav-today.is-today, .em.em-view-container .em.em-calendar .em-cal-nav .month input[type=text], .em.em-view-container .em.em-calendar .em-cal-nav .month-nav .em-calnav, .em.em-calendar .em-cal-nav .month input, .em-em-view-container .em.pixelbones .input .button {
    color: #fff !important;
    opacity: 1 !important;
}

    To change the navigation arrows color you need to modify the calendar template. Create a directory wp-content/plugin-templates/events-manager/calendar then copy the file wp-content/plugins/events-manager/templates/calendar/section-header-navigation.php to that new directory. Then change the two occurrences of #555 in wp-content/plugin-templates/events-manager/calendar/section-header-navigation.php to #fff

    Thread Starter plautia

    (@plautia)

    The code did not work for me to make the word “today” white, it remained black. I am happy with the month being white – and will try the navigation arrow color solution soon. Thank you so much for your help!!

    With Gratitude, Plautia

    Try the following css to also make the word “today” white.

    .month-nav .em.em-calendar .em-cal-nav .month-nav .em-calnav-today.is-today, .em.em-view-container .em.em-calendar .em-cal-nav .month input[type=text], .em.em-view-container .em.em-calendar .em-cal-nav .month-nav .em-calnav, .em.em-calendar .em-cal-nav .month input, .em-em-view-container .em.pixelbones .input .button {
    color: #fff !important;
    opacity: 1 !important;
}
    Thread Starter plautia

    (@plautia)

    Thank you, but it still did not work for me! This made everything black:

    https://cortezpickleball.com/club-events/

    I looked at the css on your website and it’s not correct. Where it should be input[type=text] it’s instead getting “input” followed by an ampersand followed #091; followed by a right bracket.

    • This reply was modified 1 year, 9 months ago by joneiseman.
    • This reply was modified 1 year, 9 months ago by joneiseman.
    • This reply was modified 1 year, 9 months ago by joneiseman.

    Here’s a screenshot of the css I see on your website:

    This is coming from the following css stylesheet:

    <link rel='stylesheet' id='fusion-dynamic-css-css'  type='text/css' media='all' />

    You can see input followed by the ampersand followed by #091;

    Instead it should look like this:

    input[type=text]
Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Calendar – Month Title: Need to Change Font Color’ is closed to new replies.