Documentation › Targeting Elements for Styling: Levels of Customization

Targeting Elements for Styling: Levels of Customization

Just as with the arrangement and configuration of blocks in Grid Mode, layout inheritance
applies to the styles you choose in Design Mode. You can customize the styles of any layout, and those customizations apply to any child layouts—unless, of course, you customize the child layouts too.

For most elements, you can choose to have your customizations be wide or narrow in scope. This subsection discusses these levels of customization from general to specific.

You can select an element or block to style for 1) all layouts (referred to as editing the “regular element”), 2) a specific layout, or 3) an instance: a particular element or block on a specific layout. Further, for link elements, you can customize individual states. Select an element or block in either the Design or the viewport (both methods are described in this article).

Once you have selected an element or block, apply styles in the properties panel of the Design Editor.

Example:
You decide to make a style change to the header block on pages, but not posts. You would edit the header block styles just for the Single > Page layout.

Layout inheritance applies to style customizations. Even if you specify a style to apply only for a particular layout or instance, any uncustomized child layouts will also have that style applied because the entire layout is inherited.

Note:
Mirroring blocks results in an exception to the way instances work. If you customize an instance of an element in Layout A and then mirror the containing block in Layout B, those styles apply to the element in Layout B as well. In other words, even though you specified the styles to apply to only one element on one layout, they are also applied to the second layout because of mirroring.

Level 1: Editing the Regular Element

The most general customizations are for the regular element, affecting all layouts—in other words, your entire website. If you edit the styles for the header block regular element, for example, you’re saying you want your styles to apply to all header blocks across your site.

Design Editor method:

  1. Expand the section of the element tree that contains the element you want to customize.
  2. Click the element or block you want to customize.

Viewport method:

  1. Mouse over the element in the viewport. Be sure the structure tooltip shows the element or block you want (such as Blocks > Navigation > My Alias).
  2. Right-click the element. (If you’re having a hard time getting the exact element you want, you can right-click a child element, go to Parents, and select the correct element. The menu then specifies that element.)
  3. Click Edit Regular Element.

Level 2: Editing for This Layout

The next level of customizations is for a particular layout—usually the layout you’re working on. Customize an element for the current layout when the element on that layout needs to be different from other layouts.

Design Editor method:

  1. Expand the section of the element tree that contains the element you want to customize.
  2. Click the element or block you want to customize.
  3. Click the Customize For Current Layout button in the properties panel.

Viewport method:

  1. Mouse over the element in the viewport. Be sure the structure tooltip shows the element or block you want (such as Blocks > Navigation > My Alias).
  2. Right-click the element. (If you’re having a hard time getting the exact element you want, you can right-click a child element, go to Parents, and select the correct element. The menu then specifies that element.)
  3. Go to Edit Regular Element, and then click Edit For This Layout.

Level 3: Editing an Instance

An instance of an element is a specific layout-element combination—for example, the header block on the Single layout. Target an instance when you have multiple blocks or elements of the same type in a layout and you need to apply a given style to only one of them.

Instances don’t get as specific as selecting one menu item out of a particular navigation block. However, if you have two navigation blocks in a layout, using instances allows you to target the menu item element in just one of those menus rather than targeting all menu items in all menus in the layout.

Example:
Imagine you have two widget areas in your layouts, and you want to customize the styles for just the title of one of those widget areas in the Single layout. To make style changes to the title of only one of those widget areas, you need to target the instance (the layout, block, and element combination). Otherwise, if you target the widget title element for the entire layout, your changes will apply to the titles in both widget areas.

Note: Mirroring blocks results in an exception to the way instances work. If you customize an instance of an element in Layout A and then mirror the containing block in Layout B, those styles apply to the element in Layout B as well. In other words, even though you specified the styles to apply to only one element on one layout, they are also applied to the second layout because of mirroring.

Design Editor method:

  1. Expand the Structure or Blocks section of the element tree.
  2. Locate the element or block you want to style, and expand the Instances subsection.
  3. Click the instance you want to customize.

Viewport method:

  1. Mouse over the element in the viewport. Be sure the structure tooltip shows the element or block you want (such as Blocks > Navigation > My Alias).
  2. Right-click the element. (If you’re having a hard time getting the exact element you want, you can right-click a child element, go to Parents, and select the correct element. The menu then specifies that element.)
  3. Click Edit This Instance.

Editing Hyperlink States

The various link states (visited, hover, active) can be customized in much the same way as other elements, with the exception of editing for a specific layout. The option to select a state appears when you have selected a link element, such “Hyperlink” or “Menu Item.”

Editing a State for All Layouts

Design Editor method:

  1. Expand the Blocks section of the element tree.
  2. Locate and expand the child element you want to style, and expand the States subsection.
  3. Click the state you want to customize.

Viewport method:

  1. Mouse over the element in the viewport. Be sure the structure tooltip shows the element or block you want (such as Blocks > Navigation > My Alias).
  2. Right-click the element. (If you’re having a hard time getting the exact element you want, you can right-click a child element, go to Parents, and select the correct element. The menu then specifies that element.)
  3. Go to Edit Regular ElementStates, and click the state you want to customize.

Editing a State for an Instance

Design Editor method:

  1. Expand the Blocks section of the element tree.
  2. Locate and expand the child element you want to style, and expand the Instances subsection.
  3. Click the state you want to customize under the applicable instance.

Viewport method:

  1. Mouse over the element in the viewport. Be sure the structure tooltip shows the element or block you want (such as Blocks > Navigation > My Alias).
  2. Right-click the element. (If you’re having a hard time getting the exact element you want, you can right-click a child element, go to Parents, and select the correct element. The menu then specifies that element.)
  3. Click Instance States, and click the state you want to customize.

This article was last updated for Headway version 3.8.3

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