Skip to main content

We are currently experiencing an issue that is preventing customers from submitting support tickets. Please contact us at (866) 819-4486 if you need immediate assistance.

Optimizely Knowledge Base

Override inherited styles on your site

  • Identify if an element you can't change in the editor is an inherited style
  • Override the inherited style in your Variation Code

If you are having trouble editing an element in the Visual Editor, it may be due to styling in the code of your site being marked as 'important!'. This prevents the element's styling from being changed in the editor.

The following is a workaround that can be placed in your Variation Code:

1. Identify the element with inherited style

First, right-click the element and select Inspect Element within your browser. A console will pop up, and the element will be highlighted on the page.

  1. Right click the element and select Copy > Copy selector. You'll paste this selector into your variation code.

    Screen Shot 2016-08-25 at 3.57.39 PM.png
  2. Under the Styles section, search for a tag called "!important".


2. Use the Editor to create CSS

Next, you'll use the Editor to generate the CSS you'll use in your variation code.

1. Edit the CSS of the element with the Visual Editor.

2.Open the Code Editor to find your newly created CSS.

3. Add the new CSS to your variation code

Next, add the CSS to your variation code

1. Replace the element selector with the selector you copied from the browser. Tip: make sure it's still surrounded in quotes.

2. Use this code block as a template. Replace yourSelectorGoesHerewith your selector, and property:value with the CSS you generated in Step 2.

  • $('yourSelectorGoesHere').attr('style', 'property: value !important; property2: value2 !important');

It should look something like this:

Then, click Apply. You should now see your changes in the Editor.