CSS Selector

Last Modified:: 06 Jun 2019
User Level:: Power User

Description

You can use particular CSS files for different Branches of your site using the CSS Selector Navigation Object in 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 color schemes or branding).

NOTES:

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:

Item	Description
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:

Item	Description
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.
Section	Specify a specific Section/branch: if chosen, a popup window appears with the Site Structure to choose the Section. The custom CSS will apply to the selected Section and all subsections. Find section by section name: if chosen, enter name in the open field below. In this case, all Sections of the specified name use the custom CSS (e.g. all sections called "News").

Review your entries and selections, if you are satisfied with your entries, click Next to generate the object.

Once generated, highlight the T4 Tag Embed Code, copy to your clipboard (Ctrl+C) and paste into a Page Layout or Content Layout.