How to Change Twenty Fourteen Color Scheme

Twenty Fourteen theme has default black and white color scheme. Layout of this new twenty fourteen is liked by a large segment of WordPress community. Default color scheme is quite attractive for the theme layout and it gives a proper emphasis on content visibility in the article zone.

Some of the users may be interested in changing colors of Twenty Fourteen. Changing colors of few important sections may not be difficult but changing color scheme require change in several CSS styles. It is always advised to use child theme for any changes instead of making direct changes in parent theme.

Twenty Fourteen color scheme

I have tried to simplify this article by sequentially changing the colors of different sections.

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 item, 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 find what and place new color in Replace with.

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

7 thoughts on “How to Change Twenty Fourteen Color Scheme”

  1. Thanks for this helpful article. I was looking exactly for this.

    After changing the color of the left sidebar and the footer to white you cannot read the text anymore as that is white as well. How can I change these fonts?

    And how can I change the black in the header also?

    Would be great if you could help.

    Kind regards

    1. Text color in side bar – change color in css for widget a at line 2212, widget-title at line 2392. You can check the css property attached with text in any area through developer toolbar and then change that particular css.

  2. I really like the sidebar of this page as the TwentyFourteen theme leaves so much unattractive negative space. Is the sidebar on this page achieved through the css property listed above for #secondary?

Comments are closed.