Event Logo Image

Basic Color Scheme

The basic color scheme should be set up in the Project Website General Settings. Below is a screenshot of the Color Scheme for this Project Website.


Emphasis and Emphasis Reverse


Button Text and Background


Textbox Text and Background


Navigation Link Text and Background

 

Advanced Page Style Designer

You can edit additional font and color elements in the Advanced Website Editing using Edit Page on Website using a tool called the Page Style Designer. This should only be done at the very end of your Project Website creation process and only after you've set up your basic color scheme in the Project Website General Settings. Below are the setting names for the most commonly requested changes. Most of the font settings use a default of 10pt.

Colors - InfoBoxText
Change the defaulted green info text on forms.
Colors - Links
Adjust the color of hyperlinked text.
Colors - HorizontalBar
Adjust the horizontal bar color.
Fonts - NavLinkSize
Increase the size of your navigation links.
Fonts - LinkSize
Adjust the size of hyperlinked text.
Fonts - MainSize
Impacts multiple pieces of text including package names on sale pages.

Spacing - NavLinkPadding
Adjust the size of the box around each navigation link. Do not adjust if you nested pages to create a dropdown.

BackgroundStyle - PageBkgdImageStyle
Change this setting to "Cover" to stretch a page background image instead of tiling it.

Backgrounds - ContentPaneBckgd
Change the background color of the content pane so it differs from your page background.

Tips and Tricks

Choose Contrasting Colors
The biggest mistake that people make when it comes to color choice is that they choose colors that do not contrast. For example if your Page Background is white and your Button Background is white and your Button Text is white it's going to seem like you don't have any buttons. Any color settings that have similar names - like Button Text and Button Background or Textbox Text and Textbox Background - should be two different colors with high contrast like black and white.

Using Color Hex Codes
If you have a specific color you want to use - such as your official school or organization colors - then you can use that color's hex code to make sure you use the exact color you want. Hex codes start with the # symbol followed by 6 characters. For example black is #000000. If you do a Google search for "color picker" you can find many tools that will help you choose a hex code. You can then insert that hex code anywhere in the Project Website that uses colors.

Edit Page Style or Edit Global Style?
We strongly recommend that you do not use the option "Edit Global Style" in the Page Style Designer tool. The Global Style is the site defaults for all pages your organization has ever or will ever create, which means using this option will overwrite settings for all existing pages. It also means that those settings that you set on the global level will no longer be editable on the project or page level.

 Copy Design to Descendants
If you want to use the same design settings for all pages for the Project Website you're working on make the changes on the landing page then use the option to "Copy Design to Descendants" when you're done.

 
A Warning about Advanced Project Website Editing

There are two ways to edit the Project Website. The first is by using the basic event software editing tools accessed using the Edit General Settings and Edit Page Settings buttons. The second is by using the advanced Online Payments editing tools accessed using the Edit Page on Website buttons. Advanced Project Website edits should only be done at the very end. Your initial work - particularly creating the right type of pages, publishing your packages, and choosing your registration settings - must be done through the basic editing tools. If you switch back and forth between the two forms of editing you will overwrite and erase advanced edits.