Guide to Customizing Specific CSS Elements

We offer an easy-to-use template for changing your site's main color scheme using four colors -- for more information, see our Help Center article, Change Color Scheme with CSS

If you'd like to tweak some of the CSS elements to your liking, here's a guide to the elements of our default CSS style sheet. 

We'd recommend you use our template to select your four main colors and create your custom CSS file, then you can start to edit individual lines of code of that file to make the changes you'd like.

To make minor tweaks to the default colors that come with SwimTopia, download this file: SwimTopia_Custom_CSS.txt 

To see examples of each individual component that is in our CSS stylesheet, see our guide below.  If you'd like to change a component to a different color, you can substitute your new color code (be sure to include the # sign).

Once you've made your edits to the CSS file, 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.  Right-click and select "Paste."  Click on "Save" at the bottom of your screen.

 

Guide to CSS Elements

As you look through the CSS file, you'll see it is divided into sections, with each section marked with a comment such as this:

/* Main Background */

Our guide below helps define the elements within each section:

Each component is shown in orange on a screenshot for demonstration purposes.  Note: The color code shown in each codeblock below is our default color; if you've changed your color template, your color code may be different. 

If you need any assistance with your CSS customization, don't hesitate to contact our Customer Happiness team.  We're here to help!

 

Main Background

body { background-color: #567AB3; }

The main background color of your site

If you'd like to use an image or photo as your background, see our Help Center article, How to Change Your Site's Background to an Image.

 

Manage Menu

#wrapper #header #top_nav_bar { background-color: #567AB3; }

Background color of the Manage Menu

 

#wrapper #header h1,
#wrapper #header h2 { color: white; }

Font color for team name in header

#wrapper #header #top_nav_bar #manage_menu #sub ul li:hover {
    color: white;
    background-color: #567AB3;
}

Manage Menu -- background color behind words of sub-level menu items, upon hover

#wrapper #header #top_nav_bar #manage_menu li.active { color: #567AB3; }

Manage Menu -- font color of top-level menu item, upon hover

 

#wrapper #header #top_nav_bar #manage_menu #sub ul li a { color: #567AB3; }

Manage Menu -- font color of sub-level menu items, while hovering on top-level menu item

#wrapper #header #top_nav_bar #manage_menu #sub ul li.spacer {
background-color: #567AB3; }

Manage Menu -- divider bar between segments of sub-level menu items, while hovering on top-level menu item

 

Main Navigation

#wrapper #navigation { background-color: #567AB3; }

Background color of main menu bar

#wrapper #navigation ul li a { color: white; }

Font color of words on main menu, including sub-menu while hovering on top-level menu item

#wrapper #navigation ul li a:hover { color: lightgray; }

Font color of main menu words upon hover

#wrapper #navigation ul li ul { background: #849EC7; }

Background color of sub-menu upon hover

#wrapper #navigation ul li ul li { border-top: 1px solid #fff; }

Color of border line above the top of each sub-menu item 

#wrapper #navigation ul li.active a { color: #567AB3; }

Font color of active main menu choice

 

Site Links

#wrapper #container a { color: #567AB3; }

Font color of hyperlinks

 

Site Titles

#wrapper #container h1,
#wrapper #container h2,
#wrapper #container h3,
#wrapper #container h4 {
    color: #567AB3;
    font-family: 'Arial Narrow', sans-serif;
}

Font color of headers and titles

#wrapper #container #secondary_navigation ul li a { color: #567AB3; }

Font color of sub-menu text that's displayed at top of a page if this page is a sub-menu page

#wrapper #container #secondary_navigation ul li a:hover { color: #567AB3; }

Font color of sub-menu text that's displayed at top of page, upon hover

 

Sidebar

#wrapper #container .snippet.narrow .wrapper .snippet_top { 
background-color: #567AB3; }

Background color of top of snippets in sidebar

#wrapper #container .snippet.narrow .wrapper .snippet_top .link 
{ background-color: #567AB3; }

Background color of "view all" at top of snippets in sidebar

 

Footer Links

#wrapper #footer ul li a { color: white; }

Font color of menu items shown in footer

#wrapper #footer ul li a:hover { color: white; }

Font color of menu items shown in footer, upon hover

 

Announcement and Buttons

#wrapper #container .snippet.announcement_snippet.normal {
    background-image: none;
    background-color: #3C9340;
}

Background color of announcement snippet

#wrapper #container a.button,
#wrapper #container input.button {
    background-color: #3C9340;
    color: white;
}

Background of action buttons: "register now" button, "Next step" button, "sign-up for jobs" button, "save assignments" button,"Checkout" button, "sign in" button, "update password"
Font color of action buttons

 

 

 

 

#wrapper #container .subnav strong.active a,
#wrapper #container .subnav strong.active.completed a {
    background-color: #567AB3;
    color: white;
}

Background color of first section designator of registration form
Font color of first section designator of registration form

 #wrapper #container .subnav strong.completed a {
    background-color: #567AB3;
    color: white;
}

Background color of designator of completed sections of registration form
Font color of designator of completed sections of registration form

 

From Shared CSS

.required_desc { background-color: lightgray; }

Background color of box that says "Indicates a required field," "Please select up to 3 events," etc.

table thead tr th { background: #567AB3; }

Background color of table headers throughout registration form, meet sign-up, "My account" best times...

 

 

a.add_item { background: #3C9340; }

Background of box to add a new item -- parent/guardian, or athlete

a.add_item:hover { background: #3C9340; }

Background of box to add a new item, upon hover -- parent/guardian, or athlete

table .hint { color: lightgray; }

Font color of (hint) listed in table headers in registration form

 

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