Customize Race Theme: Color Scheme

Modified on 19 November

To easily jump to the theme customization page, simply begin typing “race theme” into the Search bar of the Dashboard, and after you have typed in at least three letters, search results will begin to show below the box.

Select Race > Race Website > Race Theme from the results listed below, and you will be brought directly to the race theme customization page.

You can also manually find this feature by going to the Race tab of the race dashboard, clicking on the subheading for Race Website, and then selecting Race Theme. You will then open up the second drop-down for color scheme.

Set Your Color Scheme

The Color Scheme feature allows you to choose or a create a color palette that accurately and uniquely represents your race.

RunSignup offers our Default Theme for you to select from, as well as a few other preset color schemes.

You can test to see what any of these themes would look like with your race, by clicking on the Preview Icon Button in line with the listed themes.

When you are finished viewing the preview, you can click on Leave Preview.

These preset themes can be modified, by clicking on the button for Edit.

You will likely want to create your own Custom Color Scheme in order to best represent your race.  To do this, click on the button for Add Custom Color Scheme.

Once clicked, the Custom Color Scheme window will be opened up for you.

The first field that you can set is the Scheme Name.  This can be set to anything that you would like, and it is only visible to you on the race dashboard.

The following fields are for setting the specific colors included in your custom scheme.  To change each color, simply click on the current color, and select the color that you would like to change it to from your particular color selector.  Please note, that the appearance of this color selection box may vary, depending on which computer you are on.

The Background Color designates the color that will be used for the main background of your public race page.  The Font Color designates the color of much of the main text on your public race page.

It is important to note, that when setting the Font Color, make sure that this color is a color that will be easy to read, when it is placed on top of either Color 1, Color 2, or Color 3.

Color 1 designates the color that will be used for various headings, the header donate button, the secondary button hovers (Group/Team), sub-menus, input labels, and donation page elements.

Color 2 designates the color that will be used for secondary buttons, and the active page selected on the sub-menu.

Color 3 designates the color that will be used for the menu items, the sidebar, the page footer, the primary button hovers, and tables (Results).

And Color 4 designates the color that will be used for various headings, links, the active page selected on the menu, and primary buttons.

As you are setting all of these colors, you can view your current color palette, in order to make sure that all of your colors are working well together.  Check to see that your font color is easily visible on all of your color selections, and when you have customized all of your colors, you can click on Save Color Scheme, to save the changes.

You can “Edit” your color scheme if necessary.

And, if you would like to delete any unwanted custom color schemes, then you can check off Delete, and save the setup at the bottom of the page.

Once you have the theme set up that you would like to use for your race, select that theme using the radio button below the color palette, and at the bottom of the page, select Save Setup.

You will then receive confirmation that the settings have been saved, and you can click on View Website, in order to review your race’s color scheme.

Check out these other guides for customizing your race theme:

- Race Template 

- Logo, Banner Image, Favicon 

- Custom Wording