• CSS loading and sequence
• JavaScript loading
• CSS, LESS, and JavaScript templating
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:
<$PageModel.Styles:
{
<link href="<$it.Path$>" rel="stylesheet" type="text/css" />
}$>
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:
<$PageModel.Scripts:
{
<script type="text/javascript" language="javascript" src="<$it.Path$>" id="<$it.Id$>">
}$>
If you add scripts via Settings > Custom JavaScript, it can also be easily added to your page:
<$PageModel.InlineScripts:
{
<script type="text/javascript" language="javascript" id="<$it.Id$>">
<$it.Source$>
</script>
}$>
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:
#idHeaderContainer .d1 { background: transparent url(<$StaticModel.ThemeUrl$>/images/bg-header.gif); }
- StaticModel.ThemeId – Your theme's ID (name)
- StaticModel.ThemeVersion – theme version
- StaticModel.ThemeBuildVersion – theme build version