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 style sheet.
» Note: SwimTopia supports 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.
Covered in this Article:
SwimTopia Color Scheme Template
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).
Adding Your Custom CSS
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.
➧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
|
hcmanagewebsitesitesettingsbasic hcmanagewebsitesitesettingsadvanced
Comments
0 comments
Please sign in to leave a comment.