Advanced customization warning - Reference information is provided as is Wild Apricot technical support team does not provide support for CSS customization, Javascript or visual design. (Read more)

CSS Customization

Overview

Wild Apricot provides a selection of templates (or website themes) you can use for the layout and look of your website. Behind the scenes of theses templates is our Template Engine. The Template Engine allows anyone to make customization changes through a point and click interface (see Customizing colors and styles). For web designers, you also have the ability to do more advance customization through CSS. For web designers, even further customization is possible by editing the template files directly using the Theme Overrides.

Getting Started with CSS

The global CSS files used by the system are already predefined and there are 2 CSS files in particular that you can modify indirectly:

• CustomStyles.CSS: Changes made in Settings -> Colors and styles will update this file.
• User.CSS: Any CSS code you add in Settings -> CSS Customization will update this file.

The "User.CSS" file is executed after the "CustomStyles.CSS", so CSS you add in Settings -> CSS customization has priority and will override similar changes you make in Settings -> Colors and Styles. In addition there are a few other CSS files (e.g. "Basic.CSS", "Theme.CSS") which you shouldn't modify directly. Instead the changes you make in the 2 files, Custom.CSS and User.CSS, will override all the other CSS file settings.

The CSS you use is theme-dependent so first select a theme that is closest to your preferred design look. You insert your own CSS customization code using the built-in CSS editor (see below) found in Settings -> Site look and feel -> CSS Customization

Sample Customization Examples

Advanced customization warning - Reference information is provided as is Wild Apricot technical support team does not provide support for CSS customization, Javascript or visual design. (Read more)

Site background customization
First of all you have to upload the necessary pictures to your Wild Apricot site. The easiest way to do it is via File Manager. Upload the images to the "Pictures" folder or create a new folder. Next, you need to add the custom CSS to change the background. To do this, Go to Settings > Look and Feel > CSS Customization add the required CSS coding and click [Apply & close]:

Changing individual menu item colors
Each menu item LI tag has a unique ID, you can find this by looking at the source HTML for the page (this ID is different from the page ID). In this example, it is idMainMenuItem21268. Until this page is deleted, ID will stay constant. Thus, you can assign a class to this ID which will only apply to this item, for example:

If we want to change something in styles for all submenus of this menu item, we can use this CSS code (example for the page with id="idMainMenuItem22188"):

Related Topics

• Theme Overrides
  
  

  Need more help?
  Check out our customization forums See our Partner directory to find a consultant