Documentation › Live CSS Editor

Live CSS Editor

The Design Editor in Design Mode provides most of what you’ll need todesign your site. But if you want to apply additional styling and arecomfortable writing your own CSS, try the Live CSS Editor. The editordisplays a separate, global stylesheet that will be applied after allother stylesheets, so it takes precedence over any other styles youapply in Design Mode.Open the Live CSS Editor by doing one of the following:

  • Click the Live CSS Editor button in the menu bar at the top of the Visual Editor.
  • Click the Edit in Live CSS button in the element tree when you mouse over an element or block.


Ifyou open the Live CSS Editor from the element tree, selectors are addedfor the element or block you are customizing. If you want to add otherstyles, click elsewhere in the editor and write your code.

Important: Before using the Live CSS Editor, see Editing CSS Directly and Headway CSS Map for guidance in properly targeting WordPress and Headway HTML.

Justas with other changes in Design Mode, your changes in the Live CSSEditor are reflected immediately in the viewport. The editor includessyntax highlighting to help you notice any mistakes while coding. Theeditor can also be moved or resized.Be sure to save your changes before selecting a different layout or going to Grid Mode.

This article was last updated for Headway version 3.8.3

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress