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. Different levels of headings, for example, are defined using H1, H2, H3, or H4 styles. 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.
You can customize the appearance of your Wild Apricot site by adding your own custom CSS code.
Wild Apricot does not supply CSS code or validate your code. If you need assistance with CSS coding, consider contacting one of our partners.
Customizing CSS
You can customize the CSS used to control the appearance of your site in several different ways:
- by choosing different settings from the Colors and styles screen
- by entering CSS code in the Advanced section of the settings for individual gadgets, layouts, and placeholders
- by entering CSS code on the CSS customization screen
Only full administrators or full website editors – not restricted website editors – can access the Colors and styles screen or the CSS customization screen.
The settings you choose on the Colors and styles screen are stored in a CustomStyles.css file and will override the CSS in your theme. The CSS code you enter within gadget, layout, and placeholder settings, and on the CSS customization screen, is stored in a User.css file and will override both the theme settings and the CustomStyles.css file.
You can also customize your site by modifying or replacing individual theme files. For more information, see Theme overrides.
Entering CSS customization code
To enter CSS customization code, follow these steps:
- Click the CSS menu option within the Website module. To access the Website module from the main admin menu, click Website.
- In the Editor field, enter the code for your customization. For instructions on using the code editor, click here.
- To check for errors in your code, click the Validated customized CSS link or click the checkmark icon beside it.
- Click Save to preview your customization within the preview area on the right.
- When you are finished making your changes, click Cancel.
Instead of entering CSS code here, you upload a CSS file containing multiple customizations to the Resources folder from the Files screen.
CSS customization examples
- Changing menu colors
- Changing button colors
- Customizing the login icon
- Changing the page width
- Changing the widget width
- Customizing blogs using CSS
- Customizing forums using CSS and JavaScript
- Removing the recurring payments text from the membership form
