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

body-background-adj.png

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

manage-menu-top_nav_bar-backgroundr-adj.png 

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

Font color for team name in header

manage-menu-header-h1-header-h2-adj.png

#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

manage-menu-header-top_nav_bar-manage_menu-sub-ul-li-hover-backgroundr-adj.png

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

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

 manage-menu-header-top_nav_bar-manage_menu-li-activer-adj.png

#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

manage-menu-header-top_nav_bar-manage_menu-sub-ul-li-ar-adj.png

#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

manage-menu-header-top_nav_bar-manage_menu-sub-ul-li-spacerr-adj.png

 

Main Navigation

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

Background color of main menu bar

main-navigation-navigation-background-adj.png

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

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

main-navigation-navigation-ul-li-a2-adj.png

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

Font color of main menu words upon hover

main-navigation-navigation-ul-li-a-hover-adj.png

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

Background color of sub-menu upon hover

main-navigation-navigation-ul-li-ul-backgroundr-adj.png

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

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

main-navigation-navigation-ul-li-ul-li-border-topr-adj.png

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

Font color of active main menu choice

main-navigation-navigation-ul-li-active-a-adj.png

 

Site Links

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

Font color of hyperlinks

site-links-container-ar-adj.png

 

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

site-titles-h1-h2-h3-h4r-adj.png

#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

site-titles-secondary_navigation-ul-li-ar-adj.png

#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

site-titles-secondary_navigation-ul-li-a-hoverr-adj.png

 

Sidebar

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

Background color of top of snippets in sidebar

sidebar-snippet-narrow-wrapper-snippet-top-backgroundr-adj.png

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

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

sidebar-snippet-narrow-wrapper-snippet-top-link-backgroundr-adj.png

 

Footer Links

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

Font color of menu items shown in footer

footer-links-footer-ul-li-a-adj.png

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

Font color of menu items shown in footer, upon hover

footer-links-footer-ul-li-a-hover-adj.png

 

Announcement and Buttons

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

Background color of announcement snippet

announcement-and-buttons-snippet-announcement_snippet-normal-background-adj.png

#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

announcement-and-buttons-container-input-button-background-adj.png

 

announcement-and-buttons-container-input-button-background-c-adj.png

 

announcement-and-buttons-container-input-button-background-d-adj.png

 

announcement-and-buttons-container-input-button-background-b-adj.png 

 

announcement-and-buttons-container-input-button-background-e-adj.png

#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

announcement-and-buttons-subnav-strong-active-completed-a-background-adj.png

 #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

announcement-and-buttons-subnav-strong-completed-a-background-adj.png

 

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.

from-shared-css-required-desc-background-adj.png

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

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

from-shared-css-table-thead-tr-th-background-adj.png

 

from-shared-css-table-thead-tr-th-background-b-adj.png 

 

from-shared-css-table-thead-tr-th-background-c-adj.png

a.add_item { background: #3C9340; }

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

from-shared-css-a-add_item-background-adj.png

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

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

from-shared-css-a-add_item-hover-background-adj.png

table .hint { color: lightgray; }

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

from-shared-css-table-hint-adj.png

 

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