How can I change our website color scheme to match our team colors?
You can add your own custom CSS wrapper to override the default background, menu, link, text and button colors.
If you’re not familiar with CSS, we offer an easy-to-use template which allows you to change the color scheme using four colors:
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
If you’d like to use an image or photo as the background for your site, see our Help Center article, How to Change Your Site's Background to an Image.
If you’re familiar with CSS and would like to make more advanced customizations to your site, you can begin with our template, then make changes to the compiled output from the SassMeister site. Click here to see screenshots of each CSS line item in our Help Center article, Guide to Customizing Specific CSS Elements.
Using our Four-Color CSS Template
To use our CSS template to change the color scheme for your SwimTopia site, follow these instructions:
1. Visit this easy HTML Color Picker site to find the four colors you'd like to use. You can click on "Shades" to the right of a color to see different variations of that color. We've put together a few sample templates of commonly-used color schemes, which would allow you to skip a few of the following steps.
➞ We have created ready-made templates for a few common swim team colors. Scroll down to Sample Color Schemes to see if we have your colors.
2. Download and open the following file: SwimTopia_Custom_CSS_4c_template.txt
3. In the first four lines, substitute the colors you'd like to use after each colon.
$background-color: #567AB3 ;
$accent-color-1: #567AB3 ;
$accent-color-2: #849EC7 ;
$action-color: #3C9340 ;
You can either use a color name as shown on the Color Picker site (Red, Blue, ForestGreen, etc) or color code (#ff0000, #0000ff, etc). If you use a color code, be sure to include the # sign. ➞ Note: the format and syntax must not change. Simply replace the color code with another color code or the color name. The colon and semi-colon must remain in each line.
- background-color = main background color of your site
- accent-color-1 = manage menu, main navigation, sidebars, titles/headers
- accent-color-2 = drop-down (second tier) menus on main navigation (usually a lighter shade of accent-color-1 or main-color)
- action-color= action buttons, announcement box, alerts, links (usually a contrasting or bright color)
4. Once you have substituted your four colors into the top section of the text file, copy ALL of the text in the file.
5. Go to http://www.sassmeister.com/
6. Place your cursor on the left side of the screen and right-click and select "Paste."
7. You will see CSS code appear in the right side of the screen. (Note: the first four lines where your variables were defined will disappear, which is fine)
8. Copy all of the code from the right side of the screen.
9. Go back to your SwimTopia site, and go to Manage Team > Website > Site Settings > Advanced. Place your cursor in the box that says "Custom CSS." You can drag the lower right corner of the dialog box to make it bigger.
10. Right-click and select "Paste." Click on "Save" at the bottom of your screen.
11. Repeat the process (starting with #1) if you’d like to make any tweaks to the colors.
12. Be sure to save a text file with your final color selection for future reference.
Sample Color Schemes
Here are some sample color schemes, along with the CSS file that you can use if these colors match your team colors. If you would like to use these exact colors, download and open the "Compiled CSS" text file that ends with "compiled," copy all of the contents, and go to Step #9 above. If you like some of the colors but would like to make some tweaks, download and open the text file is entitled "CSS file with variables" and begin with Step #3 above.
|Team colors: red and blue
Team colors: blue and green
Team colors: green and yellow
Team colors: orange and blue
Team colors: purple and green
Team colors: yellow and black
We’re always happy to help – if you need any assistance changing your color scheme, don’t hesitate to contact our Customer Happiness team.