Override an inherited style on your site

  • Updated
  • Optimizely Feature Experimentation
  • Optimizely Full Stack (Legacy)
  • Optimizely Web Experimentation
  • Optimizely Performance Edge

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:

  1. Identify the element with inherited style by right-clicking the element and select Inspect Element within your browser. A console appears, and the element is highlighted on the page.
  2. Right-click the element and select Copy > Copy selector. You will paste this selector into your variation code.

    Screen Shot 2016-08-25 at 3.57.39 PM.png

  3. Under the Styles section, search for a tag called !important.

    new_styles_screenshot.png

  4. 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.

  5. 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.
  6. Use the following 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:

  7. Click Apply.