Assign stylesheets to templates
Once a stylesheet has been created you will need to assign it to a template. Assigning stylesheets to a template will include the file in the head of a published page and also apply any styles to the Contensis editor. This is simple to do within the Contensis UI.
- Open the template you want to assign the stylesheet to.
- Press the Properties tab.
- Under the section Stylesheets you will see a list of all the stylesheets created within Contensis. You can select the stylesheets you require from the list, use Shift + click to select more than one.
- Next, check the box marked Default assignment on every page. This will assign the stylesheet to every page (useful for global items like navigation).
- Optionally, you could select Force assignment on every page. This will stop you from being able to remove the stylesheet at the folder level.
- Save the template to keep your assignments you've made.
How to add a print stylesheet
In most cases you will have a print stylesheet inside of your stylesheets folder already. A print style sheet will only be applied when somebody tries to print your web page. It is recommended you use a print stye sheet to ensure only the most relevant information is included on the printed page. For example, removing the navigation of your website might be a good idea for a print style sheet.
To set a style sheet as your print style sheet:
- Edit the stylesheet and click on the Properties tab.
- Under Publish Options set the media type to Print.
- Save the stylesheet.
Once this stylesheet has been assigned to a template it will have the media type of print, and only be used when a user prints your page. For a guide on how to restyle your web pages for print please take a look at this guide (external website).
More control over stylesheets
There will be instances where you need to control the order, or apply conditional stylesheets to your templates. Whilst being slightly technical, this approach provides more flexibility and should be used instead of the UI approach explained above.
- Edit the template you want to assign your stylesheets to.
- Click on the Custom Code tab and in the right hand side select the PagePreload event. This is called before the page is loaded.
- Enter the following code for as many stylesheets that you have, replacing the file names where appropriate then Save the template.
Finer control over stylesheets
Following on from the method used above, to add conditional stylesheets to your web page or to add inline CSS, take a look at the code below to add into the PagePreload event in the Custom Code area.
There may be occasions when you want to apply styles to a page purely to help with editing. It may be that you have a carousel of images which would normally display on top of each other when on your published site but this would make it very difficult to edit. In this case you can create an editor stylesheet which only applies in the WYSIWYG editor. To create an editor stylesheet, create your stylesheet as normal but when editing it press the Properties tab and select Editor from the Media Type dropdown. You can then assign the stylesheet to templates as normal but when they publish the stylesheet will not be attached to the page.
Prevent CSS caching
When developing a site, you'll often find yourself refreshing your page to see that changes that you have made in your stylesheet have been applied, only to find an old version of the stylesheet loaded in the browser.
We can prevent CSS caching in the browser by appending a version number to the link URL. Using Custom Code on Page PreLoad in your base template we can append the 'Content Version ID'to each of your stylesheets automatically.