Tracks CSS Snippets

To customize Tracks with the CSS snippets below, 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.

Categories

Header - Change Background Color

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

Changes the background color of the header.

 Site Title (or Logo) - Remove Partial Opacity

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

Makes the site title or logo (if you're using one) opaque. This means they won't become brighter when hovered over.

Site Title - Increase Font Size

.site-title {
  font-size: 37px;
  line-height: 51px;
}

Changes the size of the site title in the top-left of the site.

Site Title/Logo - Center

.title-info {
  width: 100%;
  text-align: center;
}
.site-header .site-description {
  position: static;
  text-align: center;
}

Horizontally centers the site title or logo, and the tagline too.

Site Title - Change Color

.site-title a,
.site-title a:link,
.site-title a:visited {
  color: #43b3c4;
}

Changes the color of the site title in the top-left corner of the site.

Logo - Hide When Mobile Menu Open

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

The logo normally stays in the top-left of the site when the menu is opened, but this code will hide it only when the menu is open (at mobile screen widths).

Logo - Increase Size

.site-title img {
  max-height: 999px;
  max-width: 999px;
}

Changes the maximum width and height of the logo to 999px. Increase or decrease the values to modify the logo size.

Tagline - Change Color

.site-header .site-description {
  color: #43b3c4;
}

Changes the color of the tagline.

Tagline - Increase Font Size

.site-header .site-description {
  font-size: 21px;
}

Increases the size of the tagline.

Primary Menu - Remove Mobile Animations

.menu-primary,
.menu-primary-tracks,
.title-info .site-title,
#menu-primary-items,
#site-header .site-description {
  transition: none;
}

Removes animations, so the menu will just appear when the toggle button is clicked.

Primary Menu - Change Link 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;
}

Changes the color of the menu items in the Primary Menu location.

Primary Menu - Change Divider Color

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

Changes the color of the dividers (/) between each menu item.

Primary Menu - Center

@media all and (min-width: 800px) {
  .menu-primary-items,
  .menu-unset {
    text-align: center;
    clear: left;
    margin: 0 auto;
  }
}

Horizontally centers the Primary menu.

Primary Menu - Remove Partial Opacity

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

Makes the menu items in the Primary menu brighter by making them opaque.

Primary Menu - Change Submenu Background Color

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

Changes the background color of submenus to white. Change the "#fff" value to another color code to change the color.

Primary Menu - Keep Fixed at Top of 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;
  }
}

Keeps the primary menu fixed in the same place on the screen even when scrolling down the page.

Mobile Menu - Remove

.toggle-navigation {
  display: none;
}

Completely removes access to Primary menu at mobile screen widths.

Mobile Menu - Change Background Color

.menu-primary,
.menu-primary-tracks {
  background-image: linear-gradient(#fff 24px, transparent 24px, transparent 48px);
}

Makes background color of menu white when opened at mobile screen widths.

Mobile Menu - Change Button Color

.toggle-navigation {
  color: black;
}

Changes the color of the toggle button used to open the mobile menu to black.

Secondary Menu - Change Link Color

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

Changes the color of the menu items in the Secondary Menu.

Secondary Menu - Remove Partial Opacity

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

Makes the menu items in the Secondary menu brighter by making them opaque.

Secondary Menu - Change Submenu Background Color

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

Changes the background color of submenus to white. Change the "#fff" value to another color code to change the color.

Social Media Icons - Remove Partial Opacity

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

Makes the social media icons opaque. This means they will be bright before being hovered over.

Social Media Icons - Change Color

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

Changes the color of the social media icons.

Search Bar - Remove Partial Opacity

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

Makes the search bar icon opaque. This means it will be bright before being hovered over.

Top Navigation - Change Background

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

Changes the background color of the top navigation section. The top navigation contains the secondary menu, search icon, and social media icons above the Primary menu.

Body

Background - Change to White

body,
.excerpt,
.main,
.menu-primary ul,
#site-header {
	background: #fff;
}
#menu-primary-items a,
#title-info a {
	color: #000;
}

Changes the background of the body of Tracks to white, and also changes the menu and title colors to black so they stay visible. See the "Top Navigation - Change Background" and "Footer - Change Background Color" snippets to change the background color of the very top of the site and footer too.

Posts/Pages

Featured Images - Remove Partial Opacity on Posts

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

Makes the Featured Image on Post pages opaque. This means the image will won't become brighter when hovered over.

Featured Image - Hide on Post pages

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

Hides Featured Images on the individual Post pages, while leaving them displayed on the Blog.

Featured Image - Change Height

.entry .featured-image {
  padding-bottom: 60%;
}

Makes Featured Images on Posts and Pages taller. Increase/decrease the 60% value to further increase or decrease the height of the Featured Image.

Post Title Underline - Change Color

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

Changes the color of the short underline used for post titles on the Blog, Posts, and Pages.

Post Title Underline - Remove

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

Removes the short underline under post titles on the Blog, Posts, and Pages

Post Title - Change Color

.singular-post .entry-title {
  color: #43b3c4;
}

Changes the color of the Post title on the individual Post pages. Does not affect Post titles on the Blog and archive pages, or titles on Pages.

Page Titles - Hide

.singular-page .entry-header {
  display: none !important;
}

Hides the titles on Pages.

Post/Page Title - Reduce Font Size

