Override an inherited style on your site
3 min
- 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.
Note
Make sure it is surrounded in quotes.
- Use the following code block as a template. Replace Your_Selector_Goes_Herewith your selector, and property: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.