Color over icons on footer

6 posts from 2 voices

• Started 1 year ago by danielsami
• Latest reply from Dude
• This topic is not a support question

Tags:

No tags yet.

1. 

   danielsami
   Member

   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

   Posted 1 year ago #
2. 

   Dude
   Dude

   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.

   Posted 1 year ago #
3. 

   danielsami
   Member

   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 48x48 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

   Posted 1 year ago #
4. 

   Dude
   Dude

   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;
   }

   Posted 1 year ago #
5. 

   danielsami
   Member

   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

   Posted 1 year ago #
6. 

   Dude
   Dude

   Glad that I could help you :)

   Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.