Changing the Color of WordPress Theme


When you finally find the perfect WordPress layout, you shouldn't let the wrong color scheme stop you from picking it up. So long as the colors are defined in the layouts style sheet, as opposed to in graphic elements, you will be able to change the color scheme of your layout. To change the style sheet, you will need to have a basic understanding of CSS and feel comfortable modifying a vital layout document.

  • Determine what you colors you want to use; copy or write down the six-digit hexadecimal code associated with each color. Every color has a code made of six letters and/or numbers; white uses #FFFFFF while black uses #000000. There are many different websites dedicated to colors and combinations, such as Colour Lovers or YaflaColor.

  • Open your WordPress dashboard and go to "Appearance" and then "Editor." This will show you the list of all the templates and pages relevant to your website.

  • Select "Stylesheet (style.css)" from below the "Styles" subhead. Depending on your particular template the style sheet may have a different name, but will always have a file type of "CSS."

  • Copy and paste the entire unchanged contents of the default style sheet document. You can do this by clicking anywhere in the WordPress editor and pressing "Ctrl" and "A" on your keyboard and then pressing "Ctrl" and "C." Open an empty text document, paste the contents of the current style sheet and save this copy on your computer. This copy will come in handy if you break the style sheet and need to revert to the default settings.

  • Go back to the WordPress editor screen, and search the style sheet for the "BODY" tag. It will look like "BODY {" with a series of attributes below it, followed by a "}" sign. The "BODY" section is where you change not only the image background but also the text color.

  • Locate the "background" attribute in the "body" section. If your background is just a color, it will be formatted "background: #000000;".

  • Change the "#000000" to whatever color you want to use for the new background. To change the color of the text, locate the "color" tag, formatted "color: #000000;" and change the hex code to your preferred text color. To change link colors, find the tags that start with "a:" such as "a:link { }," "a:visited { }," "a:hover { }" and "a:active { }" and change the hex code.

  • Find the rest of the elements that you want to modify. How these elements are categorized varies drastically between Web designers; one designer may use IDs to define elements (such as "#header { }") while another may just refer to generic elements such as "table { }". Any element with a color hex code can be changed; the best way to learn is to experiment cautiously.

  • Save your work frequently using the "Update File" button below the text editor in WordPress.

Tips & Warnings

  • Make sure that the colors you select for your website are complementary and will not strain your visitors' eyes.
  • CSS and HTML are the bones of your website; a single missing or misplaced symbol can break your entire layout. Be careful to only edit those bits of your website you feel comfortable changing.
  • Every WordPress template developer does their CSS just a little bit differently; while the syntax of CSS is universal, it may be formatted slightly differently for your particular layout.

Related Searches


Promoted By Zergnet



You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!