Override inherited styles on your site

  • Updated

This topic describes how to:

  • Identify if an element you cannot 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 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 still 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.