Creating a ProBoards forum colour scheme

This tutorial was written for GIMP, a free graphics editing program.

About this tutorial

This ProBoards template tutorial was written mainly for those who have no experience in web design. I have chosen to write this tutorial for the GIMP graphics program because it is free and available to everyone.

Download and Install GIMP

Windows users can install GIMP quickly and easily, by visiting GIMP for Windows, and clicking on the link Automated installer, followed by Download > Stable Version, in the main menu.

Two programs are needed to run GIMP. First Gimp itself: The GIMP for Windows (version 2.2.13, fixed installer), and also GTK+ 2 Runtime Environment, for either older or newer versions of windows.

After downloading both programs, extract the zip folders and install. The GTK+ 2 Runtime Environment needs to be installed first.

And that’s all there is to it.

Creating a ProBoards forum colour scheme

Contents

1. Background and Foreground Colour Boxes
2. Using the Bucket Fill Tool
3. Using a ProBoards Canvas
4. Window Colour(s)
5. Title and Category Backgrounds
6. Forum Background Colour
7. Border Colour
8. Window Highlight Colour
9. Using the Text Tool in GIMP
10. Foreground/Text Colours
11. Select the colours using the Colour Picker Tool
12. And Finally… (inputing the forum colours)

Before we can get started on choosing forum colours, I’ll give a brief guide to selecting and applying colours in the GIMP.

Background and Foreground Colour Boxes

The Background and Foreground Colour Boxes are located at the bottom of the Toolbox.

The top colour box is the Foreground Colour, and the bottom colour box is the Background Colour.

Click on one of the colour boxes to select, and click again to open up the Colour Selection Dialogue.

The colours can be changed by moving the sliding rules on the colour box, and gradient bar. The hex colour code is also generated in the HTML Notation box. Hex Colour codes are used to input colours for ProBoards Forums.

Using the Bucket Fill Tool

The Bucket Fill Tool is easy to use. I’ll give a brief explanation and then we can move one to actually creating a colour scheme.

Go to File > New (or Ctrl + N), to open the Create a New Image Dialogue, and make these settings:

1. Width: 200 pixels
2. Height: 200 pixels

And Press OK.

In the Toolbox, select the Paintbucket Icon

In the Bucket Fill Palette Check BG Colour Fill.

Double-Click on the Background Colour Box to open up the Change Background Colour Dialogue, and select any colour.

Place the Cursor over the blank canvas and click to fill the image with the selected colour.

We will use the Bucket Fill Tool entirely for applying colours to the ProBoard Canvas.

Using a ProBoards Canvas

Adding Colour codes directly into your forum before you have a set colour scheme is time consuming, not to mention rather frustrating. I’ve found that it helps to create the colour scheme first, and then when done, input all the colour codes together.

To do this I use an image I call my ProBoards Canvas, which you can save, and open up in GIMP (File > open).

Window Colour(s)

The window colour is the most important background colour for the forum. This is the colour that will predominate all the other colours, and it is important that it is appropriate for your forum members. A Heavily white/light colour is the safest route to take when choosing a window colour, as a majority of people find it difficult to stare at a dark screen for long periods of time.

Also, we should avoid any mid-range window colours, if we want to provide enough contrast between the background and the foreground/text colour. If the background and text are not clearly defined, there is a risk that many members (including potential members) will not be able to read the text on their monitors.

A brilliant tool for assessing your background and foreground colours is Jonathan Snook’s Colour Contrast Check.

Select the Magnify Tool, and with Zoom In Checked, click on the image twice to enlarge.

Click on the Background Colour Box to open up the Change Background Colour Dialogue Window.

Select a Window Colour, and Press OK. For my Window Background Colour, I’m choosing a light green-blue hue.

Select the Bucket Fill Tool, with BG Colour Fill checked, and fill the window backgrounds on the ProBoards Canvas.

Title and Category Backgrounds

Eventually, we will be adding images, known as gradients, to the Title and Category Backgrounds. For now they can be filled with the same colour as the window Background.

Forum Background Colour

For the background colour I’m using a darker shade of the window background colour. There are a few things that need to be considered when choosing the background colour. The background also contains text and link colours, so we need to provide enough background-foreground contrast.

However, we will also be using an image for the background that will be a much lighter colour (while retaining the html colour code for the borders of the background), in which case, we needn’t worry to much about providing enough contrast, at this stage.

