Pro footer color help

Support
#1

I have added a background gradient to the footer but the elements are changing the color ever so slightly. I have tried everything to fix it. Is it a bug?

Please see images

#2

Hello @mrmustard,

Thanks for asking. :slight_smile:

I checked your website and can see that links have #fffff0d1 color. Please make sure that you have set correct color code as on my local setup I don’t see color getting changed automatically.

Thanks.

#3

Hey,

Thanks for you reply.

Not sure you understood what I meant. Its not the links. You can see all the footer elements have a slight different background to that of the gradient. I set them to transparent but it still has a different shade.

Any help is appreciated.

#4

Hello There,

After a careful investigation, I found out that you have this issue because you added this css code in the bar settings:

$el{  
background: #f54673; /* Old browsers */
background: -moz-linear-gradient(left, #f54673 0%, #4662ec 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #f54673 0%,#4662ec 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #f54673 0%,#4662ec 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f54673', endColorstr='#4662ec',GradientType=1 ); /* IE6-9 */


  
}

This code is partly correct. The problem is that the bar and the bar container share the same class which is why the code is applied twice. The first one is for the bar and second one a background for the bar container.

I went ahead and fixed the issue for your. I have updated the code and use this instead:

$el.x-bar{  
background: #f54673; /* Old browsers */
background: -moz-linear-gradient(left, #f54673 0%, #4662ec 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #f54673 0%,#4662ec 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #f54673 0%,#4662ec 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f54673', endColorstr='#4662ec',GradientType=1 ); /* IE6-9 */


  
}

Please check your site now.

#5

WOW! How silly of me :rofl:

I am never surprised how great you guys are. I really appreciate your help!

Have a great day!

Thanks

#6

Glad we could always help :wink: and you’re most welcome!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.