voodoochild2014screen

Custom Colours in Twenty Fourteen – Get the Green Outta my Theme!

So now we have twenty fourteen in place and I have a child theme started. Of course you remember we always use child themes when editing a theme, right? If not, have a quick read of this old article. It was written back when we were on 2010 but it’s just as relevant now on 2014! Our child theme is set up to pull in the default CSS usnig the @import code, so everything looks the same. I’m just not a huge fan of green, so here’s what I did!

First up, decision time! You need to pick 3 colours. Well, 3 to replace the green, if you want to go further in customizing you will need more. But this tutorial is focusing strictly on replacing that green. I went with some raspberry shades myself, but you can do whatever you like. I use Adobe’s Kulur website to help me make all of my colour decisions personally!

The colours we are replacing are three shades of green here are the originals and my picks:

  • I replaced #24890d with #bc175b
  • I replaced #41a62a with #d62c68
  • I replaced #55d737 with #ed2597

You can check out the originals and my picks on kulur and then make your decisions from there. You want different colours becasue they help accent and provide rollover indications.

The code I’m going to give you below covers all of the green colours and nothing else. I was happy with all of the other stuff. Also, the code has my new colours in it already, you could simply copy my code into your favourite code editor (I use Notepad++) and do a replace all to swap my hex codes for your selections to save a lot of time!  After you get it just right, it goes into your child theme’s style.css file just under the @import line.

Here is the code I found to replace all the green:

a {
	color: #bc175b;
}

a:active,
a:hover {
	color: #d62c68;
}

::selection {
	background: #bc175b;
}

::-moz-selection {
	background: #bc175b;
}

button,
.contributor-posts-link,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: #bc175b;
}

button:hover,
button:focus,
.contributor-posts-link:hover,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background-color: #d62c68;
}

button:active,
.contributor-posts-link:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	background-color: #ed2597;
}

.search-toggle {
	background-color: #bc175b;
}

.search-toggle:hover,
.search-toggle.active {
	background-color: #d62c68;
}

.search-box {
	background-color: #d62c68;
}

.site-navigation a:hover {
	color: #d62c68;
}

.site-navigation .current_page_item > a,
.site-navigation .current_page_ancestor > a,
.site-navigation .current-menu-item > a,
.site-navigation .current-menu-ancestor > a {
	color: #ed2597;
}

.entry-title a:hover {
	color: #d62c68;
}

.entry-meta a:hover {
	color: #d62c68;
}

.cat-links a:hover {
	color: #d62c68;
}

.entry-meta .tag-links a:hover {
	background-color: #d62c68;
}

.entry-meta .tag-links a:hover:before {
	border-right-color: #d62c68;
}

.entry-content .edit-link a:hover {
	color: #d62c68;
}

.hentry .mejs-controls .mejs-time-rail .mejs-time-current {
	background: #bc175b;
}

.page-links a:hover {
	background: #d62c68;
	border: 1px solid #d62c68;
}

.post-navigation a:hover,
.image-navigation a:hover {
	color: #d62c68;
}

.paging-navigation .page-numbers.current {
	border-top: 5px solid #bc175b;
}

.paging-navigation a:hover {
	border-top: 5px solid #d62c68;
}

.comment-author a:hover,
.comment-list .pingback a:hover,
.comment-list .trackback a:hover,
.comment-metadata a:hover {
	color: #d62c68;
}

.comment-reply-title small a:hover {
	color: #d62c68;
}

.widget a:hover {
	color: #d62c68;
}

.widget button,
.widget input[type="button"],
.widget input[type="reset"],
.widget input[type="submit"] {
	background-color: #bc175b;
}

.widget input[type="button"]:hover,
.widget input[type="button"]:focus,
.widget input[type="reset"]:hover,
.widget input[type="reset"]:focus,
.widget input[type="submit"]:hover,
.widget input[type="submit"]:focus {
	background-color: #d62c68;
}

