| # WebGrid Customization |

The WebGrid Customization section supports extensive customization of its appearance and available functionality.

## Changing the version of WebGrid that you are using

The menu at the top of the section shows the version of WebGrid that you are using.

Clicking on the menu shows all the available versions (such as different languages for the dialogue).

If you select one and click "Done" then the version will change to the one you selected.

## Showing the notes attached to

The check box at the top of the section when checked causes the note which can be attached to each to be shown in some elicitation dialogs.

Since the note can contain some limited HTML specifications, this enables images and links to other web pages to be shown.

## Changing the WebGrid heading

You can change the heading at the top of every WebGrid page by putting alternative HTML in this box.

This should be in the form of a sequence of divs which will be placed inside a flex box that centers them vertically and put equal space around them horizontally.

For example, the HTML below creates a new heading with an icon from a rem0te server either side of a title.

    <div><img src="http://aserver/icon.png"></div>
    <div><h1>A Heading</h1></div>
    <div><img src="http://aserver/icon.png"></div>

## Inserting CSS styles at the end of the <head> section

You can insert CSS styling specifications in a styles section at the end of the <head> section of each WebGrid page by putting the raw CSS in this box.

For example, you can change the styling of pages by CSS that redefines some of the styles in WebGrid's style sheet.

Since pages and page elements such as buttons have ID's you can also use this to hide parts of WebGrid pages.

For example, the HTML below changes the color of several elements and hides the "Crossplot" icon.

    body {background: #FFAAAA;}
    div.a {border-color:  #00DD00; background: #BBFFFF;}
    hr {color: #00DD00; background: #00DD00;}
    button {background-color: #006600; color: #FFFFFF;}
    button:hover {background-color: #004400;}
    button.icon {color: #006600;}
    #Crossplot {display: none;}

## Inserting a tail section at the end of the <body> section

You can insert material at the end of the <body> section of each WebGrid page by putting HTML in this box.

The format is the same as that for the heading, a sequence of divs which will be placed inside a flex box that centers them vertically and put equal space around them horizontally

For example, you can add a section providing information and links to other web pages, such as that below.

    <div><h1>
    <a href="http://cpsc.ucalgary.ca/~gaines/reports/">
    Our papers
    </a>
    </h1></div>

## Allowed HTML structures

The CSS and HTML structures that WebGrid allows a user to specify are restricted to prevent malicious users from inserting material that is intended to harm others.

The CSS inserted is filtered to prevent URL's and Javascript being inserted.

The HTML is restricted to the basic forms <i>, <b>, <h1>, <h2>, <br>, <p>, <div>, <img>, <a>, and the corresponding closing forms such as </h1>.

The only modifiers allowed are src = url for <img>, href = url for <a>, and class = type where appropriate.

The meta-form <WG> is allowed in a heading and is expanded to the WebGrid icon, with a link to open the grid in RepGrid if the client is local to the server.