Guide to Customizing Specific CSS Elements – SwimTopia Help Center

If you'd like to tweak some of the CSS elements even more to your liking and have a volunteer proficient in CSS, here's a guide to the elements of our default CSS stylesheet.

» Note: We support 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. We offer an easy-to-use template for changing your site's main color scheme. See ➞ our Help Center article, Site Settings: Header, Logo, Colors, and Background Images.

Our Color Scheme Template

/* Main Background */
body {
background-color: #567AB3;
}

/* Manage Menu */
#wrapper #header #top_nav_bar {
background-color: #567AB3;
}

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

#wrapper #header #top_nav_bar a {
color: white;
}

#wrapper #header #top_nav_bar #manage_menu.active {
background-color: white;
color: #567AB3;
}

#wrapper #header #top_nav_bar #manage_menu.background {
background-color: white;
}

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

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

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

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

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

/* Main Navigation */
#wrapper #navigation {
background-color: #567AB3;
}

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

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

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

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

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

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

/* Site links */
#wrapper #container a {
color: #3C9340;
}

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

#wrapper #container #secondary_navigation ul li a {
color: #3C9340;
}

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

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

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

#wrapper #container .snippet.twitter_profile a {
color: #567AB3 !important;
}

/* Footer links */
#wrapper #footer ul li a {
color: white;
}

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

/* Announcement and buttons */
#wrapper #container .snippet.announcement_snippet.normal {
background-image: none;
background-color: #3C9340;
}

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

#wrapper #container .subnav strong a {
background-color: #3C9340;
color: white;
}

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

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

/* from shared.css */
.required_desc {
background-color: lightgray;
}

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

a.add_item {
background: #3C9340;
}

a.add_item:hover {
background: #567AB3;
}

table tbody tr:hover {
background: inherit;
}

table .hint {
color: lightgray;
}

.entry tr {
border-bottom: 1px solid lightgray;
}

.narrow img {
max-width: 280px;
}

.narrow.sponsor_snippet .snippet_main {
text-align: center;
}

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).

Adding Your Custom CSS

Once you've made your edits to the CSS file, go back to your 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:

Main Background
Manage Menu
Main Navigation
Site Links
Site Titles
Sidebar
Footer Links
Announcement and Buttons
From Shared CSS

Each component is shown in orange on a screenshot for demonstration purposes.

» Note: The color code shown in each code block below is our default color; if you've changed your color template, your color code may be different.