- Last Modified:
- 10 Dec 2018
- User Level:
- Power User
You can use different CSS files within different branches of the site by using the CSS Selector Navigation Object within the header of a Page Layout. When doing so, define the branch that uses a specific section name or by selecting a particular section. This allows different pages, using the same Page Layout, to use different CSS files and therefore be styled differently. This would typically be used where different parts of the site have unique branding (e.g. different colour schemes or branding).
- You can only output one CSS file per page per Navigation Object.
- If two CSS files are applied to the same branch root within one Navigation Object only the first assigned is output. If multiple CSS files are required, create two separate Navigation Objects and put both within the Page Layout.
- There is no limit to the number of CSS files and branches that can be configured within one Navigation Object.
How to create a CSS Selector
To create this object, go to Assets > Navigation and click Create new navigation and select CSS selector.
After completing the standard options used for all types of Navigation Objects, fill in each of the following, where relevant:
|Language code||The two-character language code ("en", "fr") that is used in the language configuration. This is only used if the Find section by section name option is used and separate Navigation Objects are created for each language.|
|Default stylesheet||Select a default stylesheet that can be used if the current page is not within one of the options configured below.|
For each branch of the site that needs a custom CSS file, add a new CSS Selector:
|Select stylesheet||Choose the stylesheet from the Media Library. You can add the CSS file to the Media Library at this stage if it is not there already.|
Review your entries and selections, if you are satisfied with your entries, click Next to generate the object.