Update Layout Markup

Owned by Artem Loboda
Last updated: Jun 03, 2019 by Dragan Stojkovic (Unlicensed)

SCORE from version 3.1.8.0 comes with a new feature which enable developers to add a CSS class and additional meta data to <body> HTML tag on pages that inherit from SCORE Content Page template: /sitecore/templates/Score/Pages/Site Content Page .

CSS class

To add a CSS class to a <body> tag of a content page inheriting from /sitecore/templates/Score/Pages/Site Content Page open that page in Content Editor and locate the Page Style field:

This field is reading values from your tenant Structure Styles selection settings: /sitecore/content/<TENANT>/<TENANT> Selections/Structure Styles

Then choose the value from the dropdown list of the field and save the page. If the list is empty then you first need to add that CSS class selection item to Structure Styles selection settings: /sitecore/content/<TENANT>/<TENANT> Selections/Structure Styles of your tenant, and then choose that value in the list. The CSS class will then be visible in experience editor or preview mode of that page, and after publish in published page mode view.

Metadata

Class attribute of <body> HTML tag of that content page will also contain following values:

  • web or master depending on the current database that your page is using
  • current page template name
  • current page editing mode: mode-live (for published page), mode-preview  when viewing page in preview mode and mode-experience-editor when viewing page in experience editor mode

Note, that metadata will be visible always, regardless if the page has CSS class set or not.

Newly scaffolded solution from SCORE 3.1.8.0 or later

To use this new feature on new solution there's nothing else that needs to be done to use the feature other then the above mentioned.

Old solution that was scaffolded from SCORE version lower then 3.1.8.0

After upgrading to SCORE 3.1.8.0, open the layout *.cshtml file that your content page is using. That's usually a file named: Main.cshtml and it's located in Views\Layouts\Main.cshtml of your web project, by default SCORE scaffolding. Of course it can be in different place if it was changed in specific solution solution.