SwimTopia allows you to customize the look and feel of your site by uploading your logo, header image, and selecting your team colors.
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 admin console.
» Note: The admin console is the backend of your website or team management area, only accessible by members granted Site Admin permission from their profile, or assigned to a Role with full or 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
➧ 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.
Example: Site Header Settings using Site Title, Subtitle, and Logo
➧ Site header image
This is an image you upload that displays in the Site Header. Here are some requirements and tips for an ideal result based on the requirements of the image processing library utilized:
- Image Size: The default size is 960x100 pixels, which includes 15px of padding on each side, so the header image should be no more than 930 pixels wide and 100 pixels tall. (One pixel off can result in clarity issues when the system automatically resizes it to the maximum.)
- Use the PNG format instead of JPG format to avoid loss of detail that can occur with the JPEG format
- 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 a Header Image
Customizing your SwimTopia team site can be as simple as picking two team colors: a “Primary Color” and a “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). PREMIUM
- 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. PREMIUM
- 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 that 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 repeated.
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...
This feature is available to our Premium customers.
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.
» Tip: We recommend teams utilize the Basic options to eliminate the need for a volunteer proficient in CSS to maintain this advanced coding technique. SwimTopia supports CSS in the system for teams who would like more design leeway, but we do not have the resources available to create or update CSS for our customers.
» Note: SwimTopia's sites are mobile-responsive, making it easier for your families to navigate and use your site from their mobile phones, so if CSS is used the team will need to ensure they account for what will work on mobile-responsive sites. Custom CSS takes precedence over what you choose in Basic Site Settings.
For more details on these topics:
➞ See Website: Custom Domains*
➞ See Even more advanced CSS: styling with custom classes*
➞ See Guide to Customizing Specific CSS Elements*
➞ See Google Tools: Analytics and Search Engine Optimization*
*Features available to customers on our Premium tier PREMIUM
Article is closed for comments.