Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #7560

    Hello, I’m using one of the columns in the footer to include text links with an icon at the side.

    The icons are solid .png with transparent background. However, the footer background color is seen on top of the icon, about 10% transparent, so the icon looks fazed.

    O can’t think of what’s producing this effect. How can I avoid it?

    There’s no way I can give you the link since the website is under construction, unless I have an ip address (CGC maintenance plugin).

    Please help, thank you.

    Daniel

    #58448

    Hey,

    you can try to adjust the footer color with following code:

    #top #footer, #top #footer span, #top #footer div, #top #footer p, #top #footer a {
    background-color: #2C3547 !important;
    }

    Change the hex color value to any other value of your choice.

    #58449

    Thanks Dude,

    I already had done that based on your input in a previous post, however:

    When I place in the footer a text widget with two small 48×48 px icons, it seems that the background color is on top of the icons, let’s say with a 10% transparency.

    The result is that the icons ( I tried even the most shiny ones), seem to be wrapped in a cloud of the background color, so they don’t stand out but are kind of “swallowed”, if you will, by the surrounding background color.

    Another way to put it: if I place a white icon and the background is red, the icon will be tinted by a soft reddish color.

    Again, if you can PM an IP address, I can allow you to take a look, can also give you credentials to enter the site and see what’s the issue. Just in case you can’t, I placed here a snapshot of the problem.

    And here are the same icons, on the same background color, but not on the website:

    Thanks in advance for your help.

    Daniel

    #58450

    Ah ok – You can fix this with following css code – I’d put it in css/custom.css:

    #footer .widget > ul, #footer .widget > div, #footer .widget > span, #footer .widget > p {
    opacity: 1;
    }

    #58451

    Great! Now it looks fine.

    Don’t know what’s the purpose of that transparency, it looks good on the Abundance demo, but definitely it was not looking good in my site :)

    Thanks a lot,

    Daniel

    #58452

    Glad that I could help you :)

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Color over icons on footer’ is closed to new replies.