.widget input[type="button"]:active,
.widget input[type="reset"]:active,
.widget input[type="submit"]:active {
	background-color: #ed2597;
}

.widget-title a:hover {
	color: #d62c68;
}

.widget_calendar tbody a {
	background-color: #bc175b;
}

.widget_calendar tbody a:hover {
	background-color: #d62c68;
}

.widget_twentyfourteen_ephemera .entry-meta a:hover {
	color: #d62c68;
}

.content-sidebar .widget a {
	color: #bc175b;
}

.content-sidebar .widget a:hover {
	color: #d62c68;
}

.content-sidebar .widget input[type="button"],
.content-sidebar .widget input[type="reset"],
.content-sidebar .widget input[type="submit"] {
	background-color: #bc175b;
}

.content-sidebar .widget input[type="button"]:hover,
.content-sidebar .widget input[type="button"]:focus,
.content-sidebar .widget input[type="reset"]:hover,
.content-sidebar .widget input[type="reset"]:focus,
.content-sidebar .widget input[type="submit"]:hover,
.content-sidebar .widget input[type="submit"]:focus {
	background-color: #d62c68;
}

.content-sidebar .widget input[type="button"]:active,
.content-sidebar .widget input[type="reset"]:active,
.content-sidebar .widget input[type="submit"]:active {
	background-color: #ed2597;
}

.content-sidebar .widget .widget-title a:hover {
	color: #d62c68;
}

.content-sidebar .widget_twentyfourteen_ephemera .entry-meta a:hover {
	color: #d62c68;
}

.site-info a:hover {
	color: #d62c68;
}

.featured-content a:hover {
	color: #d62c68;
}

.slider-control-paging a:hover:before {
	background-color: #d62c68;
}

.slider-control-paging .slider-active:before,
.slider-control-paging .slider-active:hover:before {
	background-color: #bc175b;
}

.slider-direction-nav a:hover {
	background-color: #bc175b;
}

@media screen and (min-width: 783px) {
	.primary-navigation ul ul {
		background-color: #bc175b;
	}
	.primary-navigation li:hover > a,
	.primary-navigation li.focus > a {
		background-color: #bc175b;
	}

	.primary-navigation ul ul a:hover,
	.primary-navigation ul ul li.focus > a {
		background-color: #d62c68;
	}
}

@media screen and (min-width: 1008px) {
	.secondary-navigation ul ul {
		background-color: #bc175b;
	}
	.secondary-navigation li:hover > a,
	.secondary-navigation li.focus > a {
		background-color: #bc175b;
	}

	.secondary-navigation ul ul a:hover,
	.secondary-navigation ul ul li.focus > a {
		background-color: #d62c68;
	}
}

Seems to me that covered everything, but if you happen to find anything I missed, feel free to let me know in the comments and I’ll update it!

6 thoughts on “Custom Colours in Twenty Fourteen – Get the Green Outta my Theme!”

  1. Since this article was exactly what I was looking for and helped me a lot, I’m sending you an extra thanks with an extension that I used to also colour the “small toggle menu” (which you would see on a small browser window or a smartphone) !
    I used your own colours for your, and your readers, convenience. The color #fff (white) in this part of the configuration is the menu text colour.

    /*ZELF EXTRA TOEGEVOEGD VOOR MOBILE MENU*/

    .menu-toggle {
    background-color: #d62c68;
    }
    .menu-toggle:hover,
    .menu-toggle.active {
    background-color: #bc175b;
    }

    @media screen and (min-width: 301px) {
    .primary-navigation li:hover > a,
    .primary-navigation li.focus > a {
    background-color: #bc175b;
    color: #fff;
    }
    }

    Greetings,
    Erik.

    1. A line dropped off…the first part of this should be:

      .menu-toggle {
      background-color: #d62c68;
      }
      .menu-toggle:hover,
      .menu-toggle:focus,
      .menu-toggle.active {
      background-color: #bc175b;
      }

Leave a Reply