The official manual for version 3.1 (which we are using) costs £7.50. However, a manual for version 1.7 has been made available unofficially - most of the basic usage is still similar, although the secondary toolbar has been moved to the left of the window and "floating panels" have been removed.
TheSiteWizard Tutorials: a fairly up-to-date selection of how-tos.
FlossManuals tutorial: this is over 10 years old, so it will be for a very old version of BG, but it might be useful.Chass IT tutorial: another old one.
BlueGriffon Google group: searchable forum - might be useful if someone has already figured out how to do what you want.
This is below the menu bar, and contains buttons for:
This is at the left side of the screen, and contains buttons for:
This is below the main toolbar, and contains:
This is at the bottom of the window, below Dual View. It displays the hierarchy of elements that enclose the current position of the text cursor ("caret").
Unless specified otherwise, these tips assume that you are working in Wysiwyg mode.
You can select the whole document by selecting the <body> element.
For setting colours, an alternative to steps 2-5 is to click one of the circles in the colours icon (5th from top in secondary toolbar). The top/left circle is for the foreground colour, and the bottom/right circle is for the background colour.
There's more info on thesitewizard.
If you want to set the foreground colour, you can (instead of steps 2-3) click the top/left circle in the colours icon (5th from top in secondary toolbar). This method will create the <span> element automatically. If you try to set the background colour this way, it sets the background colour of the containing element (e.g.paragraph).
The quickest way I've found:
I regularly have problems with the text cursor not being displayed (happens always after a popup dialog has been closed?). The quickest way I've found to restore it is to click on another window and then back on the BlueGriffon window.
You can insert a line break using Shift-Enter.
An alternative is to configure Enter to produce a line break by unchecking Tools:Preferences:Documents:Return key in a paragraph always creates a new paragraph and closing the popup dialog. If you do this, you have to press Enter twice to get a new paragraph.
If the first element is a paragraph or heading, you can simply move the text cursor to the beginning of the paragraph/heading, press Enter and then Up-arrow. If you want to insert a paragraph before a heading, you will need to change the new element type from Heading to Paragraph.
If the first element is not a paragraph or heading (e.g. an unordered list, TOC or table), this method doesn't work. In this case, use the following method:
If you want to know what HTML elements there are in the document (without switching from Wysiwyg to Source or Dual View), there are two ways:
Format:Page Properties opens a dialog where you can set these:
HTML comments are not visible when the page is viewed in a browser.
When you create a table of contents, BG inserts an anchor (<a> element with an ID, but no href link) in each element referred to by the table of contents. By default, an anchor icon is displayed for each icon, but you can hide these using Tools:Preferences:Documents:Show[aname].
Press Enter and then click Indent text,
or press Shift-Enter and then click Unordered list.
Click the Insert or refresh Table of Contents icon (2nd from right on main toolbar).
There are buttons in the secondary toolbar for indenting and alignment (left, middle, right, justified).
These can be handy for quick use in simple notes files, but they work by inserting inline CSS and so are not very controllable. They cannot easily be overridden by CSS in an external stylesheet or a <style> element.
For example, the indent button produces inline CSS for a 20px left margin. If you wanted to change this (say to 3rem), you would have to edit the HTML source everywhere you wanted the change. A better way would be to add a class to the elements you want to indent and use CSS in an external style sheet to specify the indent.
As another example, if you wanted all <h2> headings to be centred, it's easier and more controllable to specify this in an external stylesheet than to click the centre-align button whenever you insert an <h2> heading.
There are several options for where CSS rules can be placed:
In general, the best place to put CSS is in external stylesheets. These can be shared by multiple HTML files, which provide consistent formatting across the files and make it easy to apply changes in appearance to all the files.
The next best place for CSS is in the <style> element. This enables HTML files to be standalone, but obviously requires editing all the HTML files if you want to make a global change in appearance.
The <style> element can be useful for trying out CSS, particularly for colours since you can use the colour dialog. Once you are happy with the CSS rules, they can be copied out to an external stylesheet.
The <style> element is used to put CSS in the document header. CSS placed here is obviously specific to the document, and can be used to override CSS in external style sheets.
You create the <style> element if you use any of the options in the Style Properties panel other than this element, through inline styles (i.e. this element only through its ID, all elements of class..., or all elements of the same type...).
You can also insert a <style> element manually by:
You can insert more than one <style> element, but I don't know of any reason to do so.
You can insert/edit CSS by double-clicking <style> displayed in the Stylesheets panel below URL, or by:
The browser will load the stylesheets in the order they are listed, so rules in later stylesheets can override rules in earlier stylesheets. You can move a stylesheet up or down in the list by selecting it (by clicking on it) and clicking the up and down triangles at the bottom right of the panel.
Note that the <style> element (if any) is in the same list as the external stylesheets, and can be moved up or down in the same way. It's probably best to have it at the bottom of the list, so that it can override the external stylesheets.
You can edit the URL of the stylesheet by:
You can edit the content of the external stylesheet file by:
although I normally prefer to use Vim to do that.