Online forms look and feel customization via CSS

Customization examples

All Wild Apricot online forms (such as online member application, member profile, event registration and donations) use the same CSS classes so that you can easily customize them to look similar.
For example, Text Field class (regular text entry field) will apply to Member Application form as well as to Event Registration and Donation forms.

Here is another CSS code example that will set all mandatory field labels (that you can find on all forms) to blue color:

DIV.generalFieldsContainer DIV.fieldContainer STRONG.mandatoryLabel
{
  color: #0000FF;
}

Let's look at various forms elements using specific examples:

Example#1: Customizing Wild Apricot forms.

In this and following examples we will list pieces of code that you can use in order to change the appearance from the original screenshot (on the left) to the customized one (on the right). Numbers on screenshots correspond to appropriate numbered CSS code sections listed below.

1. Member application page title

If you need to customize a specific page only, you must specify a unique ID for this page as shown in example below.
You can find this ID in a source code near DIV with id='idPrimaryContentBlock1Content':

This will set the color of page title to red on Member Application page only.

#idPrimaryContentBlock1Content #idMemberApplicationWizardContainer H1.pageTitle
{
  color: #FF0000;
}

And this will set the color of all page titles to red.

#idPrimaryContentBlock1Content H1.pageTitle
{
  color: #FF0000;
}

2. All Info-box containers

#idPrimaryContentBlock1Content #idInfoContainer DIV.cornersContainer DIV.c3,
#idPrimaryContentBlock1Content #idInfoContainer DIV.cornersContainer DIV.c4,
#idPrimaryContentBlock1Content #idInfoContainer DIV.infoContainer
{
  border-left-color: #0000FF;
  border-right-color:  #0000FF;
}
#idPrimaryContentBlock1Content #idInfoContainer DIV.cornersContainer DIV.c1,
#idPrimaryContentBlock1Content #idInfoContainer DIV.cornersContainer DIV.c2,
#idPrimaryContentBlock1Content #idInfoContainer DIV.cornersContainer DIV.c3,
#idPrimaryContentBlock1Content #idInfoContainer DIV.cornersContainer DIV.c4,
#idPrimaryContentBlock1Content #idInfoContainer DIV.infoContainer
{
  background-color: #0000FF;
}

2.a Info-box container on Member Application page only

#idPrimaryContentBlock1Content #idMemberApplicationWizardContainer #idInfoContainer DIV.cornersContainer DIV.c3,
#idPrimaryContentBlock1Content #idMemberApplicationWizardContainer #idInfoContainer DIV.cornersContainer DIV.c4,
#idPrimaryContentBlock1Content #idMemberApplicationWizardContainer #idInfoContainer
{
  border-left-color: #0000FF;
  border-right-color:  #0000FF;
}

#idPrimaryContentBlock1Content #idMemberApplicationWizardContainer #idInfoContainer DIV.cornersContainer DIV.c1,
#idPrimaryContentBlock1Content #idMemberApplicationWizardContainer #idInfoContainer DIV.cornersContainer DIV.c2,
#idPrimaryContentBlock1Content #idMemberApplicationWizardContainer #idInfoContainer DIV.cornersContainer DIV.c3,
#idPrimaryContentBlock1Content #idMemberApplicationWizardContainer #idInfoContainer DIV.cornersContainer DIV.c4,
#idPrimaryContentBlock1Content #idMemberApplicationWizardContainer #idInfoContainer DIV.infoContainer
{
  background-color: #0000FF;
}

3. Info-box labels

#idPrimaryContentBlock1Content #idInfoContainer DIV.infoContainer DIV.infoTitle
{
  color: #FF9900;
}

4. Info-box text

#idPrimaryContentBlock1Content #idInfoContainer DIV.infoContainer DIV.infoText
{
  color: #FFFF00;
}

5. Current process step title

#idPrimaryContentBlock1Content H2.stepTitle
{
  color: #007700;
}

6. Form area title

#idPrimaryContentBlock1Content DIV.generalFormContainer DIV.formTitleContainer H3.formTitle
{
  color: #FF7777;
}

7. Mandatory fields legend

#idPrimaryContentBlock1Content DIV.mandatoryFieldsTitle
{
  color: #7777FF;
}

8. Horizontal separator of form area

#idPrimaryContentBlock1Content DIV.generalFormContainer DIV.formTitleOuterContainer
{
  border-bottom-color: #990099;
}

9. Form section dividers box

#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.captionContainer
{
  background-color: #00FF00;
}

10. Form section dividers text

#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.captionContainer H4
{
  color: #000099;
}

11. Mandatory indicator

#idPrimaryContentBlock1Content SPAN.mandatorySymbol
{
  color: #FF00FF;
}

12. Field label (for mandatory fields)

#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.fieldContainer STRONG.mandatoryLabel
{
  color: #9900FF;
}

13. Text entry field

#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.textFieldContainer DIV.fieldBody INPUT.typeText
{
  border-color: #CC9900;
}

14. Field label (non-mandatory fields)

#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.fieldLabel
{
  color: #0099FF;
}

15. Option buttons choices

#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.groupContainer DIV.radioGroupContainer DIV.fieldBody LABEL
{
  color: #FF9900;
}

16. Checkboxes choices

#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.groupContainer DIV.fieldBody LABEL
{
  color: #559955;
}

17. Filename selection field

#idPrimaryContentBlock1Content #idPictureUploaderContainer DIV.uploadContainer INPUT
{
  border-color: #9900FF;
}

18. Filename information

