Knowledge Base

CSS Selector

Last Modified:
01 Feb 2019
User Level:
Power User

Description

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

NOTES:

  1. You can only output one CSS file per page per Navigation Object.
  2. 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.
  3. 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:

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

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