Step by step guide to making a TwentyTen child theme

Step 2: Add some styles to your child

Now you can start adding rules to the child’s stylesheet. Adding the following to our style.css will change the font and link colours.

body, input, textarea {
  color: #000;
}
a:link, a:visited {
  color:#f71c9d;
}
a:active, a:hover {
  color: #fb8fcf;
}

You’ll notice that the links are now pink, but the the titles, page title links and entrymeta links are grey and red upon hover. Digging further into the Twenty Ten theme, we can see various styles for these links starting on line #556 of the TwentyTen Stylesheet. The links that need to be modified are:

.page-title a:link,
.page-title a:visited {
	color: #888;
}
.page-title a:active,
.page-title a:hover {
	color: #ff4b33;
}
.entry-title a:link,
.entry-title a:visited {
	color: #000;
	text-decoration: none;
}
.entry-title a:active,
.entry-title a:hover {
	color: #ff4b33;
}
.entry-meta a,
.entry-utility a {
	color: #888;
}
.entry-meta a:hover,
.entry-utility a:hover {
	color: #ff4b33;
}

All we need to do is override these styles in our Child Theme styles.css by adding the following:

.page-title a:link,
.page-title a:visited {
	color: #f71c9d;
}
.page-title a:active,
.page-title a:hover {
	color: #fb8fcf;
}
.entry-title a:link,
.entry-title a:visited {
	color: #FFF;
}
.entry-title a:active,
.entry-title a:hover {
	color: #f71c9d;
}
.entry-meta a,
.entry-utility a {
	color: #f71c9d;
}
.entry-meta a:hover,
.entry-utility a:hover {
	color: #fb8fcf;
}

This is the kind of work where knowing how to use Firebug comes very handy.

Comments are closed.