Rich-text Reply

Button Color change wont take

agoyette 11-18-14

Button Color change wont take

I am trying to update our button color for a test. It is in the background image in the style. Howver it isn't pointing to an image but rather has the following code:

 

linear-gradient (rgb(226, 188, 34), rgb(216, 168, 22))

 

when I go to update this it will not save for me. Any ideas what could be happening.

Level 1

greg 11-18-14
 

Re: Button Color change wont take

[ Edited ]

When editing the variation code directly, you need to use proper Javascript/JQuery syntax. It would look something like this:

$("#your-element").css({"background":"linear-gradient(rgb(226, 188, 34), rgb(216, 168, 22))"});

Level 2
agoyette 11-18-14
 

Re: Button Color change wont take

Thanks Greg. I see the html and replace just the RGB values but for some reason it isnt changing the button colot for me.

 

Any other ideas?

Level 1
Amanda 11-18-14
 

Re: Button Color change wont take

[ Edited ]

@agoyette - is there any chance you can share the URL and the button you are looking to change? This would help immensely in being able to identify the correct code to change the button. 

 

My suspicion is that your site is using !important tags for the button color, which takes precedence over the changes you are making in Optimizely. To get around this, you have to add an !important tag in the Optimizely code as well. 

 

Here's an example that changes the main CTA in the center of your homepage to white:

 

$('head').append('<style> .request-demo { background: linear-gradient(to bottom,#ffffff,#ffffff) !important;} </style>');

 

Also, for reference, here's a fun chart that highlights the differing degrees of CSS specificity and what takes precedence: http://www.standardista.com/css3/css-specificity/

 

Looking forward to hearing back so we can determine if this is the issue, or if it's something else. 

Optimizely