CSS customization - change colors

This page is a hands-on tutorial to teach you basics of CSS Customization on a practical example.
Note that you can change most colors and styles with a simple point and click interface - without CSS Customization. (See 4. Customizing colors and styles).

We used "Basic 1" standard Wild Apricot template as the starting point. Here is how a hypothetical website looks like using this template:

The end result of our customization is the same website with the same standard template but a totally different color scheme - using only CSS customization functionality available to you in the system backend:

Now to the specific customization

Customizing the page header required the following:

#idHeaderContainer .d1,
.headerContentHolder
{
  background-color: #F04915;
}

And for the divider stripe:

#idHeaderSeparator .d1
{
  background-color: #DC1B01;
}

Here is what we go to after this first step:

Let's take care of the login box in the header.

Let's change the border for the input fields:

#idLoginContainer #idLoginUserName INPUT,
#idLoginContainer #idLoginPassword INPUT
{
  border-color: #A5ACB2;
}

As well as the 'Login' button color:

#idLoginContainer #idLoginAction SPAN INPUT
{
  border: 1px solid #78B200;
  background-color: #97C734;
  color: #FFFFFF;
}

Finally, let's change the color of "Forgot password" link:

#idLoginContainer #idLoginPasswordForgot A
{
  color: #CCEC8D;
}

Here is what we now have:

Let's customize the menu as our next step:

#idMainMenuContainer .d1
{
  background-color: #8CB60C;
}

To customize the text color for top-level menu items:

#idMainMenu LI A,
#idMainMenu LI A:link,
#idMainMenu LI A:active,
#idMainMenu LI A:visited,
#idMainMenu LI A:hover,
#idMainMenu LI SPAN SPAN
{
  color: #FFFFFF;
}

And here is how to change the color for the top-level menu items when a user hovers the mouse over a particular item:

#idMainMenu LI A:hover
{
  background-color: #CCEC8D;
  color: #000000;
}

Now let's take care of the text color for the second-level menu items (subpages):

#idMainMenu LI SPAN SPAN
{
  color: #000000;
}

And now for the background color for second and third level menu items:

#idMainMenu LI UL
{
  background: #FFFADC;
}

And to change the menu item text color for the hover state:

#idMainMenu LI UL LI A:hover
{
  color: #000000;
}

Finally, let's change the color for the currently selected 2nd or 3rd level menu item color:

#idMainMenu LI UL LI SPAN SPAN
{
  color: #75990B;
}

This is what the template looks like now:

Let's change the main content area background color:

#idPrimaryContentContainer .d1,
#idPrimaryContentBlock1ContentHolder,
#idPrimaryContentBlock1ContentHolderEventAdmin
{
  background-color: #FFFFFF;
}

And finally take care of the page footer and divider stripe before the footer:

#idFooterSeparator .d1
{
  background-color: #CCEC8D;
}

#idFooterContainer .d1,
.footerContentHolder
{
  background-color: #F6F6F6;
}

Now to some more advanced customization: changing the colors for online forms and modules.

Let's start with the border for each event on the events list page:

LI.webpages-events-upcoming-event
{
  border-color: #CCEC8D;
}

And to change the colors of the background stripes above and below event summary:

.webpages-events-upcoming-event-expandlink,
.webpages-events-upcoming-event-header,
.webpages-events-upcoming-event-footer
{
  background-color: #CCEC8D;
}

Here is what it looks like now:

Let's also adjust the link colors for the event title and " Show details" link:

Regular state:

#idPrimaryContentBlock1Content .webpages-events-upcoming-event-header H3 A,
#idPrimaryContentBlock1Content .webpages-events-upcoming-event-header H3 A:visited,
#idPrimaryContentBlock1Content .webpages-events-upcoming-event-expandlink A:link,
#idPrimaryContentBlock1Content .webpages-events-upcoming-event-expandlink A:visited
{
  color: #DB1E00;
}

Mouse over and active state:

#idPrimaryContentBlock1Content .webpages-events-upcoming-event-header H3 A:active,
#idPrimaryContentBlock1Content .webpages-events-upcoming-event-header H3 A:hover,
#idPrimaryContentBlock1Content .webpages-events-upcoming-event-expandlink A:active,
#idPrimaryContentBlock1Content .webpages-events-upcoming-event-expandlink A:hover
{
  color: #FF3300;
}

Now let's look at the event details page:

This CSS code will change the background color:

.event-detail-tl,
.event-detail-tr,
.event-detail-br,
.event-detail-bl
{
  background-color: #CCEC8D;
}

So that event details page now looks like this:

And now for the event registration form:

TABLE#registrationDetailsTable TR.caption TD,
TABLE#registrationDetailsTable TR.caption TD
{
  background-color: #FFFFFF;
}
#idPrimaryContentBlock1Content TABLE#registrationDetailsTable TR.caption TD DIV,
#idPrimaryContentBlock1Content TABLE#registrationDetailsTable TR.caption TH DIV
{
  background-color: #FFFADC;
  border-color: #FFFADC;
}

