Change Color Scheme with CSS

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

SwimTopia_CSS_variables-adj.png

 

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

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

Compiled CSS file
CSS file with variables

Team colors: blue and green

background-color:   #0040ff
accent-color-1:     #33cc33
accent-color-2:     #99e699
action-color:       Blue

Compiled CSS file
CSS file with variables

Team colors: green and yellow

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

Compiled CSS file
CSS file with variables

 
 

Team colors: orange and blue

background-color:   #ff8000
accent-color-1:     #005ce6
accent-color-2:     #b3d9ff
action-color:       #1ac6ff

Compiled CSS file
CSS file with variables

 

Team colors: purple and green

background-color:   Indigo
accent-color-1:     #009933
accent-color-2:     #9ae59a
action-color:       #8600e6

Compiled CSS file
CSS file with variables

 
 

Team colors: yellow and black

background-color:   #ffec00
accent-color-1:     Black
accent-color-2:     #bcb88f
action-color:       #e6d000

Compiled CSS file
CSS file with variables

 

We’re always happy to help – if you need any assistance changing your color scheme, don’t hesitate to contact our Customer Happiness team

 

 

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk