How To Change Your Blog Color Scheme

Last updated on October 19th, 2020 by Samuel Ryan, copyright reserved

If you’re new to blogging, it can be a real challenge trying to figure out how to change your blog color scheme.

In this post, I’ll walk you through the process. I’ll cover 3 of the main blogging platforms; WordPress (org), WordPress (com) and Blogger (Blogspot).

At the end of the post, I’ll also show you how to use CSS code to change colors.

Change Website Color Scheme

Note: Before making any changes to your website, create a backup. The following is not advice, simply information. Seek professional advice if you’re not sure.

MENU

Change A Self Hosted WordPress.Org Color Scheme

  • Step 1: From your self-hosted WordPress dashboard, select Appearance → Customise.
    This will load the ‘customising’ page, displaying your website on the right-hand side of the screen. A new panel will appear on the left. 
  • Step 2: In the new panel on the left, find and select a tab called ‘Colors’ or ‘Theme Colors’, or something similar (based on your Theme). 
    Here you can change the main background color, text color, link color and blog post title color. Options may be limited by your website Theme. 

Tip: You can either select a color from the color palette, or input your own desired color using a Hex code.

Hex codes are computer references for colors. Paint 3D on any Windows computer will help you find the Hex code for any image you have. And, it’s FREE.

You can also find a wide range of Hex codes, at w3schools.com.

As you have a self hosted WordPress site, you can also apply CSS code to change colors (see below for how).


WordPress.Com Change Color Palette

  • Step 1: From your WordPress (com) dashboard, select Design → Customise.
    This will load the ‘customising’ page, displaying your website on the right-hand side of the screen.  A new panel will appear on the left. 
  • Step 2: In the new panel on the left, find the tab called ‘Colors & Backgrounds‘ or Theme Colors, or something similar (based on your Theme). 
    Here you will be offered a selection of color palettes, which are pre-created to work best with your Theme.
    You’ll also be able to pick colours with the ‘pick your own color’ link. This will allow you to change the Header text color, and your website Links color.

Tip: You can either select a color from the color palette, or input your own desired color using a Hex code.

Hex codes are computer references for colors. Paint 3D on any Windows computer will help you find the Hex code for any image you have. And, it’s FREE.

Finally, you have the option of uploading an image, or selecting a Background Pattern.


Change A Blogger (BlogSpot) Color Scheme

  • Step 1: From your Blogger dashboard, select Theme.
    This will load the Themes page, where you can select ‘Customize’ from under your current Theme.
  • Step 2: Select ‘Customize‘ from under your current Theme.
    This will load the ‘customising’ page, displaying your website on the bottom of the screen, and a new panel at the top. 
  • Step 3: Now you can select the Background color of your theme. You can also explore the Advanced tab for changing a range of colors on your blog, including Page Text, Backgrounds, Links, Blog Title and more.

As you have a Blogger site, you can also apply CSS code (see below for how).


CSS Code To Change Theme Colors (Headers, Links & Backgrounds)

You may be using a Theme which doesn’t provide many color changing options, or you may want to target specific areas of your website. This is where CSS can be used for changing the appearance of your site instead.

First we need to know where to put the CSS code. For a complete tutorial on how to add CSS code to your website, read this. Here’s a quick summary for self-hosted WordPress blogs, and Blogger (BlogSpot) blogs:

How Do I Add CSS to a Self Hosted WordPress Org Blog?

  1. From your self-hosted WordPress dashboard, select Appearance → Customise.

    This will load the ‘customising’ page, displaying your website on the right-hand side of the screen. A new panel will appear on the left. 

  2. Find the tab called ‘Additional CSS’ or CSS, or something similar (based on your Theme). 

    This is where you can add CSS.

How Do I Add CSS To Blogger (BlogSpot) Blog?

From your Blogger dashboard, select Theme, then Customise, then Advanced (just as above). In the Advance tab you’ll see: Add CSS. This is where you can enter CSS code.


The CSS code:

To change the color of my website Header text (H1), I could input:

h1 {color: red;}

Here’s the before and after:

How To Change Colors With CSS Example

To change the color of my website header (the area at the top of my website near the logo, I could input:

.site-header {background: green; color: #ffffff;}

Tip: I can also use the Hex code instead of the color name. Here, #ffffff is the Hex code for white.

And we’re done.

If you have any questions, feel free to ask them in the comments below.

Leave a comment