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 thesitewizard.com, 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.
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.
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.
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.
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.
Open the "Style Properties" panel by clicking "Panels | Style Properties" from the menu.
Make sure that the "Apply styles to" field shows "this element only through its ID".
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.
The effect on the page should be immediate.
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.
One solution is to give everything on the page the same background colour. That way, the fact that your two columns are actually uneven won't stand out quite so much. This is the method adopted by thesitewizard.com for its pages.
(You may also need to give the container that same colour. See the next item for more information about this.)
Another method is to change the background colour of the "div#tswcontainer" section
to the same colour as the shorter column, which for most websites, is the side column.
This tag functions a bit like the "body" tag you met in chapter 3. It is a container that holds
everything in the header, footer and both columns. Setting it to the same colour as the shorter
column causes everything behind that column to have that colour, hiding its shortness.
(To set the colour of the "div#tswcontainer" section, just click the tag on the status
bar and proceed as before to change its colour.)
A side effect of doing this is that if your header contains a logo that is narrower than the
width of the browser window, the background to that header will remain white (the default colour set
by the Layout Wizard). If this leads to the page appearing ugly, you may want to change the background colour of
"div#tswheader" as well. And remember that the "div#tswfooter" colour can also
be changed, if that is what you want.
In addition, if you change the "div#tswcontainer" colour, you may find that
there is a white border around your page. Whether this is acceptable or not depends on the
colour scheme you chose for the rest of the page. If the bulk of the page is also white, this
may not be a problem, since it will blend in seamlessly. Otherwise, you can modify the border
by clicking the "body" tag and changing the background colour there.
Save your work and check the results in a web browser.
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 https://www.thesitewizard.com/.
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 »
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Change the Background Colour of Your Web Page in BlueGriffon 2 and 3
