Help
Custom Welcome Page Example

This example demonstrates how to customize the welcome page and login page, which is where end-users enter their credentials. It features uploading HTML and image files to a domain.

You can download the source files from CustomWelcome.zip.

In this example, we use the same page for both the welcome page and the login page. The customized pages look like this:

custom welcome page

Create the Welcome HTML Page

A custom welcome page is an HTML page that BrainHoney displays instead of the standard welcome page when an end-user enters BrainHoney. The login page is displayed when an end-user loses their authentication or attempts to access a BrainHoney URL without having signed in first. Both pages include the BrainHoney-supplied login control, which prompts the end-user for their username and password. In this example, we use a single custom page for both the welcome and login pages. (If we chose to, we could define separate pages.)

1.

Create an HTML file named welcome.htm. Include whatever styling and images you want. We start with a simple table with a cell for a logo image.

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome to Education Online</title>
    <!-- Include dependencies for the login control -->
    <% LoginHeader %>
    <style type="text/css">
        label, a:link, p
        { 
            color: White;
        }
    </style>
  </head>
  <body>
    <table style="margin: 150px auto auto;">
        <tr>
            <td>
                <img src="Images/my_school.png" />
            </td>
            <td>
                <div style="padding: 10px; margin: 10px; background-color: #208020">
                    <!-- Include the standard BrainHoney login control -->
                    <% LoginControl %>
                </div>
            </td>
        </tr>
    </table>
  </body>
</html>
2.

Beneath the title element but above the style element in the head element, include the <% LoginHeader %> tag, which includes required login logic. We include it above our style element so that any of our custom styles override the standard ones included by the tag.

<title>Welcome to Education Online</title>
<!-- Include dependencies for the login control -->
<% LoginHeader %>
<style type="text/css">
3.

Add a cell in the table for the BrainHoney login control, which is where end-users enter their username and password. Include the BrainHoney-supplied login control by including a <% LoginControl %> tag.

<table style="margin: 150px auto auto;">
  <tr>
      <td>
          <img src="Images/my_school.png" />
      </td>
      <td>
          <div style="padding: 10px; margin: 10px; background-color: #208020">
              <!-- Include the standard BrainHoney login control -->
              <% LoginControl %>
          </div>
      </td>
  </tr>
</table>

Now that the page is created, you can upload it to your domain.

Upload Welcome Page

You upload the welcome page and its accompanying images to your BrainHoney domain content folder.

1.
admin gear

Log into BrainHoney with a domain administrator account and click the Administrator gear icon to open the administration page.

2.
content tab

Click the Content tab to display the domain's content files.

3.
upload content dialog

Click the Upload Content button, choose the saved welcome.htm file and then click [OK]. Repeat for all images (in this case, my_school.png) referenced by the page, but specify "Images" for the Upload Folder, since that is where welcome.htm references them.

If you are familiar with FTP programs, you can avoid the individual uploads and clicking by simply FTPing the files to the URL displayed in the bottom right corner of the Content tab.

Configure the Domain to use the Welcome Page

Now that the files are uploaded, configure your domain to use the welcome page.

1.
admin gear

Log into BrainHoney with a domain administrator account and click the Administrator gear icon to open the administration page.

2.
customization tab

Click the Edit button to open the Edit Domain dialog and then click the Customization tab.

3.

Locate the existing <files> XML element; otherwise create one. (See files for more details.) Within it, add two file elements: one for the welcome page, and one for the login page, which is displayed when an end-user's connection is lost:

<files>
<file type="welcome" path="welcome.htm"/>
<file type="login" path="welcome.htm"/>
</files>

Click [OK] when you are done.

4.

Log off and log back in to BrainHoney to see the new welcome page. To see the login page, navigate to a page such as a gradebook page, copy the URL from the browser's address bar, click log out, and then paste the URL back into the address bar and press enter.