Swapping colours on buttons in HotPotatoes exercises

Introduction

When I create exercises in HotPotatoes I usually have a series and try to be consistent in colours for a given set of exercises. So I have a modified source for several occasions.

In HotPotatoes exercises, when you mouse over the buttons they usually appear as either black or white. This depends on whether you have a dark or light background colour. However, the default black or white mouseover state is not to my liking, so here's how I swap colours. I usually choose a light background for the page (like silver, gray, smoke, etc.) with a dark navigation bar (navBar) and white exercise background. See this:

First, we need to identify the three states of the buttons. Then carefully chose the colours to swap. The trick is to figure out and remember what changes what.

Let's get going. First, make a copy of the hp6.cs_ and put it in a folder called modified.
(This is where I keep all my modified source files.) This file provides all the design and layout declarations. Let's change the colours for the function buttons. These are Check, Hint, Clue, OK, Show Answer, etc.

Open hp6.cs_ with a text editor, like Notepad, or better Notepad++. Find the following:

.FuncButton { - the normal state of the button
.FuncButtonUp { - when the mouse is over the button
.FuncButtonDown { - the state of the button when pressed down
They have the different colour and other values.

.FuncButton {
        .....
	color: [strTextColor];
	background-color: [strExBGColor];
        .....
}

We are interested in particular in:
color: [strTextColor]; - the text colour in normal state
background-color: [strExBGColor]; - the background colour of the button in normal state

As you can decipher from the above, [strTextColor] is the colour of the text of the button; and [strExBGColor] is the background colour of the button, which is the same as the background colour of the exercise. Each of these will have the values you specify in the config dialogue box of HotPotatoes.

The state of the button when the mouse cursor is over the button.

.FuncButtonUp {
        .....
new:    color: [strExBGColor]; 
new:    background-color: [strTextColor];
        .....
// ( this is the "mouse over" state and colours just swap
// so why not swap them with a fixed colour value like #ff0000 or
// the page background colour or one of the shades generated by the HP)
}

The state of the button when clicked.

.FuncButtonDown {
        .....
new:    color: [strExBGColor];
new:    background-color: [strTextColor];
        .....
}

You'll say, hang a sec! What happened?

Let's recap.

1. We are now editing a copy of 'hp6.cs_' file which you have in a folder called 'modified'.
2. We are editing the colours of the buttons when a function button, like 'Check', is 'moused over' and 'pressed down'.
3. We swapped the background with the text colours of the buttons

In more human terms, this is what we'll get when we generate the exercises:

//Normal state
color: #000000; //black
background-color: #ffffff; //white

//Mouseover state
color: #ffffff; //white
background-color: #336699; //blue

//Mouseclick state
color: #ffffff; //white
background-color: #336699; //blue

Surely, you can be more creative when swapping your colours, with three and more different colours for the three different states.

And, yes, you can do absolutely the same to swap the colours of the navigation bar buttons. You only need to find the following:

/*BeginNavBarStyle*/
 
div.NavButtonBar{ //the Navigation Bar
...
 
.NavButton { //navigation button Normal state
...
 
.NavButtonUp { //navigation button Mouseover state
 
.NavButtonDown { //navigation button Mouseclick state
...
 
/*EndNavBarStyle*/

Use the same technique to change the colours of the navigation buttons.

Finally, save your file and use it whenever you need.

Rate this: Currently2.95764705882/5 Stars 1 2 3 4 5 Votes: 425

Share it:

Write a comment

• Required fields are marked with *.

Name:
Email:
Subject:
Comment: *

Security Code: