Support Center

How to Change Your Background Color

In order to customize the background, you’ll need to know some CSS. It’s really not all that scary for those of you that have never done it. By the time we’re done walking you through the process, you’ll feel right at home with CSS. For those that already know CSS, you can skip this first part of the tutorial and jump right in!

CSS - Nice and Easy

Before you can change the CSS on your site, you might want to check some tutorials at CodeCademy or Mozilla. You also will need to get familiar with “Inspect Element,” a great tool provided in most browsers today. This will help you find the code for anything you want to change. For more information on how to use “Inspect Element” check this from Chrome.

Finding the Code

  1. When on the front end of your site, right click in the body and select Inspect Element.
  2. This will open a window at the bottom of your screen. From here, click on:
    div id=”content_wrapper”
    You will then see the CSS codes on the right. You want to scroll down until you see the body{ code as in our screenshot.
  3. In our screenshot above, you can see we are pointing to the background-color code. If you click in the box at the #fffff you will be able to select different colors and see them right there on your screen as a preview. Note that this is only a preview but it is very helpful. When you have the color you want, copy that code for later use. Our screenshot below shows the color code changed.
  4. From the code above, we only need body { background-color: #ddd; } as that tells the script what color background we want.

Changing the Background CSS

  1. We’ll take the background code from above and put it in Admin Control Panel > Appearance > Custom CSS and then click Save Changes. Note that you can also click Preview before saving the changes and check again what the site will look like before you commit the changes by saving them.
  2. If you don’t see the changes in your site, you would want to clear your browser cache.
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found