Top Navigation

How to Change the Background Color of a WordPress Website

This is my first post on coding and programming for WordPress tutorial, so I am gonna start with basic things to advance tutorials on WordPress.

Changing the Background Color of Your WordPress Website:

In order to change the background color of your WordPress website, you need to log in to your WordPress back end. For those who already know how to log in to your back end its well and good.

But for others, if you are not familiar with it, just replace “yourwebsite.com” with your actual domain name followed by forward slash and wp-admin.

http://yourwebsite.com/wp-admin

After you type in your website URL follow by forward slash with wp-admin, you would be required to enter your username and password to authenticate the ownership of your website.

WordPress theme’s layout, colors, background and other design elements are controlled by the style.css file of the WordPress theme. You need to modify the CSS code of the theme to change its background color. It is quite easy to do if you follow my tutorial carefully and you need not to be a coding expert to do it.

You should have a hexadecimal color code for the website’s background color at hand which you are planning to use as the background color of your website. If you are not really sure what a hexadecimal color code looks like, please feel free to use this free hexadecimal color code generator to generate your favorite background color code.

Once you have the color code that you want to use as your website background, follow these simple steps.

You must be logged in to your WordPress dashboard. Click on editor option which would be the forth one, under the appearance menu tab.

wordpress dashboard

WordPress theme editor will show up. Now locate style.css file. You would probably find it at the lower right corner.

style.css location on wordpress

Click on the style.css and you will find the CSS code for you WordPress theme. Now here is the little more tricky part. Look for body element of your cascading style sheet (CSS). It will look something like the code shown below.

Here the in the body element you check for “background-color:” which is a CSS property which controls the background color of a webpage. It will also contain the hexadecimal code after a semicolon for you current website background. You just need to replace that hexadecimal code with the one with your favorable background hexadecimal color code and hit update.

replace hexadecimal color code

Note: Just replace “#D5D5D5” with your favorable hexadecimal code and leave everything the same as it is. Once you are done with all the steps. Check your website’s background by visiting your website (you need to refresh your web page to see the necessary changes take effect).

Feel free to put up your questions in the comments sections .

, ,

No comments yet.

Leave a Reply