Skip to content

Tracks CSS Snippets

Copy and paste any snippet below into the Additional CSS section in the Customizer to use it on your site.

If you can’t find what you’re looking for, stop by the Tracks support forum to ask for help.

Tagline – Remove Partial Opacity

.site-footer .site-description { 
  opacity: 1; 
}

Footer – Change Background Color

.site-footer, 
.design-credit, 
.sidebar-footer { 
  background: #4bc3c4; 
}

Site Title in Footer – Hide

.site-footer h1 { 
  display: none; 
}

Site Title in Footer – Change Color

.site-footer h3 a { 
  color: #43b3c4; 
}

Site Title – Remove Partial Opacity

.site-footer h3 { 
  opacity: 1; 
}

Posts – Remove Partial Opacity

.excerpt { 
  opacity: 1; 
}

Read More Link – Change Underline Color

.more-link:after { 
  background: #43b3c4; 
}

Comment text – Make full width

.comment-content { 
  float: none; 
  width: 100%; 
  margin-top: 1.5em; 
}

Post – Increase Content Width

.entry-container { 
  padding: 0 5% !important; 
}

Post Links – Change Color

.entry-content a, 
.entry-content a:link, 
.entry-content a:visited { 
  color: #43b3c4; 
}

Posts/Pages – Change Content Background Color

.entry, 
.comments { 
  background: #43b3c4; 
}

Post Categories & Tags – Move to Right Side of Post

.entry-meta-bottom.float .entry-categories, 
.entry-meta-bottom.float .entry-tags { 
  text-align: left; 
  left: auto; 
  right: 5%; 
}

Post Categories & Tags – Keep at Bottom of Post

.entry-meta-bottom.float .entry-categories, 
.entry-meta-bottom.float .entry-tags { 
  position: static; 
  width: auto; 
  text-align: left; 
  padding: 0; 
} 
.entry-meta-bottom.float .entry-categories a, 
.entry-meta-bottom.float .entry-tags a { 
  display: inline-block; 
  margin-right: 0.375em; 
}

Post Titles – Normal Capitalization

.entry-title, .excerpt-title { 
  text-transform: capitalize; 
  letter-spacing: 0; 
}

Post Title Underline – Change Color

.excerpt-header:after, 
.entry-header:after { 
  background: #43b3c4; 
}

Post Title Underline – Remove

.excerpt-header:after, 
.entry-header:after { 
  display: none; 
}

Featured Images – Remove Partial Opacity on Posts

.entry .featured-image:after { 
  display: none; 
}

Search Bar – Remove Partial Opacity

.top-navigation .search-form-container i { 
  opacity: 1; 
}

Top Navigation – Change Background

.top-navigation, 
.menu-secondary-items { 
  background: #43b3c4; 
}

Social Media Icons – Remove Partial Opacity

.social-media-icons a { 
  opacity: 1; 
}

Secondary Menu – Change Submenu Background Color

.menu-secondary-items ul { 
  background: #fff; 
}

Secondary Menu – Remove Partial Opacity

.menu-secondary-items a { 
  opacity: 1; 
}

Secondary Menu Items – Change Color

.menu-secondary-items a, 
.menu-secondary-items a:link, 
.menu-secondary-items a:visited { 
  color: #43b3c4; 
}

Mobile Menu – Hide Toggle Button

.toggle-navigation { 
  display: none; 
}

Primary Menu – Keep Fixed at the Top of the Screen

@media all and (min-width: 800px) { 
  .menu-primary { 
    position: relative; 
    transform: none; 
    left: auto; 
  } 
  .menu-primary-items, 
  .menu-unset ul { 
    position: fixed; 
    right: 5.55%; 
    background: #222; 
  } 
}

Primary Menu – Change Submenu Background

.menu-primary-items ul { 
  background: #fff; 
}

Primary Menu – Remove Partial Opacity

.menu-primary-items a, 
.menu-unset a { 
  opacity: 1; 
}

Primary Menu – Change Link Divider Color

.menu-primary-items li:after, 
.menu-unset li:after { 
  color: #43b3c4; 
}

Primary Menu Items – Change Color

.menu-primary-items a, 
.menu-primary-items a:link, 
.menu-primary-items a:visited, 
.menu-unset a, 
.menu-unset a:link, 
.menu-unset a:visited { 
  color: #43b3c4; 
}

Logo – Hide When Mobile Menu Open

.toggled .site-title img { 
  opacity: 0; 
}

Site Title – Remove Partial Opacity

.site-header .site-title { 
  opacity: 1; 
}

Post Titles – Change Font Weight

/* Use 400 for regular and 700 for bold*/
.post-title { 
  font-weight: 700; 
}

Sticky Post – Change Background Color

.excerpt.sticky .excerpt-conttainer { 
  background: #fff;
}

Post Content – Change Font Size

.entry-content, 
.excerpt-content,
.post-content { 
  font-size: 19px; 
}

Social Media Icons – Change Size

.social-media-icons i { 
  font-size: 24px; 
}

Site Header – Change Background Color

.site-header { 
  background: #43b3c4; 
}

Background – Change Color

body { 
  background: #e5e5e5; 
}

Social Media Icons – Change Color

.social-media-icons a, 
.social-media-icons a:link, 
.social-media-icons a:visited { 
  color: #43b3c4; 
}

Footer Text – Resize Font

.site-footer .design-credit {
  font-size: 10px;
}

Widget Titles – Resize Font

.widget .widget-title {
   font-size: 22px; 
}

To customize Tracks with the CSS snippets above, please refer to our Custom CSS tutorial.

If you can’t find what you’re looking for, stop by the Tracks support forum to ask for help.

If you need help with a more detailed customization, we recommend finding a reliable WordPress developer with Codeable.

Return to Tracks Support Center