- Optimizely Web Experimentation
- Optimizely Performance Edge
- Optimizely Personalization
If you have trouble editing an element in the Visual Editor, it may be due to styling in the code of your site being marked as !important
, which prevents the element's styling from being changed in the editor.
The following is a workaround that you can place in your Variation Code:
- Identify the element with inherited style by right-clicking the element and select Inspect Element within your browser. A console displays, and the element is highlighted on the page.
- Right-click the element and select Copy > Copy selector.
- Under the Styles section, search for a tag called
!important
. - Use the editor to create CSS by editing the CSS of the element with the Visual Editor. Open the Code Editor to find your newly created CSS.
- Add the new CSS to your variation code by replacing the element selector with the selector you copied from the browser.
Make sure it is surrounded in quotes.
- Use the following code block as a template. Replace
Your_Selector_Goes_Here
with your selector, andproperty:value
with the CSS you generated in Step 2.$('Your_Selector_Goes_Here').attr('style', 'property: value !important; property2: value2 !important');
It should look something like this:
- Click Apply.
Please sign in to leave a comment.