Download this help site
(PDF 82MB)


CSS, LESS, and JavaScript processing

This functionality is only intended for experienced web designers


Please read this page before you proceed: Advanced customization warning
Theme override is intended for people with advanced web design skills. Incorrect use may result in your website malfunctioning.
Note: our technical support team does not provide support related to theme overrides.

CSS stands for Cascading Style Sheets. CSS code, stored in CSS files, is used to define the styles that determine the appearance of elements within your site pages. The overall appearance of website themes supplied by Wild Apricot is controlled by CSS (and an extension of CSS called LESS) stored in Theme.css (or Theme.less) files.

Wild Apricot uses LESS – in fact, a .NET server-side implementation of LESS called dotless – in some of our templates (e.g. the Nature themeset) to make them easier to customize.

CSS loading and sequence

Every CSS file in a theme's Styles folder is automatically added to the PageModel.Styles collection, and can be easily iterated. For example:

See Theme files language syntax for more information.

СSS and LESS files are added to PageModel.Styles in the following order:

  • All CSS files in the Styles folder (in alphabetical order)
  • Styles/Theme.less (if you need more than one LESS, please use LESS internal @import directive)
  • CustomStyles.css (autogenerated by changes to Colors and styles)
  • User.css (changed via CSS customization)

JavaScript loading

JavaScripts are loaded in a similar fashion to CSS files. Every JavaScript file stored in a theme's Scripts folder is automatically added to the PageModel. Scripts are collected in alphabetical order and can be easily iterated. For example:

If you add scripts via Settings > Custom JavaScript, it can also be easily added to your page:

The jQuery library is automatically loaded for all website themes.

CSS, LESS, and JavaScript templating

Every stylesheet in a theme's Styles folder is parsed by the StringTemplate internal parser before output. There are some variables available for use in these files:

  • StaticModel.ThemeUrl – one of the most important variables for your LESS/JS/CSS files. It shows a path to your theme folder. All links to your theme images, scripts, etc. should look like this:

  • StaticModel.ThemeId – Your theme's ID (name)
  • StaticModel.ThemeVersion – theme version
  • StaticModel.ThemeBuildVersion – theme build version

On this page: 

  • No labels