Page header customization

The top part of each webpage on your Wild Apricot website is called 'Page header' - it is common across all of your webpages.(Page-specific headers can be created via Custom CSS code)

Also, depending on your selected theme (See Website themes), the Page header might contain a login box.

You can customize your header background when you create your site by using the Basic Visual Setup Wizard when you create your site or by accessing the Header settings under Settings -> Look and Feel -> Basic Setup -> Header background

Customizing header background

Depending on the theme and color variation you select, different header backgrounds will be available to you. There are two groups of images. The ones that go best with you selected theme and color variation are displayed in the first group, along with the setting to have no background picture in your header. The second group are all other available header background images.

In this mode you can:

• Change header background. We have created dozens of backgrounds you are free to choose from - or you can upload your own background picture.
  o Recommended header backgrounds match your theme colors.

When you make your selection you will see a preview of your site in the bottom panel of your web browser. You can drag and drop your logo and title to further customize your header.

To accept the header background, you can click either:

• [Finish] to accept the change. This will take you to the View page for your home page
• The right arrow 'Next' to move to the next set in the Basic Visual Setup Wizard.

Clicking "Cancel" will take you out of the wizard and back to the Settings screen. None of your changes will be saved.

Note on image upload

Problem: images are not shown in File Management / Insert picture (you can only see file names) and are not displayed on your Wild Apricot website

This can happen if your images use CMYK color space instead of RGB one.

Normally web images are saved with RBG color space and images meant for printing are saved with CMYK color space. Some systems only support images with RGB color space, not CMYK. You can get more information on color spaces by clicking here.

• To determine an image's color space go to: http://regex.info/exif.cgi
• To convert an image from CMYK to the supported RGB color space you can use the free online tool found here: http://www.pixlr.com/editor/
  • Just open your image and save it as .jpg - this will automatically save it in RGB color space.

Advanced header customization

For additional options, click on Advanced Settings -> Page header link:

Your toolbar will now give you all the additional options and tools - same ones as when you edit a webpage (See Editing web pages). As well, you will have the ability to use ArtText to give your text and header a little extra luster.

One important distinction between this screen and page editing screen is how the elements are positioned. In regular page editing, elements are positioned automatically, similar to how you write a document with Microsoft Word. In page header editing (advanced mode), you can put any element (text, picture, link etc.) in any place you want - this is called 'absolute positioning'. Start by clicking on any place in your page header. Your cursor will start blinking in that place. Start typing text - it will appear right there. Now you can select text, apply colors, styles, change font size etc:

To move around this block of text or header title inserted via basic setup wizard, click on it to select it, then click and drag on the four-way arrows handle.

You can insert and move around pictures in the same way.
Also, you can use alignment buttons to automatically align your currently selected object (text or picture) horizontally and vertically.

Vertical alignment options:

Horizontal alignment options:

Finally, for the most advanced users there is an HTML button to access HTML code directly and there is also CSS customization, e.g. Sample 2. Customize header background