CSS Customization

See also:

• Library of tweaks and examples
  • Generic Tweaks
  • Forms
  • Login & Member Related
  • Menu Tweaks
  • Web Page Appearance
• Using Firefox Firebug Extension for Advanced customization (CSS)
• Using images in CSS customization
  • Sample 1. Customize site background
  • Sample 2. Customize header background
• Working with WebDAV
  • Setting Up WebDAV in Windows Vista
  • Setting Up WebDAV in Windows XP

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 Wild Apricot CSS styles in the Editor box on the Advanced customization (CSS) page. In this way, the style settings defined in your selected template (theme.css) will be overridden with your definition.

To start with CSS Customization go to Settings / Advanced customization (CSS) and download CSS file (theme.css) for the currently selected visual theme. This file contains 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 apply and preview your changes, click [Apply & Preview] button.
To save your changes, click on [Apply & Close].

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 HTML template structure described below - which you can then customize via CSS styles.

Wild Apricot HTML template structure is built with a few logical blocks - each one 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.