Quick Tip: How to change the template’s background color

May 1st, 2012

Have you gotten bored of the color of your website? Do you want to give it a personalized touch? Changing the background color of your Webnode template is fast and easy. It’s not even all that complicated as it might seem. We’ll show you how.

Please note that this process will be valid for templates for personal websites only in the following categories: Ambiente, Cyberia, Minimal, Depot, Joyee and Synergic . (It’s possible also for templates Groovy, Motions Growic and Beame, but the change will only be reflected in the template’s lower half.) Other types of templates do not have a simple background, which does not allow color alteration.

Follow these 3 steps:

1. In Webnode’s editor, click “Web Template” and select “Advanced settings”. Now go to “Edit CSS”.

2. Scroll to the bottom of the coded text and paste in the following code:

points, # body_bg

{Background-color: # FF0000;}

The color is defined by the alphanumeric code (letters and numbers). In our example, this code is FF0000.
This code is all you need to modify, for your background color to change. (Do not change the hash # and the semicolon! :)

3. How to modify the code to the color you want? Just go to the website colorschemedesigner.com, choose a color, and copy the code called “RGB” to paste in the CSS.
If you find it difficult to find your desired color on the page, you can use alternative colorpicker.com.

How did you change your background? Be sure to also read the step-by-step guide for working with the website builder.