Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 7, 2020 at 8:52 pm #1236123
    Morticka

    Hi guys,

    I’m using different color icons in the tab section (dark background) and each inactive tab color is different. When I use a red icon, the inactive icon is hardly visible.

    How can I change this?

    Sincerely,
    Morticka

    August 7, 2020 at 9:40 pm #1236133
    Victoria

    Hey Morticka,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    August 7, 2020 at 9:54 pm #1236137
    Morticka

    Hi Victoria,

    Ofcourse, link etc in the Private Content.

    Sincerely,
    Morticka

    August 8, 2020 at 3:40 pm #1236218
    Victoria

    Hi Morticka,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.av-tab-section-image {
    opacity: 0.8;
    filter: grayscale(0.7);
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    August 8, 2020 at 6:31 pm #1236245
    Morticka

    Hi Victoria,

    Thx for your fast response! :)

    Unfortunately all the colors are different now. Is there a way to make the inactive icons all the same grey color?

    Sincerely,
    Morticka

    August 9, 2020 at 6:28 pm #1236306
    Victoria

    Hi Morticka,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.av-tab-section-image {
    opacity: 0.8;
    filter: grayscale(1);
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 10, 2020 at 11:38 am #1236414
    Morticka

    Hi Victoria,

    I put the code in quick css and childtheme custom css, unfortunately it did not work. The red inactive icons are still hardly visible,

    Is there another solution? Only focusing on the red icons?

    Sincerely,
    Morticka

    August 10, 2020 at 10:05 pm #1236511
    Jordan Shannon

    Hi,

    Did you add the code to the very top of quick css so it runs first? Also, clear the cache a few times over.

    Best regards,
    Jordan Shannon

    August 11, 2020 at 10:53 am #1236637
    Morticka

    Hi,

    Yes, it did not work.

    Sincerely,
    Morticka

    August 12, 2020 at 4:19 pm #1237040
    Victoria

    Hi Morticka,

    The images used there are made to be black and white via css and their opacity is reduced. We can try to have them black and white with full opacity:

    

.av-tab-section-image {
    opacity: 1;
    filter: grayscale(1);
}

    Please let us know if this works for you if not, could you please attach a mockup of what you’re trying to achieve?
    Best regards,
    Victoria

    August 14, 2020 at 1:34 pm #1237797
    Morticka

    Hi Victoria,

    Thx for trying, unfortunately, that did not work either. I put the css code on top and flushed the cache a couple of times, nothing changes.

    About the mockup: In my first message I showed you two images, including the way I would like the non active icons to display (the gold one)

    Do you have another solution?

    Sincerely,
    Morticka

    August 14, 2020 at 3:54 pm #1237870
    Victoria

    Hi Morticka,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top .av-tab-section-image {
    opacity: 0.8;
    filter: invert(76%) sepia(81%) saturate(387%) hue-rotate(357deg) brightness(104%) contrast(107%);
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.