How to Change the Background Colour of Your Web Page in BlueGriffon 2.x

Chapter 4: Modifying the Background Colour


How to Change the Background Colour of Your Web Page in BlueGriffon 2.x

by Christopher Heng, thesitewizard.com

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.

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.

  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 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 »

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

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.

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.x





Home
Donate
Contact
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

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