TABLE OF CONTENTS
- Select Race Template
- Set Your Color Scheme
- Set Your Race Logo
- Set Your Race Banner
- Set Your Custom Wording
Customize Your Race Theme
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.
Select Race Template
RunSignup has a couple of different templates that you can choose from and customize for your race. There is the Vertical Navigation Template and the Horizontal Navigation Template.
The Vertical Navigation Template will look like this:
 |  |
The Horizontal Navigation Template will look like this:
 |  |
There are three tabs that you can click through for viewing and editing the both Vertical and Horizontal Navigation Template Options. These include Design & Layout, Social Media, and Homepage Custom Content:
 |  |  |
Design & Layout
In the Design & Layout section, you can set the Homepage Hero Image Layout as either the Default Layout, where the event details overlay the image, OR as the Alternate Layout, where the event details are displayed above and below the image, with no image gradient.
 |  | |
 |  |
The Race Name Display option will allow you to either Always show race name, Hide the race name on mobile devices, or Always hide the race name:
The Header Color can be selected from your currently saved Color Scheme settings:
Please Note: If you would like to use a different color for the Header Color than those listed here, then you will need to edit and save your current Color Scheme (explained later in this tutorial) to include the color that you would like to use. After saving the new Color Scheme, then you will find the new color choice in the options for the Header Color.
If you would like to Always expand “More” menu on desktop, then you can click on the checkbox to enable this, or you can leave it unchecked to keep the More menu option.
 |  |
 |  |
In the Events Display section, you can decide whether you would like to view your events to be displayed as either a Grid or a List:
 |  |
 |  |
You can also decide whether or not you would like to Show Race Logo or Hide Race Logo in the Footer section:
 |  |
 |  |
SOCIAL MEDIA
In the Social Media section, you can have your Facebook and/or Twitter social media feeds placed in the right column on all pages by simply typing in your Facebook Username and/or Twitter Username.
They will appear like this:
 |  | |
 |  |
HOMEPAGE CUSTOM CONTENT
In the Homepage Custom Content section, you can add a tagline and a race day countdown on the homepage.
The Custom Tagline can be added by selecting Text, and then entering in the information that you would like to display in your Homepage Custom Content section. Please note, that the character limit 250, and this editor does not support HTML, CSS, or JavaScript. Please enter text only.
The Countdown Clock, can be turned on by selecting Race Day Countdown.
Here is what these features will look like:
Once you have the race template set up that you would like to use for your race, click on Save Setup at the bottom of the page.
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.
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.
And the settings available for modification will be explained in a moment.
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 Schemewindow 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.
Set Your Race Logo
Your Race Logo is likely going to be one of the most recognizable aspects of your race. It will be on flyers, posters, race merchandise, and it should also be on your race website.
To upload your race logo, open up the Race Logo section of your Race Theme page, and click on Browse.
Choose the image that you would like to upload as the race logo from your computer… and make sure that your image is either a .png, .jpeg, .jpg, or a .gif file, and make sure that the image is no larger than 5MB.
Once your image is selected, then you can scroll down to the bottom of the page… and click Save Setup.
You can remove this image at any time, by clicking Remove Current Image, and saving the setup.
Or you can overwrite this image, by simply selecting a different image from your computer, and saving the 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.
Set Your Race Banner
Your Banner Image allows you to set your race website apart from all the rest. The race banner can be used to include your race branding, and/or a snapshot from a past race, or anything that you would like to display prominently at the top of your race page.
To upload your race banner image, open up the Banner Image section of your Race Theme page, and click on Choose your image.
Choose the image that you would like to upload as the race logo from your computer, and make sure that your image is exactly 1200 pixels by 400 pixels.
Also, your image will need to be either a .png, .jpeg, .jpg, or a .gif file.
Once your image is selected, then you can scroll down to the bottom of the page, and click Save Setup.
If you do not have a unique banner image for your race, then you can select one of the pre-made race banner images provided by RunSignUp.
Simply check off the banner that you would like to use, and save the setup at the bottom of the page.
Though only one race banner can be used at a time, you can upload multiple race banner images if you would like, and you will see that they all appear at the bottom of your list of possible banner images. These custom banner images that you upload will only be available to you, on this race.
You can delete any banner images that you do not wish to keep saved anymore, by clicking Delete Banner, and saving the setup.
Once you have the race banner set up that you would like to use for your race, select that banner using the radio button, and then click on Save Setup at the bottom of the page.
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.
Set Your Custom Wording
You can customize different words used on your race website to best fit your race. You are able to customize the wording for sign up, donate, participant(s), and bib(s) in this section.
Once you have the custom wording setup how you would like, click on Save Setup at the bottom of the page.
You will then receive confirmation that the settings have been saved, and you can click on View Website, in order to review the new wording changes on your race.
When people view your site, they will see the new wording and calls to action instead:
