The website portion of your SwimTopia team management site, is highly customizable to match your team's desired look and feel. SwimTopia provides robust, yet simple interface options, to cater to any design enthusiest on your team regardless of their user design expertise.
For teams who are able to tap into their technically inclined member resources, we offer Custom CSS and other Advanced configuration options.
Covered in this Article:
- Accessing Your Site Settings
- Site Header
- Site Colors
- Site Background
- Advanced Site Settings - Custom CSS, Custom Domain Name, Google Analytics...
Accessing Your Site Settings
Look and feel elements are managed through Website > Site Settings in your Manage Team console.
>>Note: The Manage Team console, is the backend of your website or team management area, only accessible by members with a Site Admin label or a role with partial permissions.
This section of the Site Settings controls the appearance of the upper portion of each page on your team's website above the page tabs.
Using the Basic options provided below, you can:
➧ Add text in the Site Title and Subtitle fields and display an uploaded Logo
➧ Or upload a Site header image to span the width of the page (The Site Header image default size is 960x100 pixels)
➧ Site Title
This will be the large text in your header. If you don’t want a title just leave this field blank (if you have a header image uploaded, for example).
The subtitle will be smaller text below the Site Title text. This can also be left blank.
Upload your team’s logo in .jpg or .png format and check the "Show logo in site header" box to display it in your header.
>>Tip: If you want your logo to have a transparent background, upload a 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. This Header image should be 960 pixels wide and 100 pixels tall.
>>Tip: You can use an image with transparency for your header image and the site background (detailed below) will “show through” the transparent parts of the header image.
Example: Site Header Settings using Site Title, Subtitle, and Logo
Example: Site Header Settings using a Header Image
Customizing your SwimTopia team site can be as simple as picking two team colors: a “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 described below.
➧ Setting a Color
You can choose from the pre-selected colors in the color palette or select your own color by clicking “More” and then choosing by changing the hue and picking from the panel. You can also type a color code into the color field if you know of one you would like to use.
>>Tip: To find a color code, you can go to this handy Color Picker site, or you can enter "color code for red" or "RGB for red" for example, in any search engine.
➧ Reset a Color to Default
To reset any color to its default, delete what 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.
➧ Specify Detailed Colors
If you want more control over your team site’s colors, check this "Specify detailed colors" setting.
>>Note: 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 (when Site Title and Subtitle fields are used).
- 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.
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 and a color.
➧ Background Image
To display an image the covers the entire background of your site, upload a Background image.
>>Tip: For best results, you’ll want to choose an image that is at least 1600 pixels wide and at least 1000 pixels tall. If the file is too large, your pages will take longer to load.
➧ To Load an Image:
- Click the Choose File button
- Locate the image on your computer and upload it
- Click the Save button at the bottom of the Site Settings page
➧ To Delete an Image:
- Click the "Remove this background image" checkbox
- Click the Save button at the bottom of the Site Settings page
Site with Background image
➧ Background Image - Tiled
- A Tiled background image is an image that can be repeated across the background.
- You can also use a background image with transparency (alpha) together with 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
>>Note: When a background image is used, we attempt to pick a contrasting color for the Site Title and Subtitle so they are visible, but this can be modified by changing the background color as needed.
Advanced Site Settings - Custom CSS, Custom Domain Name, Google Analytics...
If you wish to use Custom CSS, implement a Custom Domain Name, Google Analytics Tracking or utilize other more advanced options, go to the Advanced tab at the top of the page.
>>Note: Custom CSS takes precedence over what you choose in Basic Site Settings.
For more details on these topics:
➞ See Website: Custom Domains