Is there a way to change size of the font used for the month and year in the Events+ Calendar

Is there a way to change size of the font used for the month and year in the Events+ Calendar display?

I'm currently using the Simple Custom CSS plugin to make other formatting changes to the way my Events+ archives are displayed and it would be great if I could get a tweak to change the font size for the Calendar Month and Year displayed.

  • Tyler Postle
    • CGO

    Hey Thomas,

    Hope you're having a good weekend!

    Try targeting these classes:

    .eab-monthly_calendar. eab-shortcode_calendar-navigation-link. eab-cuw-calendar_date {
             font-size: 32px;
    }

    Of course, you can make it whatever size you like :slight_smile:

    Let us know if that works for you! If not we'll keep troubleshooting until we can get this resolved.

    All the best,
    Tyler

  • Thomas
    • Flash Drive

    Thanks for the immediate response!

    I'm sorry, the above doesn't seem to be working. I also tried to add !important after the 32px, but that didn't seem to make any difference.

    As I mentioned, I'm using a couple other settings in the Simple Custom CSS, so I tried the above the others, and still no luck.

    Any other suggestions?

  • Tyler Postle
    • CGO

    Hey Thomas,

    No problem! Happy to lend a hand. Hmm... I just tested it on my own installation and this code worked:

    .eab-shortcode_calendar .eab-shortcode_calendar-title-top td a, .eab-shortcode_calendar .eab-shortcode_calendar-title-bottom td a {
       font-size: 32px;
    }

    Let me know if that works for you! If not, we'll keep trying :slight_smile:

    Cheers,
    Tyler

  • Thomas
    • Flash Drive

    Tyler, that one worked like a charm! Thanks for the very quick response.

    One more thing, though, at 32px, the font is too large, there isn't enough spacing between the bottom of the calendar and the month. I just reduced the size of the font to 24px and that worked, but do you know whether there's a way to increase the space between the calendar and that date/title?

  • Tyler Postle
    • CGO

    Hey Thomas,

    No problem! Glad that worked. I think I may have better classes to target though - you will also be able to create the extra whitespace with these ones too. Try something like this:

    .eab-shortcode_calendar-title-bottom td (
    font-size: 32px;
    padding-top: 16px;
    }

    Let us know how that works for you! That will only target the bottom calender title. I notice your top title is white so you can't see it. However, if you do want to target that one as well then you can use these classes:

    .eab-shortcode_calendar .eab-shortcode_calendar-title-top td {
    font-size:
    padding-bottom:
    }

    Hopefully this helps :slight_smile:

    Cheers,
    Tyler

  • Tyler Postle
    • CGO

    duh, I'm so stupid. I went from a dark page background to a white and forgot about the top title.

    :p happens to the best of us Thomas. Web Design can be a frustrating creature. Glad we got this all resolved.

    Let me know if you have any further questions! Happy to help :slight_smile:

    Cheers,
    Tyler

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.