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)
The jQuery library is automatically loaded for all website themes.
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