.singular .entry-title {
  font-size: 24px;
}

Reduces the font size of titles on Posts and Pages.

Post Titles - Normal Capitalization

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

Makes Post and Pages titles capitalized normally rather than all uppercase. Also removes additional letter spacing used for styling all-caps.

Post Titles - Reduce Font Weight

.entry-title, .excerpt-title {
  font-weight: 400;
}

Post titles are currently bold. This CSS un-bolds them (reduces their "weight").

Post Tags & Categories - Remove

.entry-categories, .entry-tags {
  display: none;
}

Removes the tags and categories from Post pages.

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;
}

Keeps the Post categories and tags at the bottom of the Post, rather than floating them to the left of the content.

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%;
}

Moves the Post categories and tags to the right of the content instead of floating to the left.

Pages - Dark Background & Light Text

.singular-page .entry,
.singular-page .comments {
  background: #222;
}
.singular-page .entry-content,
.singular-page .entry-title,
.singular-page .comments,
.singular-page .comments a,
.singular-page .comments a:link,
.singular-page .comments a:visited,
.singular-page .entry-content a,
.singular-page .entry-content a:link,
.singular-page .entry-content a:visited {
  color: #fff;
}

Makes the background of the Page content the same dark gray as the background (including comments section), and makes the text light so it stays readable.

Posts/Pages - Change Content Background Color

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

Changes the background color of the body of Pages and Posts (including the comments).

Image Captions - Increase Font Size

.entry .wp-caption-text {
  font-size: 16px;
  line-height: 1.5;
}

Increases the font size of image captions in Posts and Pages.

Post Links - Change Color

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

Changes the color of links within the Post and Page content.

Post - Increase Content Width

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

Reduces the padding on the sides of the Post, so the content area becomes much wider. It's recommended that you also use the "Post Categories & Tags - Keep at Bottom of Post" snippet to keep the content from running into the tags/categories.

Tables - Change Border Color

.entry-content th,
.entry-content td {
  border-color: #43b3c4;
}

Changes the border color of all tables in Posts to white.

Tables - Remove Borders

.entry-content th,
.entry-content td {
  border: none;
}

Removes the borders of all tables in Posts.

Attachment/Image Page - Remove Date & Author

.singular-attachment .entry-meta {
  display: none;
}
.singular-attachment .entry-header {
  padding-top: 3em;
}

Removes the date and author that appear above the title of the image on attachment pages.

Blog/Archives

Post Title - Change Color

.excerpt-title a,
.excerpt-title a:link,
.excerpt-title a:visited {
  color: #43b3c4;
}

Changes the color of the Post titles on the Blog and on archive pages. Does not affect the Post titles on the individual Post pages.

Read More Link - Change Underline Color

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

Changes the color of the underline for the "Read the Post" link when hovered over.

Read More Link - Remove Animated Underline

.more-link:after {
  display: none;
}

Removes the animated underline that appears when hovering over the "Read the Post" text.

Archive Header - Remove Additional Space Above

.archive-header {
  padding-top: 0;
}

Removes the additional space added above archive headers. Archive headers are the text appearing at the top of archive pages (ex. Category: Design).

Archive Header - Remove

.archive-header {
  display: none;
}

Removes archive headers which are the text appearing at the top of archive pages (ex. Category: Design).

Posts - Change Background on Blog

.excerpt-container {
  background: #43b3c4;
}

Changes the background color of Posts on the Blog and archive pages.

Posts - Remove Partial Opacity

.excerpt {
  opacity: 1;
}

Makes posts on the blog (excerpts)  opaque. This means they will be bright before being hovered over.

Posts - Remove Space Between

.excerpt {
  margin-bottom: 0;
}

Removes the space between Posts on the Blog and Archive pages, so the Posts are touching.

Sticky Posts - Change Background to White

.excerpt.sticky .excerpt-container {
  background: white;
}

Sticky posts have a tan background color, but this color can be returned to white with this snippet.

Blog - Add More Space Left & Right of Posts

.blog .main {
  width: 80%;
}

Adds more space on the sides of the blog.

Site Title - Remove Partial Opacity

.site-footer h3 {
  opacity: 1;
}

Makes the site title in the footer opaque. This means it will be bright before being hovered over.

Site Title - Change Color

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

Changes the color of the site title in the Footer.

Site Title - Hide

.site-footer h3 {
  display: none;
}

Hides the site title only in the footer. Site title will remain in the header (top-left).

Footer - Change Background Color

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

Changes the background of the footer including the design credit text at the bottom and the background behind any footer widgets.

Footer Text - Change Font Size

.design-credit {
  font-size: 16px;
}

Increases the font size of the footer text. Decrease/increase the "16px" value to change the size of the text.

Tagline - Remove Partial Opacity

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

Makes the tagline in the footer opaque.

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.

Additional Resources

  • Tracks WordPress Theme

    Download a copy of the latest version of Tracks.

  • Support forum

    Ask questions and find existing solutions in the support forum.

  • Changelog

    Review recent and past updates to Tracks.

  • Tracks on Github

    Review Tracks's commit history and project files on Github.

  • WordPress Resources

    Check our recommended resources to find great plugins and solutions for your site.

  • Codeable.io

    We can help you with minor changes on your site, but if you need a highly customized version of Tracks, we recommend finding help through Codeable.