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.
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.
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.
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:
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.
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.
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.