Customizing your site design with Keystone

Site Level Settings

Each Keystone site has configuration settings that allow you to swap out CSS and JS bundles on the page. In the Share Configuration area or site configuration area locate /Settings/SystemConfiguration/SiteDesign and then update the CSSBundle and JSBundle to include the files required.

The setting will accept relative paths to CSS/JS files within your site file system (/assets/example.js) or fully qualified URLS such as http://www.example.com/sample.js

You can also opt to minify and bundle these assets by checking the Compress option.

Page Level CSS Overrides

Each page template in Keystone contains a field to store custom CSS for the page. This style content is accessible from the Keystone ribbon of the Page Editor and can be added to the page directly by the Keystone layout.

Component Level CSS Styling

Components in Keystone support several types of styling by content authors. Let’s consider the Panel as an example.

Most components will have a wrapping div. The Style button can be used to add additional classes to the wrapping div.

By adding the word red to the “Additional Styles” field the HTML of the Panel component will change to:

<div class="panel panel-default red">

If more advanced control is needed or the class doesn’t exist, the advanced style build provides a wide range of options.

Cascading Components

Keystone supports the ability for a content author to place a component on a page and have that component propagate to all children. The content author does so by:

  1. Placing the component on the page (as normal)
  2. Setting the Cascade property from the Edit Component Properties dialog

By default we have not enabled this in Keystone. To do so you will need to add the CascadingRenderings template as the parameter template to the required sublayouts or rendering items.

  1. Find your content component definition in /Sitecore/Layouts/Sublayouts or /Sitecore/Layouts/Renderings
  2. Add the CascadingRenderings template as the Parameters Template

Rich Text Editor CSS Configuration

The Rich Text Editor loads CSS style sheets that allow content authors the freedom to style content with a list of available styles. To provide the greatest possible flexibility, Keystone includes a rules engine implementation that will allow you to inject custom style sheets based on the item, template and user. You can also register additional conditions from Sitecore’s library if required for your implementation.

    The primary use case for this feature:
  • Provide only the required styles for a particular field or template
  • Allow a field/template to be reused across sites or differently branded areas and load the correct style
  • Provide fewer or more styles based on the users level of sophistication (as represented by their membership in a role)

Located in /sitecore/system/Settings/Rules/KeystoneRTECSS/Rules, you can build rulesets (much like Insert Options rules) that control what style sheets are loaded.

Please note that the path to the stylesheet specified in the action must be the complete path from the root, such as /css/custom/mycssfile.css or a fully qualified URL with http:// or https//. No other path format is supported at this time.