Back to Community
Home / Community / Theme → Twenty twelve

How to Change Colors in the Twenty Twelve Theme: A Complete CSS Guide

41 threads Sep 16, 2025 Theme → Twenty twelve

Content

Customizing the look of your WordPress site is a common task, and one of the most frequent requests from users of the classic Twenty Twelve theme is how to change its default colors. Whether you want to modify the background, text, or link colors, this guide will walk you through the most effective methods using CSS.

Why Can't I Just Change a Setting?

The Twenty Twelve theme, like many older WordPress themes, was built with a specific design in mind. Its color scheme is hardcoded into its stylesheet (style.css) and is not managed by a built-in color picker or theme options panel. This means that to make visual changes, you must override the default CSS rules.

The Golden Rule: Use a Child Theme

Before you change a single line of code, the most important step is to use a child theme. As seen in numerous support threads, directly editing the theme's files is a recipe for disaster. The next time Twenty Twelve receives an update, all of your customizations will be erased. A child theme protects your changes and is the universally recommended best practice.

Common Color Changes and Their Solutions

1. Changing the Default Text Color

The default body text in Twenty Twelve is a dark gray (#444). To change it globally to black, add the following CSS to your child theme's style.css file or the Additional CSS panel in the Customizer (Appearance > Customize).

body {
    color: #000000;
}

2. Changing Link Colors

Links are more complex because they have multiple states: unvisited (:link), visited (:visited), hover (:hover), and active (:active). The default link color is blue (#21759b). To comprehensively change link colors site-wide, use this template:

/* Change all unvisited links */
a:link {
    color: #21759b;
}

/* Change all visited links */
a:visited {
    color: #696969;
}

/* Change link color on hover */
a:hover {
    color: #b5b5b5;
}

/* Change link color the moment it is clicked */
a:active {
    color: #b5b5b5;
}

Important Note: For visited link colors to work correctly, they must be defined after the :link pseudo-class. The order of these CSS rules is crucial.

3. Changing the Background Color of a Single Page

WordPress adds unique classes to the body tag of every page, allowing for highly specific styling. For example, to change the background of just one page, first identify its page ID (e.g., page-id-686). Then, use this CSS:

body.page-id-686 {
    background-color: #FBF4E1 !important;
}

4. Changing the Footer or Sidebar Background

To change the background of the entire footer widget area, target the .widget-area class. To add padding after applying a background, include that property as well.

.widget-area {
    background-color: #E5E4E4;
    padding: 20px; /* Adds space around the widgets */
}

5. Changing Page and Post Title Colors

To change the color of titles for both pages and posts, target the .entry-title class.

.entry-title, .entry-title a {
    color: #dd9933 !important;
}

Troubleshooting Common Issues

  • Why aren't my changes working? The most common cause is CSS specificity. The theme's original rule might be more specific than your new one. Use your browser's Inspect Element tool to identify the exact CSS rule you need to override. Sometimes, adding !important (as shown above) can force your style to take precedence, but use this declaration sparingly.
  • My visited link color won't change! Browser security restrictions can sometimes limit how the :visited pseudo-class is styled. Ensure your rule is placed after any :link rules and that you are not trying to change properties other than color.
  • My changes disappeared after an update! This confirms you were editing the parent theme's files directly. You must switch to a child theme to make permanent changes.

By understanding these core CSS concepts, you can take full control over the color scheme of your Twenty Twelve theme and create a site that matches your unique branding.

Related Support Threads Support