When you have selected your background colour, select the Bucket Fill Tool, with BG Colour Fill checked, and fill the forum background on the ProBoards Canvas.

Border Colour

For the border colour, I’m using a darker shade of both the window and body backgrounds. You’ll notice that the solid back colour makes the forum boards look boxy. We want to use a colour that is both well-defined and well-balanced with the window and body backgrounds, yet visually softer than the solid black.

Use the Bucket Fill Tool to add the border colour.

Window Highlight Colour

The window highlight colour appears when hovering over a board over thread table cell. I’m using a lighter almost white shade of the window background colour.

Using the Text Tool in GIMP

Before moving on to the foreground colours, I’ll give a brief explanation on how to use the Text Tool in GIMP.

Reset the Colour Boxes to Default (Press D), and go to File > New (or Ctrl + N), to open the Create a New Image Dialogue, and make these settings:

1. Width: 200 pixels
2. Height: 200 pixels

And Press OK.

In the Toolbox select the Text Tool (or press T).

You can alter the text using the Text Tool Palette. Click on the Font Dropdown List to display the Typesets installed on the computer.

Each Typeset has four font settings:

1. Normal
2. Bold
3. Bold Italic
4. Italic

The text colour can be changed by clicking the font colour bar, and opening the Text Colour Dialogue Window.

Click on the blank canvas to open up the GIMP Text Editor Dialogue Window, input some text.

While the text is selected you can continue editing the text in the Text Tool Palette.

Each new text selection made creates a new layer. Open the layers palette, and go to Dialogues > Layers (or press Ctrl + L), to view all layers.

To move the Text Selection, select the Move Tool in the Toolbox (or press M), and click on the text layer in the layers palette.

That’s pretty much all we need to know about the text tool for this tutorial. Now we can move on to the foreground colours.

Foreground/Text Colours

The foreground colours can be broken down into two main groups:

1. Title, Category, and Links: 2 colours
2. Main Text: 1 colour

Title, category, and link colours

For the Title Category and links, we need to choose a colour that will stand out from the main text colour.

Complimentary colours

A possible solution in choosing a foreground colour, would be to use a colour that is complimentary to the background.

Complimentary colours are colours that oppose each other when displayed on a colour wheel.

Because I used a blue-green hue for my background colour, I am using an orange-red hue for my Title, Category, and Link Colours.

The Font settings are:

1. Font: Verdana Bold
2. Size: 13 pixels
3. Hinting: Checked
4. Force auto-hinter: Unchecked
5. Antialiasing: Unchecked

For the main link colour I’m reverting back to the blue-green hue.

Main text colour

For the main Text Colour, I am using a very dark shade of the blue-green hue, for maximum readability.

The board description font settings are:

1. Font: Verdana
2. Size: 10 pixels
3. Hinting: Checked
4. Force auto-hinter: Unchecked
5. Antialiasing: Unchecked

The board italic font settings are:

1. Font: Verdana Italic
2. Size: 10 pixels
3. Hinting: Checked
4. Force auto-hinter: Unchecked
5. Antialiasing: Unchecked

Select the colours using the Colour Picker Tool

Now we have all our forum colours, we can make preparations to input them into the forum.

In the Toolbox, select the Colour Picker Tool (or Press O), and select the Background Layer in the Layers Palette.

In the Dropper Tool Palette check Set Background Colour.

Use the dropper tool to select the background and foreground colours. When you click on the image layer, the Colour Picker Infomation dialogue will open up. If you have selected the correct colour, press close.

Next, click on the Background Colour Box to open up the Change Background Colour Dialogue, And copy and paste all the colour codes in a text editor (eg: notepad).

Remember to click on the appropriate Text layers in the Layers Palette when colourpicking the foreground colours.

Window Background 1: ecf8f5

Also add to:
Window Background 2
Title Background
Category Background
News Title Background
News Background
Popup Window Background
Popup Window Title Background

Board Highlight: f0f9f7

Also add to:
Thead Highlight

Background: cddbd8

Border: a8bab6

Text: 2d5f54

Also add to:
Popup Window Text

Main Link: 8aaca5

Active Link, Visited Link, Title and Category Text: e74d3d

Also add to:
News Title Text
News Text
Popup Window Title Text

And Finally…

All that’s left now is adding the colours to the forum itself.

This is the end of the ProBoards forum colour scheme tutorial. I hope you have found this tutorial helpful. Why not post your results? I’d love to see them

If you are having difficulties with this tut in any way, leave a comment, and I’ll try and help out