How Do I Change Site Colors Using CSS?

This document will walk you through the process of changing the colors of a website.

Step 1: Find the Element/ID of the content you want to change.

1. Open the website builder.
2. Find the target content.
3. Select the layout element that contains the target content.
4. Click the code button on the toolbar.
5. Select View HTML.
6. Find the element you would like to change.

Fig. 1: Example Site, Example Content

This brings up the HTML Editor (Fig. 2) which contains a code for the content block that is currently selected. If you need to find additional values outside the current content block, you will have to close the HTML Editor and activate the content block you would like to edit.

Fig. 2: The HTML Editor

Once you are in the html editor, you will find your content. In this case, you may want to change the text color of the main paragraph. Scroll down to see the text (fig. 3).

To edit the colors of the content shown in Fig 1, you would:

1. Find the content you want to edit.
2. Click on it to make it the focus.
3. Click the code button in the website builder toolbar.
4. Click the View html button.

Fig 3. The Example Content

It has no class or ID, which means it is a global element. You would style it in one of three ways.

Step 2: Figure out how you are going to change the element.

1. If you use the style multiple times, you should assign a class to the element, for example, <p style="exampleClass;">.
2. If you are only going to use this style once, you should assign an ID to the element, for example, <p id="exampleID>.
3. If you are editing an existing style, scroll down to that element or hit Ctrl+F and type in the class or ID you are looking for.
4. If you do not want to follow standards OR need to override values that are present at the global, class, and ID levels, use an inline style <p style="color: #333333>.

Step 3: Making the Change

1. Go to the Site Design tab.
2. Scroll down to the bottom.
3. Create a comment (i.e., /*This is a comment*/) explaining what your code does.
4. Place your code below the comment.

Fig. 4: The CSS Editor with added styling

In Fig. 4, the created .p2 would be assigned to the <p> tag you saw earlier in the html editor. Once you hit OK, those changes would take effect, and you will see them in the builder.

This method can also be used to change the background color of the website. The CSS property you would look for is background color, and it will most likely be in the body style or in the various "divs" and tables, which make up the layout.