Styling options in Design Mode provide most or all of what beginning or casual designers need to get the site looking the way they want. But advanced designers may want to go farther and get their hands on the CSS code. The Live CSS Editor in Design Mode provides this capability. This article describes a few approaches to applying styles.
See Headway CSS Map for details about using the Live CSS Editor to target specific elements, layouts, and blocks and using the body.custom selector.
Adding Attributes to Headway’s Classes
- Select the element or block you want to edit (more information).
- In the element tree, click the Edit in Live CSS button next to the element. The Live CSS Editor opens to the class used for the selected element or block.
- Type your custom CSS. Check the viewport to make sure your changes have the intended effect.
- Click the Save button.
- Close the Live CSS Editor.
Assigning Custom Classes to Blocks
As described in Block Options (Config Subtab), the options for every type of block include adding custom CSS classes. To use custom classes for blocks, add them in the Live CSS Editor, and then assign them to blocks in the block options.
- In the Tools menu, click Live CSS. The Live CSS Editor opens.
- Add one or more new classes and attributes at the bottom of the code.
- Close the Live CSS Editor.
- In the viewport, right-click a block that you want to assign the class to, and click Open Block Options.
- In the options panel, click the Config subtab.
- In the Custom CSS Class(es) field, type the classes you want to add, separating each with a space. Don’t add the leading period to the classes.
- Verify the changes in the viewport. If you need to make changes, click Live CSS Editor in the Tools menu.
- When you’re satisfied with your changes, click the Save button.
You want to add a 1px border and box shadow to multiple blocks, so you want to reuse a class rather than change the styles for each block. Open the Live CSS Editor and add a class called something like “.shadowbox” with the attributes and values you want. Then, for each block you want to have this appearance, open the block options to the Config subtab, and type shadowbox in the Custom CSS Class(es) field.
Applying Styles to Other Elements
Just as with any website, editing the CSS code gives you control over basic HTML elements, like h1, p, div, and a. Of course, adding styles to these elements can have far-reaching effects on your site. For most of these, you can work in the options panel under the Defaults tab.
You may want to target nested elements in your custom CSS, such as ol li or ol ul, if they’ll be used in your site’s content.
If you have HTML in Headway custom code blocks or WordPress text widgets, use the Live CSS Editor to target any elements or classes you are using in those places. Because you can edit both the HTML and CSS in this case, you have complete control over the styling of that content. Be sure to save changes to the HTML or block first so your changes to the CSS in the Live CSS Editor will show up.