All Collections
Organizer Help Center
Competition Setup & Launch
Theming: Customize your competition colors
Theming: Customize your competition colors

How do I edit the primary branding colors of my competition pages and leaderboards?

Matthew avatar
Written by Matthew
Updated over a week ago

Theming allows you to customize the appearance of your competition, from the color of the leaderboards to the display of your button CTAs. This level of customization lets you set the tone for your event, while making the experience feel seamless between your own website, and your Strongest hosted competition.

How to get to Theming

Theming is available to all organizers on our platform as part of our base package. From your competition dashboard, you can get to the Theming settings by clicking on the top level "Marketing" tab and then clicking the "Theming" tab.

From the Theming tab, you can select a theme from a list of defaults. Selecting one of them opens up the editor that allows you to customize the different aspects of a theme to create one of your own.

Breakdown of Each Variable

There are a variety of variables that can be changed to get the color scheme of your event just right. Each variable affects different buttons and text on your pages.

PRIMARY BRAND- This is the primary accent color that is used on various pages. It affects your competition title, workout and division names in side panel, linked text in your page content, and certain accents on the leaderboard, like overall rank and athlete profile names.

PRIMARY TEXT- This is the color of all the text in your content boxes. This affects the text on most pages of your event, including the landing page, workout/division pages, registration pages, and leaderboards.

PRIMARY BACKGROUND- This is the background color of most of your page content. This affects all pages, including the leaderboards page, where it determines the background color of each leaderboard row and header.

SECONDARY TEXT- This is the color of the secondary text on your pages. This is usually headers on the pages, such as the dates and the workouts/divisions headers. This also includes the color of some text on the leaderboards, such as the raw score of a workout for an athlete.

SECONDARY BACKGROUND- This is the color of the side panel on your main landing pages, the header bar on the leaderboard, and the score submission tiles.

BUTTON BACKGROUND- This is the color of your primary CTA buttons on your landing pages. Some primary CTA buttons are the "Register Now" and "Submit Score" buttons on the landing page, as well as the "Switch Divisions" button on the leaderboards.

BUTTON TEXT- This is the color of the text on your primary CTA buttons. Some primary CTA buttons are the "Register Now" and "Submit Score" buttons on the landing page, as well as the "Switch Divisions" button on the leaderboards.

SECONDARY BUTTON BACKGROUND- This is the color of the text on your secondary CTA buttons. Some secondary CTA buttons are the "Registration" button after your have registered, the "Leaderboards" button, the "Schedule" button, and the "Buy Tickets" button.

SECONDARY BUTTON TEXT- This is the color of the text on your secondary CTA buttons. Some secondary CTA buttons are the "Registration" button after your have registered, the "Leaderboards" button, the "Schedule" button, and the "Buy Tickets" button.

PAGE BACKGROUND- This is the background color of the page when viewing on a larger display, such as a monitor on desktop. This will also affects the background color of your ad carousel.

Tips to Create an Attractive, Custom Theme

  • Ensure all text is readable. Putting certain colors together may make some text hard or impossible to read.

  • Be consistent with your colors. Having more than three colors tends to lead to eye fatigue, and can make your page look too "busy".

  • Avoid using bright colors as backgrounds. Save them for accents, like the Primary and Secondary Button Backgrounds, the Primary Branding color, or the Secondary Text color.

  • Review your color changes. Check all pages once you customize your theme to ensure everything looks as expected!

Did this answer your question?