Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #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.




    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.


    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.



    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;


    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,



    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.