TOURNEY COLORS - MINI TUTORIAL

Getting Started

• On your Customize Tournament Layout webpage, you will find 7 boxes that control the colors on the pages of your tourney. If you use websites that provide pre-made tourney pages, color codes may be provided to you for input into these boxes. However, you should always ensure that your tourney pages are legible, even when color codes are provided from another source.


• When color codes are not provided to you, it is up to you to select colors that make the pages of your tourney easy to read and look great. This mini-tutorial guide is provided to assist you with understanding what each box (and color in that box) controls on the pages of your tourney.


• HTML Color Codes are standardized 6 character alpha/numeric codes associated with a multitude of available colors. These color codes may be found by clicking HTML Color Chart on your Customize Tournament Layout webpage or on various websites on the Internet.


• The 7 boxes may be any combination of colors. For illustration purposes, I will use 7 distinct colors. However, realistically 2-4 colors should be sufficient when creating a great looking tourney webpage. In the example below I have replaced the color codes with the color names to make the example easier to follow. Codes will be required on your actual tourney webpages.

The Color Boxes

• Let's get started and let's start at the bottom and work our way up. Please refer to the example pages below to note where each color appears on the pages of your tourney.

(A) Title color: Brown

• This box is the simplest one of them all. Title color ONLY controls the color of the main title of all the pages of your tourney. It is the color of your Tourney Name, Registration, Teams/Check-in and Rules titles.
(B) Small header color: Yellow

• This box controls the headings/titles in 2 areas.
  • It is the color of your titles under Tourney Info & Times on your main page.
  • It is the color of the titles at the bottom of your rules page below your game rules and league rules.
• Colors of Stargazers game rules & league rules are not controlled by these boxes and should only be changed in the rules HTML if you are familiar with HTML code.

(C) Header text color: Pink

• This box controls header text in 2 areas.
  • It is the color of your header text Tourney Info & Times on your main page.
  • It is the color of header text Check-In, Team Name - Record and Yes in the Check-in column.
• It is important that this color be legible when appearing on the background color in the next box (D).

(D) Header background color: Purple

• This box controls background color in 3 areas.
  • It is the background color for the text Tourney Info & Times on your main page.
  • It is the background color for the registration box on the register page.
  • It is the background color for the header text Check-In, Team Name - Record and Yes in the Check-in column.
• It is important that this background color allow legible text in colors chosen in boxes (C) and (F).

(E) Text color: Green

• This box controls all of your tourney text except titles, headings and links. This includes text on the main page, register page (on header background and on background), check-in page and the rules page.
• It is important that the text color be legible on background colors chosen in boxes (D) and (G).

(F) Link color: Red

• This box controls most of the text that is a link to another website or additional information. Links appear on all of the pages of your tourney.
• It is important that the link color be legible on background colors chosen in boxes (D) and (G).

(G) Background color: Blue

• This box controls your tourney webpage background color. If you use a Background Image URL, this image will override your background color on all of the pages of your tourney with one exception.
• The background color will appear on your Check-in page as background for your table of teams, making it much easier to read if you have a "busy" Background Image.
• If you leave this box blank, the Background Image will be the background for your table of teams.

Summary

• To summarize, the easiest approach is to choose only 2 colors (one light, one dark). Use one color for your text (Boxes A,B,C,E & F) and one color for your backgrounds (Boxes D & G). As you become more comfortable with choosing colors, you may then increase the number of colors to 3 or more.


• After you have chosen your colors and added your Custom HTML, do a sight test of the pages in your tourney. Make sure everything is legible and keep in mind that some members do not see as well as others.


• Avoid difficult to read color combinations.


• After you have members register for your tourney, do one final sight check on the Check-in page to ensure legibility of team information in the team table.


• The colors chosen for this example are extreme to highlight the various sections of your tourney pages. They do not represent a quality example of color coordination.


• If you have an questions or suggestions, please contact tropical_stargazer@yahoo.com

Last Updated 27-July-09