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 832 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 3583 in style.css

Footer Color- The CSS property responsible for footer color is site-footer. This CSS style code is available at line 2692 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.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">