Since the default web page that you created with BlueGriffon in Chapter 1 has a white background, you may have wondered whether you can change it to a different colour ("color" if you use a different variant of English). This chapter shows you how you can do this. In fact, you can change the header, left and right columns and footer so that each of them have a different colour if you wish.
For those who have just arrived at this article from outside thesitewizard.com, please note that this is chapter 4 of the BlueGriffon 1 tutorial series. If you're new to using BlueGriffon, you may want to start from chapter 1 since I will assume that you already know the things taught earlier. However, if you have never even made a website before, the best place to start is from the absolute beginning, from How to Make / Create Your Own Website.
By the end of this chapter, you will have changed the background colour of parts or the whole of your web page.
Note: even if you are satisfied with the appearance of the background of your page, please do not skip this chapter. It introduces the tags displayed on the status bar which will be useful for other tasks you may want to do in the future. (Don't worry if you didn't understand the previous sentence, particularly words like "tags" and "status bar". They will be explained in the course of the article.)
If you want to change the background of the left column, click your mouse somewhere in that section to put your cursor there. Likewise, if you want to change the right column, click somewhere in that area. If it's the header section or the footer section that you want to modify, put your cursor in those sections instead. If you want to change the colour of your entire page, it doesn't matter which part of the page you click; just click something in your content. For example, click one of the words in your right column.
Look at the status bar at the bottom of the BlueGriffon window. The status bar is the line just below the
"Wysiwyg" and "Source" buttons. For example, when I put my cursor in the right column, the status line says
"<body><div #doc3 .yui-t1><div #bd><div #yui-main><div .yui-b><div .yui-g><p>".
The exact words that are displayed in that line will differ depending on which portion of the
page you clicked, so don't worry if yours don't match mine.
I shall refer to these mysterious words, enclosed in angle brackets, as "tags". For example, I will treat
"<body>" as one tag, "<div #yui-t1>" as another, and so on. That is,
I will refer to each string of seeming gibberish words enclosed in angle brackets ("<" and ">") as a single tag.
Technically-speaking, the words on the status bar are not 100% HTML tags. They do contain HTML tags, but also include some information about the CSS classes or identifiers they use. Don't worry if you didn't actually understand the previous sentence. I'm merely saying this for the sake of those who are deeply curious about what those letters mean. If the words "HTML" and "CSS" sounds like more mumbo jumbo to you, and you wish to know what they mean, please see What are HTML, CSS, JavaScript, PHP and Perl? Do I Need to Learn Them to Create a Website?
Each of the tags in the status bar are actually clickable buttons. Clicking any of the tags will cause certain elements of your page to be selected. You'll now need to click one of these tags, the exact one depending on what you want to change.
If you want to customise the background of your right column, click the "<div .yui-g>"
tag. If you cannot find "<div .yui-g>" in your status bar, it means that your text cursor
was not in the right column to begin with. Rectify it by clicking somewhere in the content of your right column.
Notice that when you click the tag, everything in your right column, and only the right column, is selected (ie, highlighted).
Changing the background of the header (the horizontal bar at the top of your page spanning both columns)
is somewhat tricky due to numerous bugs in BlueGriffon 1.7.2 (the current version at the time I write this).
In theory, the idea is to click the tag that comes after "<div #doc3 .yui-t1>", which
should be "<div #hd>". In practice, that tag is sometimes missing (due to BlueGriffon
deleting the HTML code for it by mistake), sometimes replaced, and sometimes unclickable
(due to another bug where the status bar is not updated to reflect the changes made by the first bug).
For those who are curious about the bug: in chapter 2, after you delete the words "PAGE HEADER" (leaving the entire header
section empty) and then insert an image (ie your logo), BlueGriffon takes it upon itself to also delete the entire section
of your page represented by "<div #hd>". To compound the problem, it doesn't update the
status bar when it does this. As a result, even though the bar still shows "<div #hd>",
clicking it will have no effect since that entire part of the page has disappeared.
If you have inserted and centred your site logo, as was suggested in chapter 2,
BlueGriffon will have created a new "<div>" section for the image (so that it can centre it).
Click this "<div>" tag, which is just after "<div #doc3 .yui-t1>".
Your logo should be highlighted. Go on to the next step.
If you didn't insert any image, but have only replaced the words "PAGE HEADER" with other words, the
"<div #hd>" tag should still be around. (BlueGriffon only deletes that section if you insert
an image.) Click it. The words in the header should now be highlighted. Move on to the next step. Note: if you
don't see this tag, but find instead an unclickable "<div>" tag (due to yet another bug or series
of bugs), save your page, close BlueGriffon, and start it again. You should now be able to see the
"<div #hd>" tag when you click your header section, and the tag itself should also be clickable.
If you have inserted an image without centring ("centering") it, BlueGriffon will have deleted the "<div #hd>"
section without replacing it with anything. One simple workaround that doesn't require you
to muck around the underlying HTML code is to click the logo to select it (which will cause the duplicate image
bug mentioned in chapter 2), click the "Align center" button on the toolbar (see picture below),
and since you really don't want it centred, click the "Align left" button (the button to the left of the "Align center"
button) immediately afterwards. This will force BlueGriffon to create a new "<div>" section
around your image. The status bar will however not show this new tag (due to a bug). So you will need to save
your file, close BlueGriffon and start it again. When you do this, you will see the a new "<div>"
tag in the status bar. Click it to highlight the logo.
To modify the background of the footer (the horizontal bar spanning both columns at the bottom of your page),
click the "<div #ft>" tag.
If you prefer to set a background that spans both the left and right columns, but not the header and footer,
click the "<div #bd>" tag. To see this tag, your cursor should be in either the left
or right columns to begin with. You will notice that when you do this, the contents of both columns
are selected, but not the header or footer.
To set a background colour for the entire web page, click the "<div #doc3 .yui-t1">" tag.
(An alternative is to click the "<body> tag, which is the overarching tag that covers the
entire web page. If you don't know what to do, just click the "<div #doc3 .yui-t1">" tag.)
To set a colour for the left column, click the "<div .yui-b>" tag.
With the appropriate tag clicked in the previous step, you can now invoke the dialog box from which you can choose a colour. This is easily done from the user interface. Look at the lowest toolbar near the top of the BlueGriffon window. You should be able to spot two circles next to each other. If you hover your mouse over these circles, you will see a tooltip that says "Foreground" for the left circle, and "Background" for the right. In fact, those who have changed the colour of their words in chapter 3 will remember these buttons from that chapter.
Click the button that has the "Background" tooltip. This brings up an untitled pop up window with the colour picker. Click the colour you want, followed by the "OK" button. The change should be immediate, although you may have to click somewhere on your page to remove the highlighting you did in the earlier step, so that you can admire your new colour scheme in its full glory.
As before, save and publish your page. Then check the results out in a real web browser.
In the next chapter, you will learn how to create clickable links on your page.
Copyright © 2014-2018 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
