CSS Customization

See also:

CSS Customization is currently available to Community plans and higher.

With CSS customization functionality you get a fine-grain control over your Wild Apricot website template design – by customizing the CSS code of your selected theme.

The way you do it is by adding your own style description for any of the standard CSS styles in your template into the edit box on the CSS Customization page. In this way, the style settings defined in theme.css will be overridden with your definition.

When you go to the CSS Customization page for the first time you will see some basic styles already in the edit box. These are the most basic and commonly used styles (you can add other styles defined in your currently selected template manually). Basic styles include a selection of main content styles as well as separate styles for header, main content and footer.

Example: You want to change how your web links are displayed - you want them to be red and change to yellow when people place mouse cursor over it. To do this, you need to change the corresponding style block:

A, A:link, A:active, A:visited
{
}
A:hover
{
}

To this:

A, A:link, A:active, A:visited
{
  color: #FF0000;
}
A:hover
{
  color: #FFFF00;
}

We have tried to name our CSS styles in such a way so that you can understand their purpose and usage. For example, these styles:

H1.contStyleExcHeadingColored,
H2.contStyleExcHeadingColored,
H3.contStyleExcHeadingColored,
H4.contStyleExcHeadingColored
{
}

Are used to control colors (and other attributes) for all headings within the main page content area.

Another example is this set of styles:

#idHeaderContent H1.contStyleExcHeadingColored,
#idHeaderContent H2.contStyleExcHeadingColored,
#idHeaderContent H3.contStyleExcHeadingColored,
#idHeaderContent H4.contStyleExcHeadingColored
{
}

Which control similar attributes for page header area.

To see how your changes affect the site, click [Apply] button. (But remember that your changes will be immediately reflected on your website - we highly recommend doing all the style changes in advance of promoting your website to the public!)
To undo your changes, delete your styles changes and click on [Apply].
If you delete everything from the edit box, it will be automatically pre-filled with empty definition for basic styles the next time.

Advanced CSS customization

If you want to customize CSS beyond these main text styles and you want to fine-tune your site design, you need to get acquainted with Wild Apricot template. HTML template structure described below - which you can then use to customize any of the template CSS styles.

Wild Apricot HTML template structure is built with a few logical blocks - each one of each can be customized with CSS. Each block is defined as a DIV tag with a unique id. Here are the main blocks:

Let's look at each block in detail.

Header block

As shown above, main header block contains a few auxiliary ones, which can be used to customize its design - as well as some application-specific blocks.
Blocks with classes d1 - d9 are typically used to implement the desired look and feel of the selected template - by properly arranging different parts of the background elements.
Block .inner is used for indenting the content.
Blocks .headerContentHolder and #idHeaderContent - are application-specific blocks used by Wild Apricot content management system.
Block #idHeaderContent is used to override some attributes for header styles.
Note: main header color should be repeated in the .headerContentHolder style for our content management editor to work properly.

Header block is followed by #idHeaderSeparator block which can be used to visually separate the header from the main content area.

Main content area block

Contains two main blocks (columns): navigation and content.

Navigation block

Contains 2 blocks: menu itself and the login box

Menu block

Contains the surrounding blocks plus the menu itself - which is implemented via UL tag (bulleted list).

Menu list

An example of the one-level menu with the second menu item selected:

Here is the structure of the two-level menu list with the top-level menu item selected:

Finally, here is an example of the three-level menu with the top menu item selected:

Login box block

Main content blocks

Here are the main blocks surrounding all content areas:

Content block

Blocks #idPrimaryContentBlock1ContentHolder and #idPrimaryContentBlock1Content are application-specific blocks used by Wild Apricot content management system. In addition, block #idPrimaryContentBlock1Content is used to redefine some attributes for header styles

Note: main header color should be repeated in the #idPrimaryContentBlock1ContentHolder style for our content management editor to work properly.

Footer block

Is very similar to the header block.

Note: main header color should be repeated in the .footerContentHolder style for our content management editor to work properly.

There is also a #idFooterSeparator block before the footer block which can be used to separate the footer from the main content area.

Wild Apricot functionality blocks

Events summary

Events summary uses CSS-classes prefixed with .webpages-events-upcoming

Event details

Event details uses CSS-classes prefixed with .event-detail

Event registration

Event registration uses CSS classes in the table TABLE#registrationDetailsTable

Members and members directory

Members and Members directory modules use CSS classes inside the following elements:
TABLE#memberAllDataTable, DIV#searchContainer, DIV#memberDirectoryHolder, TABLE.membersTable, DIV.memberDirectorySearchArea

Confirmation windows

There are four types of confirmation windows:

Warning - container DIV.confirmWindowWarning
Info - container DIV.confirmWindowInfo
Success - container DIV.confirmWindowSuccess
Error - container DIV.confirmWindowError