Task 2: Removing styling from buttons

1.

If you haven't already done this for Task 1, find the Hot Potatoes source folder, and copy the hp6.cs_ file into your custom source folder.

2.

Open the hp6.cs_ file in your text editor. (Make sure you open the copy in your custom folder, not the original one!)

3.

Search for this text:

/*BeginNavBarStyle*/

This is the beginning of the code which handles navigation bar appearance.

4.

The first selector, div.NavButtonBar, controls the navigation bar itself. We don't want to change that, so move below it to the next selector, .NavButton.

5.

On the line before before .NavButton, type a slash followed by an asterisk (a star). This marks the beginning of a comment. Then leave a space, and type your "handle", and a short explanation of what you're doing, like this:

/* MDH_Custom: commented out navigation button styles to make buttons appear like standard HTML buttons.

6.

Now scroll down until you see this:

/*EndNavBarStyle*/

This is where we close our comment. On the line before, type an explanation, then a star followed by a slash, like this:

MDH_Custom: end commented-out section. */

Now everything between /* and */ has been commented out, so the browser will ignore it.

7.

This is what you should see:

/*BeginNavBarStyle*/

div.NavButtonBar{
[inclNavBarColor] background-color: [strNavBarColor];[/inclNavBarColor]
[...]
}

/* MDH_Custom: commented out navigation button styles to make buttons appear like standard HTML buttons.
.NavButton {

[...]

MDH_Custom: end commented-out section. */
/*EndNavBarStyle*/

8.

Save the file, then create an exercise in JQuiz and view it in your browser. Here's an example.