{"id":139,"date":"2015-10-08T00:27:16","date_gmt":"2015-10-08T00:27:16","guid":{"rendered":"https:\/\/themetry.com\/?p=139"},"modified":"2017-06-16T14:46:24","modified_gmt":"2017-06-16T14:46:24","slug":"adaline-accent-color","status":"publish","type":"post","link":"https:\/\/themetry.com\/adaline-accent-color\/","title":{"rendered":"Customizing Adaline&#8217;s accent color"},"content":{"rendered":"<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/themetry.com\/wp-content\/uploads\/adaline-pink.png\" alt=\"adaline-pink\" width=\"880\" height=\"660\" class=\"aligncenter size-full wp-image-349\" srcset=\"https:\/\/themetry.com\/wp-content\/uploads\/adaline-pink.png 880w, https:\/\/themetry.com\/wp-content\/uploads\/adaline-pink-300x225.png 300w\" sizes=\"(max-width: 880px) 100vw, 880px\" \/><\/p>\n<p><a href=\"https:\/\/themetry.com\/themes\/adaline\/\">Adaline<\/a> is a very yellow theme. You may want to change that yellow to a different color.<\/p>\n<p>In this tutorial, we&#8217;ll create an Adaline child theme to do just that.<\/p>\n<p>tl;dr: You can find the <a href=\"https:\/\/github.com\/Themetry\/Adaline-Pink\">Adaline accent color child theme files on GitHub<\/a>. Modify to your color of choice and install.<\/p>\n<p><!--more--><\/p>\n<h2>Child theme structure<\/h2>\n<p>The first step is to get the basic child theme structure squared away. Let&#8217;s reference the <a href=\"https:\/\/codex.wordpress.org\/Child_Themes#How_to_Create_a_Child_Theme\">WordPress.org documentation on child theme creation<\/a> to do this.<\/p>\n<p>In your <code>\/wp-content\/themes\/<\/code> folder, create an empty directory. We&#8217;ll call ours <code>adaline-pink<\/code>.<\/p>\n<p>In that currently empty directory, let&#8217;s add two files:<\/p>\n<ul>\n<li>style.css<\/li>\n<li>functions.php<\/li>\n<\/ul>\n<h2>The style.css header<\/h2>\n<p>The first thing we&#8217;re going to do is set the header in our new child theme&#8217;s style.css file.<\/p>\n<p><code><\/p>\n<pre>\/*\r\n Theme Name:   Adaline Pink\r\n Theme URI:    https:\/\/themetry.com\/adaline-accent-color\/\r\n Description:  This is a child theme of Themetry's Adaline theme, used to demonstrate changing the accent color.\r\n Author:       Themetry\r\n Author URI:   https:\/\/themetry.com\r\n Template:     adaline\r\n Version:      1.0.0\r\n License:      GNU General Public License v2 or later\r\n License URI:  http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\r\n Text Domain:  adaline-pink\r\n*\/<\/pre>\n<p><\/code><\/p>\n<p>This allows WordPress to recognize that this is a child theme of Adaline (set with the &#8220;Template: adaline&#8221; line).<\/p>\n<p>After activating though, you&#8217;ll notice that the theme is almost completely styleless.<\/p>\n<p>Let&#8217;s fix that.<\/p>\n<h2>What goes in functions.php<\/h2>\n<p>We&#8217;ll use functions.php to grab the parent theme&#8217;s stylesheet.<\/p>\n<p>If you&#8217;re super concerned about minimizing HTTP requests (which you shouldn&#8217;t be if you use HTTP\/2, but we&#8217;ll get into that another time), you may want to copy and paste Adaline&#8217;s CSS code into your new child theme&#8217;s stylesheet.<\/p>\n<p><em>Never<\/em> use <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@import\">CSS @import<\/a>.<\/p>\n<p>Because we don&#8217;t like repeating ourselves, we&#8217;ll use our child theme&#8217;s <code>functions.php<\/code> file to enqueue the parent theme&#8217;s stylesheet.<\/p>\n<p>Here&#8217;s what our functions.php file contains.<\/p>\n<p><code><\/p>\n<pre>function adaline_pink_enqueue_styles() {\r\n\twp_enqueue_style( 'parent-style', get_template_directory_uri() . '\/style.css' );\r\n}\r\nadd_action( 'wp_enqueue_scripts', 'adaline_pink_enqueue_styles' );\r\n<\/pre>\n<p><\/code><\/p>\n<p>With an opening &lt;?php tag, of course. Note that the child theme&#8217;s CSS is already there since get_stylesheet_uri() enqueued in the parent theme.<\/p>\n<p>We won&#8217;t touch functions.php for the rest of the tutorial. Time to add some pizzazz.<\/p>\n<h2>Abstract the color CSS<\/h2>\n<p>Adaline&#8217;s accent color applies to three things: background colors, font colors, and border colors. To create an accent color child theme, we&#8217;ll have to comb through the stylesheet and pick out the relevant CSS selectors.<\/p>\n<p>To do this, we&#8217;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&#8217;s applied to (background, color, or border).<\/p>\n<p>While the shades of yellow are slightly different, we&#8217;re going to be changing them all to the same color, so let&#8217;s group each selector by attribute.<\/p>\n<h3>background-color<\/h3>\n<p><code><\/p>\n<pre>.site-header,\r\n.single .entry-title:before,\r\n.comment-reply-title<\/pre>\n<p><\/code><\/p>\n<h3>color<\/h3>\n<p><code><\/p>\n<pre>.site-header > .logo-letter<\/pre>\n<p><\/code><\/p>\n<h3>border-color<\/h3>\n<p><code><\/p>\n<pre>.posts-navigation a,\r\n.site-main #infinite-handle span button,\r\n.site-main #infinite-handle span button:hover,\r\n.site-main #infinite-handle span button:focus,\r\n.posts-navigation a:before,\r\n#infinite-handle button:before,\r\n.main-navigation a,\r\n.byline a,\r\n.cat-links a,\r\n.entry-content a,\r\n.featured-primary .entry-excerpt a,\r\n.post-navigation .nav-links a,\r\n.comment-navigation a,\r\n.comment-content a,\r\n.comment-form a,\r\n.widget a,\r\n.site-info-text a,\r\n.featured-row<\/pre>\n<p><\/code><\/p>\n<p>Now let&#8217;s change &#8217;em all to&#8230;pink! As in, literally just the word &#8220;pink&#8221; replacing all the yellow hex codes.<\/p>\n<p>We&#8217;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, <code>border-color: pink<\/code> instead of <code>border-bottom: 1px solid pink;<\/code>)<\/p>\n<p>We end up with this:<\/p>\n<p><code><\/p>\n<pre>.site-header,\r\n.single .entry-title:before,\r\n.comment-reply-title  {\r\n\tbackground-color: pink;\r\n}\r\n\r\n.site-header > .logo-letter { \r\n\tcolor: pink;\r\n}\r\n\r\n.posts-navigation a,\r\n.site-main #infinite-handle span button,\r\n.site-main #infinite-handle span button:hover,\r\n.site-main #infinite-handle span button:focus,\r\n.posts-navigation a:before,\r\n#infinite-handle button:before,\r\n.main-navigation a,\r\n.byline a,\r\n.cat-links a,\r\n.entry-content a,\r\n.featured-primary .entry-excerpt a,\r\n.post-navigation .nav-links a,\r\n.comment-navigation a,\r\n.comment-content a,\r\n.comment-form a,\r\n.widget a,\r\n.site-info-text a,\r\n.featured-row {\r\n\tborder-color: pink;\r\n}<\/pre>\n<p><\/code><\/p>\n<p>If you didn&#8217;t peek already from the GitHub link above, take a look at the finalized <a href=\"https:\/\/github.com\/Themetry\/Adaline-Pink\/blob\/master\/style.css\">style.css<\/a> and <a href=\"https:\/\/github.com\/Themetry\/Adaline-Pink\/blob\/master\/functions.php\">functions.php<\/a> on GitHub, just to make sure we&#8217;re on the same page.<\/p>\n<p>If you want to keep the pink accent color, feel free to grab this <a href=\"https:\/\/github.com\/Themetry\/Adaline-Pink\/blob\/master\/screenshot.png\">screenshot<\/a> as well.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adaline is a very yellow theme. In this tutorial, we&#8217;ll create an Adaline child theme to change the accent color to pink.<\/p>\n","protected":false},"author":1,"featured_media":349,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Customizing Adaline&#039;s accent color - Themetry<\/title>\n<meta name=\"description\" content=\"Adaline is a very yellow theme. This guide will show you how to create a child theme to modify the color scheme to another color of your choice.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/themetry.com\/adaline-accent-color\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customizing Adaline&#039;s accent color - Themetry\" \/>\n<meta property=\"og:description\" content=\"Adaline is a very yellow theme. This guide will show you how to create a child theme to modify the color scheme to another color of your choice.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/themetry.com\/adaline-accent-color\/\" \/>\n<meta property=\"og:site_name\" content=\"Themetry\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Themetry-1650390088533156\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-10-08T00:27:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-06-16T14:46:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/themetry.com\/wp-content\/uploads\/adaline-pink.png\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"660\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Leland Fiegel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@lelandf\" \/>\n<meta name=\"twitter:site\" content=\"@themetryhq\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Leland Fiegel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/themetry.com\/adaline-accent-color\/\",\"url\":\"https:\/\/themetry.com\/adaline-accent-color\/\",\"name\":\"Customizing Adaline's accent color - Themetry\",\"isPartOf\":{\"@id\":\"https:\/\/themetry.com\/#website\"},\"datePublished\":\"2015-10-08T00:27:16+00:00\",\"dateModified\":\"2017-06-16T14:46:24+00:00\",\"author\":{\"@id\":\"https:\/\/themetry.com\/#\/schema\/person\/d3bb967693414d27a081b3eb671c4f84\"},\"description\":\"Adaline is a very yellow theme. This guide will show you how to create a child theme to modify the color scheme to another color of your choice.\",\"breadcrumb\":{\"@id\":\"https:\/\/themetry.com\/adaline-accent-color\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/themetry.com\/adaline-accent-color\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/themetry.com\/adaline-accent-color\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/themetry.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Customizing Adaline&#8217;s accent color\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/themetry.com\/#website\",\"url\":\"https:\/\/themetry.com\/\",\"name\":\"Themetry\",\"description\":\"WordPress Themes with mathematical precision to detail\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/themetry.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/themetry.com\/#\/schema\/person\/d3bb967693414d27a081b3eb671c4f84\",\"name\":\"Leland Fiegel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/themetry.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/005e9a9f411ec6af6cddb49b6067542e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/005e9a9f411ec6af6cddb49b6067542e?s=96&d=mm&r=g\",\"caption\":\"Leland Fiegel\"},\"description\":\"Leland is the lead developer at Themetry. He's passionate about making it easy for people to make beautiful, high-quality websites. Leland manifests this passion by making and writing about WordPress themes literally all day.\",\"sameAs\":[\"https:\/\/twitter.com\/lelandf\"],\"url\":\"https:\/\/themetry.com\/author\/leland\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Customizing Adaline's accent color - Themetry","description":"Adaline is a very yellow theme. This guide will show you how to create a child theme to modify the color scheme to another color of your choice.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/themetry.com\/adaline-accent-color\/","og_locale":"en_US","og_type":"article","og_title":"Customizing Adaline's accent color - Themetry","og_description":"Adaline is a very yellow theme. This guide will show you how to create a child theme to modify the color scheme to another color of your choice.","og_url":"https:\/\/themetry.com\/adaline-accent-color\/","og_site_name":"Themetry","article_publisher":"https:\/\/www.facebook.com\/Themetry-1650390088533156\/","article_published_time":"2015-10-08T00:27:16+00:00","article_modified_time":"2017-06-16T14:46:24+00:00","og_image":[{"width":880,"height":660,"url":"https:\/\/themetry.com\/wp-content\/uploads\/adaline-pink.png","type":"image\/png"}],"author":"Leland Fiegel","twitter_card":"summary_large_image","twitter_creator":"@lelandf","twitter_site":"@themetryhq","twitter_misc":{"Written by":"Leland Fiegel","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/themetry.com\/adaline-accent-color\/","url":"https:\/\/themetry.com\/adaline-accent-color\/","name":"Customizing Adaline's accent color - Themetry","isPartOf":{"@id":"https:\/\/themetry.com\/#website"},"datePublished":"2015-10-08T00:27:16+00:00","dateModified":"2017-06-16T14:46:24+00:00","author":{"@id":"https:\/\/themetry.com\/#\/schema\/person\/d3bb967693414d27a081b3eb671c4f84"},"description":"Adaline is a very yellow theme. This guide will show you how to create a child theme to modify the color scheme to another color of your choice.","breadcrumb":{"@id":"https:\/\/themetry.com\/adaline-accent-color\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/themetry.com\/adaline-accent-color\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/themetry.com\/adaline-accent-color\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/themetry.com\/"},{"@type":"ListItem","position":2,"name":"Customizing Adaline&#8217;s accent color"}]},{"@type":"WebSite","@id":"https:\/\/themetry.com\/#website","url":"https:\/\/themetry.com\/","name":"Themetry","description":"WordPress Themes with mathematical precision to detail","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/themetry.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/themetry.com\/#\/schema\/person\/d3bb967693414d27a081b3eb671c4f84","name":"Leland Fiegel","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/themetry.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/005e9a9f411ec6af6cddb49b6067542e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/005e9a9f411ec6af6cddb49b6067542e?s=96&d=mm&r=g","caption":"Leland Fiegel"},"description":"Leland is the lead developer at Themetry. He's passionate about making it easy for people to make beautiful, high-quality websites. Leland manifests this passion by making and writing about WordPress themes literally all day.","sameAs":["https:\/\/twitter.com\/lelandf"],"url":"https:\/\/themetry.com\/author\/leland\/"}]}},"_links":{"self":[{"href":"https:\/\/themetry.com\/wp-json\/wp\/v2\/posts\/139"}],"collection":[{"href":"https:\/\/themetry.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themetry.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themetry.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themetry.com\/wp-json\/wp\/v2\/comments?post=139"}],"version-history":[{"count":0,"href":"https:\/\/themetry.com\/wp-json\/wp\/v2\/posts\/139\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themetry.com\/wp-json\/wp\/v2\/media\/349"}],"wp:attachment":[{"href":"https:\/\/themetry.com\/wp-json\/wp\/v2\/media?parent=139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themetry.com\/wp-json\/wp\/v2\/categories?post=139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themetry.com\/wp-json\/wp\/v2\/tags?post=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}