Can’t Change Events List Widget Color

  • Resolved anelson1217

    (@anelson1217)


    3 years, 10 months ago

    Hello! I have been unable to change the color in the Events list widget that we have in the footer. It does not correspond with the colors in our events calendar. I would like to change the header color, date and time color, and event title color.

    see this link for a photo: https://prnt.sc/wingzc

    So far I have tried customizing the footer color settings and the color settings in the events calendar, but nothing seems to work.

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

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

  • You could use custom CSS to set the colors.

    For example, for a dark backgroound, the title color for a calendar listing is usually set using something like:

    .tribe-events-single-event-title {
    color:#ffffff;
    }

    Your current Calendar page has this CSS for the titles:

    .tribe-events .tribe-events-calendar-list__event-title-link:active, .tribe-events .tribe-events-calendar-list__event-title-link:hover, .tribe-events .tribe-events-calendar-list__event-title-link:focus, .tribe-events .tribe-events-calendar-month__calendar-event-title-link:active, .tribe-events .tribe-events-calendar-month__calendar-event-title-link:hover, .tribe-events .tribe-events-calendar-month__calendar-event-title-link:focus, .tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-title-link:active, .tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-title-link:hover, .tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-title-link:focus, .tribe-events .tribe-events-calendar-month__calendar-event-tooltip-title-link:active, .tribe-events .tribe-events-calendar-month__calendar-event-tooltip-title-link:hover, .tribe-events .tribe-events-calendar-month__calendar-event-tooltip-title-link:focus, .tribe-events .tribe-events-calendar-day__event-title-link:active, .tribe-events .tribe-events-calendar-day__event-title-link:hover, .tribe-events .tribe-events-calendar-day__event-title-link:focus, .tribe-events .tribe-events-calendar-latest-past__event-title-link:active, .tribe-events .tribe-events-calendar-latest-past__event-title-link:hover, .tribe-events .tribe-events-calendar-latest-past__event-title-link:focus {
    color:#a8bd38;
    }

    Thread Starter anelson1217

    (@anelson1217)

    I tried this in the additional css, but no change. I managed to edit it properly while inspecting the element temporarily, but for whatever reason when I insert the code into the additional css, no changes are made to the site. Is there something I am missing?

    Plugin Support iammarta

    (@iammarta)

    Hello @anelson1217,

    Thanks for reaching out!

    You can use the following CSS rule:

    .tribe-events-widget-events-list time.tribe-events-widget-events-list__event-datetime, .tribe-events-widget-events-list a.tribe-events-widget-events-list__event-title-link.tribe-common-anchor-thin, span.tribe-events-widget-events-list__event-date-tag-daynum.tribe-common-h2.tribe-common-h4–min-medium {
    color: red!important;
    }

    Where “red” you can replace with any color.

    Best regards,
    Marta

    • This reply was modified 3 years, 10 months ago by iammarta.
    Thread Starter anelson1217

    (@anelson1217)

    It worked perfect!! Thank you so much!

    Plugin Support iammarta

    (@iammarta)

    @anelson1217,

    It’s great to hear that it helps.

    I’ll go ahead and mark this one as Resolved for now, but feel free to open up a new thread if anything else comes up.

    Have a wonderful day!

    Best regards,
    Marta

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Can’t Change Events List Widget Color’ is closed to new replies.