An Easy Way to Customize Website Colors

We understand: it’s all about team spirit. Your swimmers wear matching swimsuits and swim caps, your parents wear team t-shirts and hats, so your swim team website should match your team’s colors, too! You can now customize website colors with SwimTopia quickly and easily.

We pride ourselves on having made SwimTopia easy to use and intuitive for everyone, but altering your site’s background and colors has been one of the more technical tasks in setting up your site. Many teams have kept the default colors rather than make a change. Our Customer Happiness Team has always been, and still is, happy to help teams with customizing their websites, but they’ve recently devised an easier, DIY, way for teams to customize their SwimTopia websites.

Teams with no volunteers or staff familiar with coding can now simply pick the colors they want for their website, and using our templates and an external website that writes the CSS code, simply copy and paste code into their SwimTopia settings to create a unique, new, team-themed look to their site.

Below we show you some examples of what’s possible. For step-by-step guides to changing your colors and using a background image see these Help Center articles:

Change your colors
Change your background to an image

Customize Website Colors Using Our New Four-Color CSS Template

If you’re not familiar with CSS, we offer an easy-to-use template for modifying your site’s colors. To make it easy to customize website colors we’ve created the template in such a way that you simply pick four base colors for your site and the template does the rest. The four colors you pick will correspond to the following areas of your site (see the image below):

A) background-color = main background color of your site
B) accent-color-1 = manage menu, main navigation, sidebars, titles/headers
C) accent-color-2 = drop-down (second tier) menus on main navigation
D) action-color= action buttons, announcement box, alerts, links

Customize Website Colors

Think about colors that work well together and work well for the different areas of the page, as well as those that will make your team feel at home on their site. The template will read HTML colors, so you’ll use this handy HTML Color-Picker to select four colors (click on “Shades” to the right of each color to see more options), or for many common colors you can even use words, like “DarkGreen”, “Purple”, etc.  See some examples below:

Team colors:  red and blue

background-color:   #b30000
accent-color-1:     MidnightBlue
accent-color-2:     #b3ccff
action-color:       Red

Team colors: green and yellow

background-color:   #009900
accent-color-1:     #ffcc00
accent-color-2:     #ffe066
action-color:       #00e600

Team colors:  orange and blue
background-color:   DarkOrange
accent-color-1:     #005ce6
accent-color-2:     #b3d9ff
action-color:       #1ac6ff

Adding a Background Image

Rather than having a background color, you can insert a photo or image as your background. We describe that process, step-by-step, in our Help Center article. You will probably still want to customize the menu and announcement colors, so you’ll also follow the steps outlined in the article about changing your colors. You’ll simply use a photo instead of a “main background color.” See some examples below:


Some of our customers have used very creative background images:

steinerstars-sm     camelotknights-sm

tidalwaves-sm     crosscreekkrakens-sm

Guide to Specific CSS Elements

If you’re familiar with CSS and would like to make extensive changes to your site, we offer a line-by-line Guide to Customizing Specific CSS Elements.

Make it Your Own!

Your website is a reflection of your team, and we want you to let your colors shine!  By using our Help Center articles, you should be on your way to customizing your site to match your team.  Check out our page with Examples of SwimTopia Websites to see how other teams have customized their sites.  If you need any help along the way, don’t hesitate to contact our Customer Happiness Team!