Unable to change the color of some elements

  • Resolved miguelfornesfx

    (@miguelfornesfx)


    8 months, 3 weeks ago

    I am having problems with the plugin since it is not designed for websites with dark backgrounds.
    I’ve wasted many hours looking for the CLASS attributes of each element to change them manually with CSS one by one, but I still can’t do it with the following elements that don’t change:

    The icons to change the view of events:

    Link back to all events or calendar:

    Also when in the description of my event I use, for example, an H4, the color also changes

    It’s quite a pain to customize all this by hand, but I think I’m just missing these elements to make everything fit the dark background.

    This is the list of CSS changes that I have applied in Appearance -> Customize:

    .tribe-events-c-top-bar__datepicker-desktop {
    color: #ffffff !important;
    }

    .tribe-events-calendar-list__month-separator-text {
    color: #ffffff !important;
    }

    .tribe-events-calendar-list__event-date-tag-daynum {
    color: #ffffff !important;
    }

    .tribe-events-calendar-list__event-date-tag-weekday {
    color: #c7e47f !important;
    }

    .tribe-events-calendar-list__event-venue-address {
    color: #c7e47f !important;
    }

    .tribe-events-calendar-list__event-venue-title {
    color: #c7e47f !important;
    }

    .tribe-events-c-small-cta__price
    {
    color: #ffffff !important;
    }

    .tribe-events-c-small-cta__price
    {
    color: #ffffff !important;
    }

    .tribe-events-single-event-description
    {
    color: #ffffff !important;
    }

    .tribe-events-cost
    {
    color: #c7e47f !important;
    }

    .tribe-events-calendar-list__event-title
    {
    color: #ffffff !important;
    }

    .tribe-events-calendar-list__event-description
    {
    color: #ffffff !important;
    }

    .tribe-events-calendar-list__event-title-link
    {
    color: #ffffff !important;
    }

    .tribe-events-view-selector-button
    {
    color: #ffffff !important;
    }

    .tribe-events-single-section-title
    {
    color: #ffffff !important;
    }

    .tribe-events-start-datetime-label
    {
    color: #ffffff !important;
    }

    .tribe-events-event-cost-label
    {
    color: #ffffff !important;
    }

    .tribe-events-event-cost

    {
    color: #ffffff !important;
    }

    .tribe-events-event-categories-label
    {
    color: #ffffff !important;
    }

    .tribe-events-meta-group
    {
    color: #ffffff !important;
    }

    .tribe-events-header__events-bar
    {
    color: #ffffff !important;
    }

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Darian

    (@d0153)

    Hi @miguelfornesfx

    Thanks for reaching out. Let me help you with this one.

    Please try adding the following snippet to change the color of the icons, back link, and headings.

    .tribe-common .tribe-common-c-svgicon path,
    .tribe-common .tribe-common-c-svgicon g{
        fill: white !important;
    }

    .tribe-events-back a, .tribe-events-back a:visited{
        color: white !important;
    }

    .tribe-events-content h2, .tribe-events-content h3, .tribe-events-content h4, .tribe-events-content h5, .tribe-events-content h6{
        color: white !important;
    }

    Let me know how it goes.

    Thread Starter miguelfornesfx

    (@miguelfornesfx)

    It worked! Thank you so much! But now the background of my last event went white and cant be read (I think that was before this change so is not your code)
    Would you know why it happened?:
    https://valenciagratis.com/evento/xxvii-festival-de-jazz-de-valencia-2024-disfruta-de-conciertos-gratuitos-por-toda-la-ciudad/

    I only have two events by vnow, and the first I did still works well https://valenciagratis.com/evento/feria-del-vermut-en-valencia-2024-disfruta-del-mejor-vermut-en-el-corazon-de-la-ciudad/

    Sorry for the inconvenience, and thank you a lot for your help. I’m not a programmer, and these things are beyond my knowledge.

    Thread Starter miguelfornesfx

    (@miguelfornesfx)

    I have also noticed that errors appear in the monthly calendar view that do not allow the text to be read properly.

    Again, thank you for any help

    Thread Starter miguelfornesfx

    (@miguelfornesfx)

    I’m push up this thread in the hope that someone can answer, thanks! ??

    Plugin Support tristan083

    (@tristan083)

    Hi @miguelfornesfx ,

    Thank you for your message.

    Some text seems to be visible now compared with your screenshots. One thing I’m seeing (as of this wring) is that the event title isn’t visible on the month view for multi-events. To attempt to rectify that, kindly try applying the following CSS snippet.

    :root {
        --tec-color-text-events-title-month-multiday: black !important;
    }
    Plugin Support Darian

    (@d0153)

    Hi there,

    It seems like this thread has been quiet for a bit, so we’ll go ahead and mark it as resolved. However, if any further questions or concerns come up, please don’t hesitate to start a new thread.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Unable to change the color of some elements’ is closed to new replies.