Background Icon Colours Not Working

  • Resolved stewartmartin

    (@stewartmartin)


    5 months ago

    Hi there.

    When I go to Event Settings > Style Settings and change the Royal Icons Background Colour from Orange to Blue, it doesn’t update on the front end.

    I have changed all Orange backgrounds to blue to support our brand colour and every other option seems to work (background labels etc) apart from the Royal Icons stay Orange.

    Of course, I can load up the back end CSS and replace orange with by Hex colour choice but id rather either add some CSS code or get this to work.

    Thanks.

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

  • I have the same problem…

    How can i change with CSS?

    Thread Starter stewartmartin

    (@stewartmartin)

    Frustrating isn’t it.

    Certain elements are also staying Orange when you use the short codes which seem to be unaffected by any of the changes in the Style Settings.

    I have downloaded some CSS files and found the Orange code, replaced and uploaded but this didn’t resolve the issue. I am not hugely into CSS etc really understand the basics but it seems that it has been hard coded somewhere.

    I am still looking…

    Thread Starter stewartmartin

    (@stewartmartin)

    I have found in my testing that in the Style Settings, you can only change the icon colour if you are using the Royal Template for your event. It looks like this isn’t a global colour change for the other templates which is a bit strange.

    I don’t really want to use the Royal theme as the format is just as nice as the Default theme. The orange looks hard coded inline CSS and at the moment I can’t figure out how to override it. If the dev’s could input that would be great thanks.

    Plugin Contributor Md. Abdullah Al Mahim

    (@aamahin)

    Hello @stewartmartin & @thorhec87

    Can you please share the URL of the page which is not working with the style settings? So i can inspect the page. Also you can open a support ticket in our PRO support forum to get a quick support, the dedicated support team will help you to fix the issue quickly.

    Thanks for your understanding.

    Regards.

    Thread Starter stewartmartin

    (@stewartmartin)

    Hi Adbullah

    Yes sure, this is the staging website I am currently building:
    https://staging2.aberhallequestrian.co.uk/event/summer-league-dressage-show/

    You can see from this example, that the flaticons are Orange with a code of: #ffbe30. I have replaced this colour on the back end style options, but there is an overriding code to pull the orange through. If you untick the ‘Background’ option using web developer in Firefox, they show the blue I am trying to change them to.

    I did manage to change a few of the icons on that page using CSS, but not all the options were able to be changed. (I could not change the i.flaticon-next at all with any version of perams)

    For example;

    i.fas.fa-clock {
    background: #34548B;
    color: #ffffff;
    }

    Thanks for looking

    Regards, Stewart

    Plugin Contributor Md. Abdullah Al Mahim

    (@aamahin)

    Please copy the below code and paste + save in Event Settings -> Custom CSS page 

    .mep-default-sidrbar-events-schedule ul li i, .mep-ev-start-date, h3.mep_list_date i, .df-ico i, .mep-default-sidrbar-address ul li i, .mep-default-sidrbar-social ul li a, button.mep-cat-control, .pagination-sec a, .mep-tem3-title-sec.mep_single_date_btn {
        background: #34548B !important;
    }

    .mep-default-sidrbar-meta .fa-list-alt, .mep-list-footer ul li i {
        background: transparent;
        color: #34548B !important;
    }
    .mep-default-sidrbar-events-schedule h3 i, .mep_event_list .mep_list_date, .mep-event-theme-1 .mep-social-share li a, .mep-template-2-hamza .mep-social-share li a {
        color: #34548B !important;
    }
    .mep-default-sidrbar-meta p a {
        color: #34548B !important;
    }
    Thread Starter stewartmartin

    (@stewartmartin)

    Hi, Sorry for the delay, been a bit busy.

    I have pasted the code and bingo! – it works. The orange has been removed.

    Many thanks for your assistance.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.