Customizing your site’s appearance with Site Settings

Customize your SwimTopia site to use your team’s colors using Manage Team > Website > Site Settings. In addition to your team colors, Site Settings allows you to use an image for your background, configure your site’s header, and more, so you can make your SwimTopia site look the way you want. 

Site Header

This section of the Site Settings controls the appearance of the upper portion of your site’s pages. You can use text for the Site Header with the Site Title and Subtitle fields and display a logo which you upload. Or you can upload a header image instead. You can do all of these at once, but you’ll probably want to choose one or the other.

Site Header Settings using Site Title, Subtitle, and Logo

Site using Site Title, Subtitle, and Logo

Site Title

This will be the large text in your header. If you don’t want to display this—if you have a header image uploaded, for example—just leave this field blank.


The subtitle will be smaller text below the site title text.


Upload your team’s logo and check the “Show logo in site header” box to display it. If you want your logo to have a transparent background, you need to use the PNG format. For best results, your logo should be no more than 100px in height.


Site header image

This is an image you upload that displays in the site header. It’s probably best to choose between using a header image OR using a site title/subtitle/logo. This Header image should be 960 pixels wide and 100 pixels
Site Header Settings using a Header Image

Site Header Image on your site

You can use an image with transparency for your header image and the site background will “show through” the transparent parts.

Site Colors

Customizing your SwimTopia site can be as simple as picking two team colors: “Primary Color” and “Secondary Color.” The rest of the colors used for various elements in your site are derived from these two colors. If you want to customize the colors used on your site for specific elements, check the “Specify detailed colors” option (and see below).

Setting a color

You can choose a color from the pre-selected colors from the color palette or choose your own by clicking “More” and then choosing by changing the hue and picking from the panel. You can also type a color into the color field.

To reset any color to its default, just delete whatever is in the color field (make it blank). If you clear all the fields, SwimTopia uses the default blue and green colors for your site.

Picking a color from the color picker

Site Background

There are a few options for your site background. You can upload an image that covers the whole background area, you can upload an image that repeats, or you can combine the two using a background with transparency with a color.

Site Background image

To display an image the covers the entire background of your site, upload a Background image. For best results, you’ll want to choose an image that is at least 1600 pixels wide and at least 1000 pixels tall. You don’t want to go overboard though because if the file is too large, your pages will take longer to load.


To load an image:

  1. Click the “Choose File” button
  2. Locate the image on your computer and upload it
  3. Click the “Save” button at the bottom of the Site Settings page

Site with Background image

To delete an image:

  1. Click the “Remove this background image” checkbox
  2. Click the “Save” button at the bottom of the Site Settings page

Site Background image, tiled

You can use a background image that is tiled, that is, an image that can be repeated across the background.

You can also use a background image with transparency (alpha) together with choosing a background color. The background color will “show through” the transparent parts of of the background image. You can also have this image repeat.

The default background (the wave) is such an image, but it does not repeat.

Site with a tiled background image & color

Detailed Colors

If you want more control over your site’s colors, check the “Specify detailed colors” setting. To reset any of these, just delete the code in the color field of the element in question. In other words, if the field is empty, SwimTopia uses the color derived from the Primary and Secondary color settings.

  • Site title color: site title in the header (if the Site Title and Subtitle are completed).
  • Menu color: main menu background as well as the system menu background.
  • Menu dropdown color: main menu’s dropdown background.
  • Headline color: titles of Page content area snippets and any “headings” elements (i.e., “H1”) in those snippets.
  • Link Color: links in your site in the Page content and Template content areas of your site. Does not affect menus and other elements outside the main content areas.
  • Announcement snippet color: background of Announcement snippets (also has a subtle background pattern).
  • Primary button color: color of your site’s buttons, except for Meet and Job signup buttons.
  • Snippet top color: background of the sidebar’s Snippet titles.
  • System menu color: System menu background and the highlight of the selected item in its dropdown. Until you set the System menu color, this is the same as the Menu color.
  • System menu dropdown color: background of the System menu dropdown.
  • Content background color: background of the combined page and template content areas.


Custom CSS

You can still use custom CSS if you need to, the custom CSS from the Advanced Site Settings  takes precedence over what you choose in Basic Site Settings.

Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk