Last updated: April 2, 2021
Once you've structured your template and added some default content, it's time to think about your site's aesthetic presentation.
The inspector is located on the right-hand side of the design manager. This is where you can edit the properties of a layout, module, or group, as well as add modules to a drag and drop layout. When it comes to styling your template, you can use the inspector to:
- Attach stylesheets or JavaScript files to your template
- Add Head or Footer HTML markup to your template
- Add custom CSS classes and inline styling to a specific module or group
Customize your template's head and body options
When you access your template in the design manager, you'll see the layout inspector on the right-hand side if you don't have any modules selected. Edits made in the layout inspector will affect the entire template. Here, you can customize your template's head and body options.
Attach stylesheets and JavaScript files
In the Linked stylesheets and Linked JavaScript files options, click Add to select a stylesheet or JavaScript file to attach to the template. You can also choose to include, exclude, or use domain default stylesheets in the Domain stylesheets dropdown.
You can learn more about how to create and edit CSS files to style your site here.
Add Head or Footer HTML markup
In the Additional <head> markup and Additional markup before </body> fields, you can add Head or Footer HTML markup that will apply to the template.
Add a class or inline styling to the template body
In the Body classes field, you can add a body class attribute to the template. You can also add inline styling to the body HTML of the template in the Inline body styling field.
Customize your module or group's styling options
When you select a specific module in your template, the module inspector will appear. When you select a group of modules in your template, the group inspector will appear. The inspector allows you to customize the styling options of the module or group.
Depending on whether you are customizing an email template module, a page module, or a module group, the styling options presented to you will vary. The example below shows the styling options that are available for a rich text module in a page template.
Add a CSS class
The HTML class attribute allows you to assign classes to modules in your templates so they can be styled using CSS. While your template will already have many default classes, custom classes give designers more control over the appearance of a template, while still maintaining the flexibility of the drag-and-drop layout editor.
In the example above, "bio" is added to the CSS Class field in the rich text module. This will add the HTML attribute class="bio" to the module's container div tag (an HTML tag that specifies an area or division of a page). The bio class, or elements within this class, can now be targeted in your template stylesheet.
Please note: this option is not recommended for use in email templates because style tags are not supported by some email clients.
In your template stylesheet, you can target the container div to style by selecting your custom class and applying various CSS properties. For example, to add a background color to the module with the bio class, you could write CSS like the example below:
.bio {
background: #CCCCCC;
}You may also want to target elements within your module, not just the container div. To do so, you can use nested or direct descendant selectors. For example, to target all paragraph text within the module with the bio class, you could write a nested CSS selector like the example below:
.bio p {
color: #000000;
}Add inline styling
Inline styling is CSS that is written within your HTML tags. Adding CSS properties and values to the Inline styling field for a module or group will apply your code to the module or group container div.
In the the example above, margin and color are used to adjust the spacing and the color of the module. This will add the HTML attribute style="margin-top:30px; color: #00349e;" to the module's container div tag.
While this option can be useful for quick fixes for a particular page template, it is less flexible than using the CSS class field because you have to make code changes within individual modules, rather than in a global template stylesheet.
Email clients are more limited in their HTML and CSS rendering capabilities than modern web browsers. As such, inline styling is the best way to style your emails to be supported across email clients. Email template modules have additional user-friendly options for adding inline styling, shown below.
Add wrapping HTML
Although the drag-and-drop layout editor doesn't provide full access to a template's HTML markup, you can add additional wrapping HTML around certain modules. This option is for designers who need additional control over a template's HTML, but still want to maintain the flexibility of using the drag-and-drop layout editor over a raw HTML template.
To implement this feature, add your HTML markup and the HTML HubL token (where the module's code will render) to the Wrapping HTML field. The earlier example shows an HTML5 <aside> tag wrapping the module.
Add a CSS ID (module groups only)
The HTML ID attribute is available as an option on any module group. IDs are similar to classes in that they allow you to assign areas of your template to be targeted in your stylesheet. However, unlike classes, IDs must be unique (appearing only once per template) and carry more weight than classes in terms of CSS specificity.
In the example below, a group of modules on a page is given an ID of "sidebar" in the CSS ID field. This will add the HTML attribute id="sidebar" to the module group's container div tag. The sidebar ID, or elements within this ID, can now be targeted in your template stylesheet.
For example, to add a red border to the group with the sidebar ID, you could write CSS like the example below:
#sidebar {
border: 1px solid red;
}