Here is what it looks like now:

Let's move on to the online member application page:

With this CSS code:

TABLE#memberAllDataTable TR.caption TD,
TABLE#memberAllDataTable TR.caption TH
{
  background-color: #FFFFFF;
}
TABLE#memberAllDataTable TR.caption TD DIV,
TABLE#memberAllDataTable TR.caption TH DIV
{
  background-color: #CCEC8D;
  border-color: #CCEC8D;
}

We will customize the colored background stripes to match the new color scheme:

Now for the Member Directory:

Let's change the heading background stripe and color of links to individual records:

TABLE.membersTable TH
{
  background-color: #CCEC8D;
}
#idPrimaryContentBlock1Content A.back,
#idPrimaryContentBlock1Content A.back:link,
#idPrimaryContentBlock1Content A.back:active,
#idPrimaryContentBlock1Content A.back:visited,
#idPrimaryContentBlock1Content .membersTable A,
#idPrimaryContentBlock1Content .membersTable A:link,
#idPrimaryContentBlock1Content .membersTable A:active,
#idPrimaryContentBlock1Content .membersTable A:visited,
#idPrimaryContentBlock1Content #criteries A,
#idPrimaryContentBlock1Content #criteries A:link,
#idPrimaryContentBlock1Content #criteries A:active,
#idPrimaryContentBlock1Content #criteries A:visited
{
  border-bottom-color: #DB1E00;
  color: #DB1E00;
}
#idPrimaryContentBlock1Content A.back:hover,
#idPrimaryContentBlock1Content .membersTable A:hover,
#idPrimaryContentBlock1Content #criteries A:hover
{
  border-bottom-color: #FF3300;
  background: none;
  color: #FF3300;
}

Finally, let's redefine standard font colors for predefined styles and header/footer font colors:

General font colors:

H1.contStyleExcHeadingColored,
H2.contStyleExcHeadingColored,
H3.contStyleExcHeadingColored,
H4.contStyleExcHeadingColored
{
  color: #73AF00;
}
SPAN.contStyleExcInlineColored1
{
  color: #73AF00;
}
SPAN.contStyleExcInlineColored2
{
  color: #F04915;
}
SPAN.contStyleExcInlineHighlighted
{
  background-color: #CCEC8D;
  color: #000000;
}

Links:

A, A:link, A:active, A:visited
{
  color: #DB1E00;
}
A:hover
{
  color: #FF3300;
}

Header fonts colors:

#idHeaderContent,
#idHeaderContent TD,
#idHeaderContent P,
#idHeaderContent H1,
#idHeaderContent H2,
#idHeaderContent H3,
#idHeaderContent H4,
#idHeaderContent H5,
#idHeaderContent H6
{
  color: #FFFFFF;
}
#idHeaderContent H1.contStyleExcHeadingColored,
#idHeaderContent H2.contStyleExcHeadingColored,
#idHeaderContent H3.contStyleExcHeadingColored,
#idHeaderContent H4.contStyleExcHeadingColored
{
  color: #000000;
}
#idHeaderContent SPAN.contStyleExcInlineColored1
{
  color: #000000;
}
#idHeaderContent SPAN.contStyleExcInlineColored2
{
  color: #CCEC8D;
}
#idHeaderContent SPAN.contStyleExcInlineHighlighted
{
  background-color: #CCEC8D;
  color: #000000;
}

Footer font colors:

#idFooterContent,
#idFooterContent TD,
#idFooterContent P,
#idFooterContent H1,
#idFooterContent H2,
#idFooterContent H3,
#idFooterContent H4,
#idFooterContent H5,
#idFooterContent H6
{
  color: #000000;
}
#idFooterContent H1.contStyleExcHeadingColored,
#idFooterContent H2.contStyleExcHeadingColored,
#idFooterContent H3.contStyleExcHeadingColored,
#idFooterContent H4.contStyleExcHeadingColored
{
  color: #DC1B01;
}
#idFooterContent SPAN.contStyleExcInlineColored1
{
  color: #DC1B01;
}
#idFooterContent SPAN.contStyleExcInlineColored2
{
  color: #75990B;
}
#idFooterContent SPAN.contStyleExcInlineHighlighted
{
  background-color: #CCEC8D;
  color: #000000;
}

The end result is your Wild Apricot website fully customized with your color scheme - all done through copy-pasting pieces of CSS code into the CSS Customization page.

Now it is up to you to experiment - copy-paste pieces of the example code into your Wild Apricot site (Settings / CSS Customization).
You can also download CSS code for all the adjustments in a single file: (Customization_SiteColor_AllStyles.css).

Stay tuned - we will soon add the ability to upload your own CSS images and provide you with examples of more advanced customization! (For now, if you want to customize a site with CSS including images, give us a shout and we will help).