Change WordPress Colors In Your Twenty Fourteen Theme


The new WordPress default theme Twenty Fourteen was released with WordPress 3.8 on Dec 12, 2013. That very same day, a new plugin developed to easily re-color the Twenty Fourteen theme appeared in the WordPress Plugin Directory.

I realized about the existence of this plugin when, a few days after the WordPress 3.8 release, it was detected on a site by our WordPress Theme Detector tool. The name of the plugin caught my attention so I looked for it in the Plugin Directory. I found the Fourteen Colors plugin interesting enough so I thought I´d share it with our readers as soon as I had a little time to write this post.

Twenty Fourteen color scheme

Primary elements of Twenty Fourteen Color Scheme

Background color – The default width of Twenty Fourteen is 1260 pixels so background is visible in screens wider than 1260 pixels. Background color of Twenty Fourteen can be changed directly from customization option. There is no need to make changes directly in CSS style.

Header color – The CSS style responsible for header color is site-header.Default CSS Style at line 847 in style.css is

Site Title Color – This color option is available in theme customization option so no separate change in CSS is required.

Primary Sidebar Color – The color of primary sidebar is controlled by CSS property site:before. This CSS property is available at line 3720 in style.css

This sidebar moves below the content area for screen width less than 1100 px, therefore, change in CSS property #secondary available at line 2151 in style.css should also be done.

Footer Color– The CSS property responsible for footer color is site-footer. This CSS style code is available at line 2820 in style.css

These major elements will cover large part of theme look and feel. After setting the colors of these items, certain other items will also require change in color.


Secondary elements of Twenty Fourteen Color Scheme

There are large numbers of items governed by CSS style so confining the thoughts in limited creativity may not be correct but there are few items which should be corrected according to color of primary elements.

Twenty Fourteen designers have used two more colors i.e Green and light green. These two colors are appropriately applied on several items.

  • Search icon in Navigation menu bar
  • Extended search bar below Navigation
  • Link color
  • Link hover color
  • Active link color
  • Article Title hover color
  • Widget title hover color

So there are number of CSS styles which use these two colors. The hex code of these two colors is 41a62a (light green) and 24890d (green).You can open style.css file and search these two colors.

There is one easy way to handle such large number of CSS styles. Select any two colors in relation with primary elements and then replace those two default colors with these two selected colors respectively.

Open style.css file with some text editor which can search text and then replace that text by some other text. For example open style.css with WordPad and then go to replace control button. Place default color (green) in finding what and place new color in Replace with.

In few steps, the major part of Twenty Fourteen color scheme can be changed.





Previous articleFacebook Ads Tutorial 2017
Next articleDo You Appreciate Suncream?
Hi there, my name is William, an affiliate marketer comes from United States. I’ve been an affiliate marketer since 2013 ,other from learning how to do it right in online marketing, I want to share my own knowledge about online marketing tools, courses too.


  1. The plugin is designed to support almost any combination of colors, so you can be creative and express yourself with your site!


Please enter your comment!
Please enter your name here