Applying detailed CSS styling of your views

Change the styling of your Page and Entity views by specifying CSS classes to apply to the root HTML element of that view.

About this task

By default, the Component Presentation and Pages rendered for Digital Experience Accelerator get their styling from the Bootstrap HTML and CSS classes used in the associated view. To apply specific styling to a Page view or Entity view, without updating its source code, specify CSS classes to apply to the root HTML element of that view.

Procedure

  1. In Content Manager Explorer, open a Page Template or a Component Template.
  2. In the General tab, under HTML class(es), enter a list of one or more CSS class names (separated by spaces) that you want CSS to apply to the root HTML element of your Page view or Entity view (in addition to classes predefined for the view).
    • For a Page view, specify HTML classes in the Page Template's own metadata.
    • For an Entity view, specify HTML classes in the Component Template's own metadata.
  3. Click Save and Close.

Results

The next time your modified Template is published, the CSS classes you specified are applied to the view.