#idPrimaryContentBlock1Content #idPictureUploaderContainer DIV.uploadContainer
{
  color: #00FFFF;
}

19. Wild Apricot software terms of use description. Inherited from general checkboxes by default.

#idPrimaryContentBlock1Content #idTermsOfUseContainer DIV.checkboxGroupContainer DIV.fieldBody LABEL
{
  color: #005599;
}

20. Divider after the form area and before the navigation controls

#idPrimaryContentBlock1Content DIV.navigationOuterContainer
{
  border-top-color: #995500;
}

21. Link for 'Cancel'

#idPrimaryContentBlock1Content DIV.navigationOuterContainer DIV.left A,
#idPrimaryContentBlock1Content DIV.navigationOuterContainer DIV.left A:link,
#idPrimaryContentBlock1Content DIV.navigationOuterContainer DIV.left A:active,
#idPrimaryContentBlock1Content DIV.navigationOuterContainer DIV.left A:visited
{
  color: #009900;
}

#idPrimaryContentBlock1Content DIV.navigationOuterContainer DIV.left A:hover
{
  color: #000099;
}

22. Link for previous step ('Back')

#idPrimaryContentBlock1Content DIV.navigationOuterContainer DIV.right A,
#idPrimaryContentBlock1Content DIV.navigationOuterContainer DIV.right A:link,
#idPrimaryContentBlock1Content DIV.navigationOuterContainer DIV.right A:active,
#idPrimaryContentBlock1Content DIV.navigationOuterContainer DIV.right A:visited
{
  color: #000099;
}

#idPrimaryContentBlock1Content DIV.navigationOuterContainer DIV.right A:hover
{
  color: #009900;
}

23. Navigation buttons

#idPrimaryContentBlock1Content DIV.navigationOuterContainer DIV.right INPUT.nextButton
{
  color: #990000;
}

Example #2: Member Application Form

(greyed out numbers correspond to CSS code already reviewed above)

24. Introduction text

#idPrimaryContentBlock1Content DIV.introContainer
{
  color: #000099;
}

25. Member application "Member level" (specific to this form)

#idPrimaryContentBlock1Content #idMemberApplicationWizardContainer DIV.generalFieldsContainer STRONG.labelTitle
{
  color: #009900;
}

26. Member level details - pricing (specific to this form)

#idPrimaryContentBlock1Content #idMemberApplicationWizardContainer DIV.generalFieldsContainer STRONG.labelSubTitle
{
  color: #990099;
}

Example #3: Event Registration

27. Page title - link to event details (Specific to event registration)

#idPrimaryContentBlock1Content #idEventPageContainer #idEventRegistrationContainer H1.pageTitle A,
#idPrimaryContentBlock1Content #idEventPageContainer #idEventRegistrationContainer H1.pageTitle A:link,
#idPrimaryContentBlock1Content #idEventPageContainer #idEventRegistrationContainer H1.pageTitle A:active,
#idPrimaryContentBlock1Content #idEventPageContainer #idEventRegistrationContainer H1.pageTitle A:visited
{
  color: #FF00FF;
}

#idPrimaryContentBlock1Content #idEventPageContainer #idEventRegistrationContainer H1.pageTitle A:hover
{
  color: #FF77FF;
}

28. Field title (Specific to event registration)

#idPrimaryContentBlock1Content #idEventPageContainer #idEventRegistrationContainer DIV.generalFieldsContainer H5.fieldTitle
{
  color: #9900FF;
}

Example #4: Event Registration

29. Multi-line text entry field

#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.textFieldContainer DIV.fieldBody TEXTAREA
{
  border: 1px solid #CCCC00;
}

30. Field with a link

#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.groupContainer DIV.fieldBody LABEL A,
#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.groupContainer DIV.fieldBody LABEL A:link,
#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.groupContainer DIV.fieldBody LABEL A:active,
#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.groupContainer DIV.fieldBody LABEL A:visited
{
  color: #FF00FF;
}
#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.groupContainer DIV.fieldBody LABEL A:hover
{
  color: #FF0099;
}

Example #5: Event Registration

31. Warning box

#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.confirmWindowWarning DIV.cww1,
#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.confirmWindowWarning DIV.cww2
{
  background-color: #009900;
}
#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.confirmWindowWarning DIV.cww3,
#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.confirmWindowWarning DIV.cww4,
#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.confirmWindowWarning DIV.cww-inner
{
  border-left-color: #009900;
  border-right-color: #009900;
  background-color: #CCFFCC;
  color: #FFFF00;
}
#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.confirmWindowWarning P
{
  color: #777700;
}

32. Field values for text fields

#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.simpleTextContainer DIV.labeledTextContainer DIV.fieldBody
{
  color: #CC5555;
}

33. Text messages within form area

#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.simpleTextContainer DIV.onlyTextContainer DIV.fieldBody
{
  color: #5555CC;
}

34. Field values for hyperlinked fields

#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.simpleTextContainer DIV.labeledTextContainer DIV.fieldBody A,
#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.simpleTextContainer DIV.labeledTextContainer DIV.fieldBody A:link,
#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.simpleTextContainer DIV.labeledTextContainer DIV.fieldBody A:active,
#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.simpleTextContainer DIV.labeledTextContainer DIV.fieldBody A:visited
{
  color: #55CC55;
}
#idPrimaryContentBlock1Content DIV.generalFieldsContainer DIV.simpleTextContainer DIV.labeledTextContainer DIV.fieldBody A:hover
{
  color: #339933;
}

Add Labels
Enter labels to add to this page: Looking for a label? Just start typing.