Customizing Adaline's accent color

adaline-pink

Adaline is a very yellow theme. You may want to change that yellow to a different color.

In this tutorial, we’ll create an Adaline child theme to do just that.

tl;dr: You can find the Adaline accent color child theme files on GitHub. Modify to your color of choice and install.

Child theme structure

The first step is to get the basic child theme structure squared away. Let’s reference the WordPress.org documentation on child theme creation to do this.

In your /wp-content/themes/ folder, create an empty directory. We’ll call ours adaline-pink.

In that currently empty directory, let’s add two files:

style.css
functions.php

The style.css header

The first thing we’re going to do is set the header in our new child theme’s style.css file.


/*
 Theme Name:   Adaline Pink
 Theme URI:    https://themetry.com/adaline-accent-color/
 Description:  This is a child theme of Themetry's Adaline theme, used to demonstrate changing the accent color.
 Author:       Themetry
 Author URI:   https://themetry.com
 Template:     adaline
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  adaline-pink
*/

This allows WordPress to recognize that this is a child theme of Adaline (set with the “Template: adaline” line).

After activating though, you’ll notice that the theme is almost completely styleless.

Let’s fix that.

What goes in functions.php

We’ll use functions.php to grab the parent theme’s stylesheet.

If you’re super concerned about minimizing HTTP requests (which you shouldn’t be if you use HTTP/2, but we’ll get into that another time), you may want to copy and paste Adaline’s CSS code into your new child theme’s stylesheet.

Never use CSS @import.

Because we don’t like repeating ourselves, we’ll use our child theme’s functions.php file to enqueue the parent theme’s stylesheet.

Here’s what our functions.php file contains.


function adaline_pink_enqueue_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'adaline_pink_enqueue_styles' );

With an opening <?php tag, of course. Note that the child theme’s CSS is already there since get_stylesheet_uri() enqueued in the parent theme.

We won’t touch functions.php for the rest of the tutorial. Time to add some pizzazz.

Abstract the color CSS

Adaline’s accent color applies to three things: background colors, font colors, and border colors. To create an accent color child theme, we’ll have to comb through the stylesheet and pick out the relevant CSS selectors.

To do this, we’re just going to do a text search for any mentions of the three yellow hex codes used (#ffff00, #ffef08 and #fe0) and take note of what CSS attribute it’s applied to (background, color, or border).

While the shades of yellow are slightly different, we’re going to be changing them all to the same color, so let’s group each selector by attribute.

background-color


.site-header,
.single .entry-title:before,
.comment-reply-title

color


.site-header > .logo-letter

border-color


.posts-navigation a,
.site-main #infinite-handle span button,
.site-main #infinite-handle span button:hover,
.site-main #infinite-handle span button:focus,
.posts-navigation a:before,
#infinite-handle button:before,
.main-navigation a,
.byline a,
.cat-links a,
.entry-content a,
.featured-primary .entry-excerpt a,
.post-navigation .nav-links a,
.comment-navigation a,
.comment-content a,
.comment-form a,
.widget a,
.site-info-text a,
.featured-row

Now let’s change ’em all to…pink! As in, literally just the word “pink” replacing all the yellow hex codes.

We’ll use color-specific CSS attributes to override the CSS shorthand used in some of the selectors, since we just are about color here (for example, border-color: pink instead of border-bottom: 1px solid pink;)

We end up with this:


.site-header,
.single .entry-title:before,
.comment-reply-title  {
	background-color: pink;
}

.site-header > .logo-letter { 
	color: pink;
}

.posts-navigation a,
.site-main #infinite-handle span button,
.site-main #infinite-handle span button:hover,
.site-main #infinite-handle span button:focus,
.posts-navigation a:before,
#infinite-handle button:before,
.main-navigation a,
.byline a,
.cat-links a,
.entry-content a,
.featured-primary .entry-excerpt a,
.post-navigation .nav-links a,
.comment-navigation a,
.comment-content a,
.comment-form a,
.widget a,
.site-info-text a,
.featured-row {
	border-color: pink;
}

If you didn’t peek already from the GitHub link above, take a look at the finalized style.css and functions.php on GitHub, just to make sure we’re on the same page.

If you want to keep the pink accent color, feel free to grab this screenshot as well.

Customizing Adaline’s accent color