How to Change the Background Colour of Your Web Page in BlueGriffon 2 and 3

Chapter 4: Modifying the Background Colour

How to Change the Background Colour of Your Web Page in BlueGriffon 2 and 3

by Christopher Heng,

By default, the background colour ("color" in US English) of your web page is white, unless you changed it when you used the Layout Wizard in chapter 1. This article shows you how to modify it for the various sections of the page, such as the entire left or right column or both.

For those who have arrived here from outside, note that this chapter presupposes that you have done the things covered earlier. If you are completely new, I recommend that you start from the beginning, with the steps to build a website.

Goal of This Chapter

By the end of this chapter, you will have changed the background colour of one or more columns of your web page, or perhaps even the whole page.

How to Change the Background (and Foreground) Colour of an Entire Column or Web Page

  1. If you want to change the background colour of the left or right column, header section or footer section, click to put your text cursor somewhere in that part of the page. And to modify the colour of the entire page, change it one column (or section) at a time.

  2. Look at the tags on the status line. If you recall from chapter 3, these are found near the bottom of the BlueGriffon window.

    For example, if you clicked somewhere in the right column, the tags at the bottom will look something like the following.

    Tags in the status bar when cursor is in the content column
  3. The tags are labels for the different sections of your web page.

    div#tswsidecol — refers to the side (or left) column
    div#tswcontent — refers to the content (or right) column
    div#tswfooter — refers to the footer
    div#tswheader — refers to the masthead or header section
    div#tswcontainer — contains the header, footer, left and right columns (more on this later)

    Note that you will not be able to see all the tags on the status bar simultaneously. For example, the tag for the left column (ie, div#tswsidecol) will not appear unless your text cursor is currently in that column.

    To modify the background colour of a particular section or column of the page, click the tag corresponding to that section or column. For example, if you want to change the colour of the right column, click the div#tswcontent tag. The corresponding column or section of the page will automatically be highlighted.

    Remember that if you want to change the background colour of the entire page, you will have to do it column by column. Simply setting the colour for the div#tswcontainer tag will not work. In fact, ignore that tag for now. I will discuss it later in this chapter.

    (This boxed section is only for those who chose a 3-column layout, contrary to my suggestions in chapter 1. The majority, that is those who followed by recommendations and chose a 2-column layout, should skip to the next point. Otherwise, you'll just confuse yourself unnecessarily.)

    If you chose a 3-column layout for your website instead of 2-columns, the tags are slightly different:

    div#tswsidecol — sets the colour of one of the side columns
    div#tswothersidecol — sets the colour of the other side column
    div#tswcontent — sets the colour of the content column
    div#tswfooter — sets the colour of the footer
    div#tswheader — sets the colour of the header
    div#tswcontainer — sets the colour underneath div#tswsidecol
    div#tswcentrecombo — sets the colour underneath div#tswothersidecol

    If you opted to have the left column as the bottommost column in mobile phone order, div#tswsidecol refers to the left column, and div#tswothersidecol the right. Otherwise it's the other way around. If you accepted all the defaults in the Wizard when you generated a 3 column layout, div#tswsidecol is the left column.

  4. Open the "Style Properties" panel by clicking "Panels | Style Properties" from the menu.

  5. Make sure that the "Apply styles to" field shows "this element only through its ID".

  6. Click the "COLORS" line in the panel to expand the section. To change the background colour, click the "Background" circle and select a colour from the Color Picker dialog box. When you're done, close it with the "OK" button. The foreground colour, or text colour, of the entire section or column can likewise be changed by clicking the "Foreground" circle.

  7. The effect on the page should be immediate.

How to Fix the Uneven Columns

After you have changed the colour of one or both columns, you will find, to your horror, that the colour of the shorter column ends abruptly where the text ends, leaving you with possibly very ugly results (depending on the design of your page and the colours chosen).

Here are some possible solutions.

Save and Check the Results

Save your work and check the results in a web browser.

Next Chapter

In the next chapter, you will learn how to create links to other pages and websites.

Copyright © 2017-2019 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from

You are here:

Top » Getting Started with Your Website »

How to Create / Make Your Own Website: The Beginner's A-Z Guide » List of All BlueGriffon Tutorials »

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Change the Background Colour of Your Web Page in BlueGriffon 2 and 3

Link to Us
No Spam Policy
Privacy Policy
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Web Hosting
Perl / CGI
.htaccess / Apache


Free webmasters and programmers resources, scripts and tutorials Free How-To Guides
Site Design Tips at
Find this site useful?
Please link to us.