Combining stylesheets from multiple sources

✖
Copy to clipboard

Kentico allows you to combine the content of different stylesheets by entering macros into stylesheet text. When the system resolves the macros, they are replaced by the content of the specified stylesheet. For example, this can be useful when creating a page‑specific stylesheet as an extension of the main website stylesheet with additional CSS classes.

You can link stylesheets into the code of other stylesheets by inserting macro expressions in the following format:

  • {% CSS[“<stylesheet code name>“] %}, e.g. {% CSS[“CorporateSite“] %}
  • {% CSS.Stylesheets[“<stylesheet code name>“] %}, e.g. {% CSS.Stylesheets[“CorporateSite“] %}

If the code name of the stylesheet does not contain any dots, you can also use the following simplified notation:

  • {% CSS.<stylesheetname> %}, e.g. {% CSS.CorporateSite %}

Similarly, you can link component stylesheets the following way:

  • {% CSS.Containers[“<web part container code name>“] %}, e.g. {% CSS.Containers[“BlackBox“] %}
  • {% CSS.Templates[“<page template code name >“] %}, e.g. {% CSS.Templates[“CorporateSite.HomePage“] %}
  • {% CSS.WebParts[“<web part code name>“] %}, e.g. {% CSS.WebParts[“AbuseReport“] %}
  • {% CSS.WebPartLayouts[“<web part layout full name>“] %}, e.g. {% CSS.WebPartLayouts[“AbuseReport.MyCustomLayout“] %}
  • {% CSS.Transformations[“<transformation full name>“] %}, e.g. {% CSS.Transformations[“CMS.Article.Default“] %}

The simplified notation can also be used if the component name does not contain any dots (web part layouts and transformations always contain dots in their full names, so their stylesheets can only be linked using the notation above):

  • {% CSS.Containers.<web part container code name> %}, e.g. {% CSS.Containers.BlackBox %}
  • {% CSS.Templates.<page template code name > %}, e.g. {% CSS.Templates.MyTemplate %}
  • {% CSS.WebParts.<web part code name> %}, e.g. {% CSS.WebParts.AbuseReport %}

Disabling resolving of CSS macros

Resolving of CSS macros is enabled by default, but can be disabled if needed via the Resolve macros in CSS setting in Settings -> System -> Performance (only available if you choose (global) option in the Site selector).

If you wish to disable the Resolve macros in CSS setting, you first need to remove all occurrences of macros from your stylesheets. Unresolved macro expressions are not valid CSS code and as a result, the given stylesheets will not be processed correctly by browsers.

Using the @import directive

You can alternatively load the content of other stylesheets by adding the standard @import directive to the beginning of the stylesheet code, for example:




@import url(~/CMSPages/GetResource.ashx?stylesheetname=corporatesite);

This may also be used to import external CSS stylesheets from static files in your web project, for example:




@import url(~/CMSPages/GetResource.ashx?stylesheetfile=/Kentico/App_Themes/CorporateSite/Blue.css);