Increase caption text size, and colour header items

Hey Lewis,

Thanks for the kind words ??

I’ll include the CSS here, and you can either put it into the child theme’s style.css file, or in the Custom CSS section in the Customizer (whichever you prefer).

The following CSS will make the image captions a bit larger and darker:

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

You can change that to whatever you’d like, but the selector is there now so you can easily target the captions.

Here’s how you can change the colors of the menu items (both menus):

.menu-primary-items a,
.menu-primary-items a:link,
.menu-primary-items a:visited,
.menu-secondary-items a,
.menu-secondary-items a:link,
.menu-secondary-items a:visited {
  color: orange;
}
.menu-primary-items a:active,
.menu-primary-items a:hover,
.menu-primary-items a:focus,
.menu-secondary-items a:active,
.menu-secondary-items a:hover,
.menu-secondary-items a:focus {
  color: red;
}

There are so many selectors because all of the different link states need to be handled. The first set of selectors will give the links their color, and the second set will give the links their color when hovered/interacted with.

One more thing, all of the links have reduced opacity which gives them a muted link until hovered. If you want them to stay vibrant even when not hovered, you can add `opacity: 1′; to change this.

Dear Ben,

Thank you for your speedy and thorough reply! I’m think I get the gist of it, and just change the red / orange to the hex colour values to select a colour. I don’t seem to be able to get the code to actually run though. This is my child theme, which says its active, and updated. Is there a further button lurking somewhere I might need to press?

Thanks again,

Lewis

/*
Theme Name: Tracks Child
Template: tracks
*/

@import url(“../tracks/style.min.css”);

/* =Theme customization starts here */

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

.menu-primary-items a,
.menu-primary-items a:link,
.menu-primary-items a:visited,
.menu-secondary-items a,
.menu-secondary-items a:link,
.menu-secondary-items a:visited {
color: orange;
}
.menu-primary-items a:active,
.menu-primary-items a:hover,
.menu-primary-items a:focus,
.menu-secondary-items a:active,
.menu-secondary-items a:hover,
.menu-secondary-items a:focus {
color: red;
}

Dear Ben,

It seems to have somehow come about without me changing anything, so I guess it must take an hour or so to load. If thats a thing that WP needs to do? Either way, thank you!

Lewis,

Glad it’s working!

Sounds like the issue was with caching. In the future, make sure to fully refresh your browser and also empty your site cache if you’re using a plugin like W3 Total Cache. Then the updates will take place right away ??

Hi

Please tell me know do i change the theme tracks from being so dark – i dont mind the colour being black or dark it just the rest seems to be so dark and gloomy – like my logo etc. Is there a code i can put in? Otherwise a very cool theme

Sure, the code shared in this thread will change the site to a light background:

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

.site-title a,
.site-description {
  color: #404040 !important;
}

You can copy and paste that code into the “Custom CSS” section in the Customizer (Appearance > Customize). Once added there, it should take affect right away.