About the Digital Hive Theme

The Digital Hive Theme is a drop-in module for your existing Digital Hive installation to help customize the user interface in a number of ways, from skinning the login page, to adding your own fonts for use in Game Boards.

The Digital Hive Theme comes packaged with Digital Hive. You can find it under the /webapps/ folder of your Tomcat application server, at the following location: {Your-Theia-Install-Dir}/theia/node1/apache-tomcat-{version}/webapps/theia/examples /extensions/themepack/

Using the Digital Hive Theme, you can modify user interface elements such as the login page background image and logo and the fonts used in Game Boards. In addition, you can add new fonts for use in Digital Hive pages and Game Boards.

By default, the Digital Hive login page comprises the following, customizable elements:

• A background, initially styled with a gradient grey color
• A foreground, initially styled with the image of a silhouette of mountains
• An animated Digital Hive logo
• The ‘Digital Hive’ text

Before following any of the procedures in this section, you must first copy the default Theme Pack files to the location where you will normally work with them.

About this task

Procedure

1. On the computer on which Digital Hive is installed, navigate to the /webapps/theia/examples/extensions/ themepack/ folder under the Tomcat directory of your Theia installation.
2. Copy the /themepack/ folder and its contents to the following location: {Theia Install Dir}/theia/node1/apache-tomcat-{version}/webapps/theia/extensions/
3. For all subsequent procedures in this section, use only the themepack files located at this new location: {Theia Install Dir}/theia/node1/apache-tomcat-{version}/webapps/theia/extensions/ themepack Note: If you notice a directory called examples in your path, then you are using the wrong files. Theia can only recognize Theme Pack files located in the new location shown above.

You can replace the background and foreground image on the login page with your own image file. In addition, you can completely remove the foreground image if you like.

Before you begin

• Copying the Default Theme Pack Files to the Product Location

Procedure

1. Copy or move the new image file (.JPG, .SVG, or .PNG) to the /webapps/theia/extensions/themepack/ resources/ folder.
2. Open the /themepack/extension.css file in a plain-text or CSS editor.
3. Modify the background, foreground, or both, as desired:
4. To change the background image, uncomment and modify the following CSS style rule to reference your new background image file: #loginViewBackground { background: url(./resources/{your-image-file}) !important; background-size: cover !important; }
5. To change the foreground image, uncomment and modify the following CSS style rule to reference the new foreground image file: #loginViewBackground #loginViewForeground { background-image: url(./resources/{your-image-file}) !important; }
6. To remove the foreground image completely, uncomment and modify the following CSS style rule as shown: #loginViewBackground #loginViewForeground { background: none !important; }
7. Save and close the file.

Next Steps

Referesh your web browser to see the results.

You can customize the login page animated orbiting image, Digital Hive name, or both in a number of ways.

Before you begin

• Copying the Default Theme Pack Files to the Product Location

About this task

By default, the Digital Hive logo consists of two graphic images: an animated orbiting logo and an image of the word, "Digital Hive". You can replace the animated orbiting logo, the "Digital Hive" image, or both with either another image or formatted text.

1. On the computer on which Digital Hive is installed, navigate to the /webapps/theia/extensions/themepack/ folder under the Tomcat directory of your Theia installation.
2. In the /webapps/theia/extensions/themepack/templates directory, rename login.gatewayEXAMPLE.html as login.gateway.html. Note: In addition to modifying the login.gateway.html template, you can also modify the wrapper template that styles both the registration and login pages. See comment in the code for more information.
3. Open the /themepack/extension.js file in a plain-text or JavaScript editor.
4. Locate the following line: //customTemplates[ themer.TEMPLATES.LOGIN_GATEWAY ] = 'login.gatewayEXAMPLE.html';
5. Uncomment it and modify it as shown below or add the following line below it: customTemplates[themer.TEMPLATES.LOGIN_GATEWAY] = 'login.gateway.html';
6. Save and close extension.js.
7. Open the file templates/login.gateway.html in a plain-text or HTML editor.O
8. Modify the logo image, label, or both, as desired, as described in the following procedures.

You can replace the Digital Hive label (name) by modifying the login.gateway.html file in the templates directory.

Before you begin

• Copying the Default Theme Pack Files to the Product Location

1. Comment out the entire <div> tab under "<!– The original header -->", as shown:

   <!-- The original header -->
       <!-- <div layout="row" class="header-row">
           <loading-orbiter size="6.5"></loading-orbiter>
           <div flex class="theia-heading">
               <img src="extensions/themepack/resources/theia-logotext.svg">
           </div>
       </div> -->

2. Replace it with your preferred text, as follows:

   <!-- Example 1. change the Digital Hive label to another name -->
   <div layout="row" class="header-row">
       <loading-orbiter size="6.5"></loading-orbiter>=>
       <div flex class="theia-heading">
   {Your Custom Label}
       </div>
   </div>

   … where "{Your Custom Label}" is the text of your replacement label (without the curly braces).
3. Save and close the templates/login.gateway.html file.

Next Steps

Refresh your web browser to see the results.

You can change the default Digital Hive logo and name by modifying the login.gateway.html file in the templates directory.

Before you begin

• Copying the Default Theme Pack Files to the Product Location

1. In the login.gateway.html file, replace the entire tag with:

   <!-- Example 2. use a custom icon next to some text -->
   <div layout="row" class="header-row">
       <div><img src="extensions/themepack/resources/{Your-new-image-file}"></div>
       <div flex class="theia-heading">
   {Your Custom Label}
       </div>
       </div>

2. Save and close the templates/login.gateway.html file.

Next Steps

Refresh your web browser to see the results.

You can modify the size and spacing of login replacement images by revising the extension.css file in the themepack directory.

Before you begin

• Copying the Default Theme Pack Files to the Product Location
• Changing the Login Page Background and Foreground Image

1. Open the /webapps/theia/extensions/themepack/extension.css file in a plain-text or CSS editor.
2. Modify the following code block by changing the number of pixels in the style attributes shown:

   /* Example 3.1. style for a square image next to some text above the login form */
   .login-view #login-gateway .header-row img {
       width: 70px;
       margin-top: 15px;
       margin-right: 5px;
      }

3. Save and close the extension.css file.

Next Steps

Refresh your web browser to see the results.

Before you begin

• Copying the Default Theme Pack Files to the Product Location

1. Place the replacement image in the resources directory at /webapps/theia/extensions/themepack/ resources. Note: If you notice a directory called examples in your path, then you are using the wrong files. Theia can only recognize Theme Pack files located in the new location shown above.
2. In the login.gateway.html file, replace the entire <div layout="row" class="header-row"> tag with:

   <div layout="row" class="header-row">
       <div><img src="extensions/themepack/resources/{Your-new-image-file}"></div>
   </div>

3. Save and close the templates/login.gateway.html file.

Next Steps

Refresh your web browser to see the results.

If you own an appropriate license to use a custom web font, you can add it to the web application for use within Digital Hive.

Before you begin

Note: This feature uses web fonts only.

Procedure

1. On the computer on which Digital Hive is installed, navigate to the /webapps/theia/extensions/themepack/ folder under the Tomcat directory of your Digital Hive installation.
2. Copy the CSS files for your web fonts and related files to a subdirectory named for the font in the following directory: /webapps/theia/extensions/themepack/fonts For example, for a font named MyFont, the copied files might look like the following:

   /webapps/theia/extensions/themepack/fonts/MyFont/
       MyFont-Bold.css
       MyFont-Bold.eot
       MyFont-Bold.html
       MyFont-BoldItalic.css
       MyFont-BoldItalic.eot
       MyFont-BoldItalic.svg
       MyFont-BoldItalic.ttf
       MyFont-BoldItalic.woff
       MyFont-Bold.svg
       MyFont-Bold.ttf
       MyFont-Bld.woff
       MyFont.css
       MyFont.eot
       MyFont.html
       MyFont-Italic.css
       MyFont-Italic.eot
       MyFont-Italic.html
       MyFont-Italic.svg
       MyFont-Italic.ttf
       MyFont-Italic.woff
       MyFont.svg
       MyFont.ttf
       MyFont.woff

3. Open the following file in a plain-text editor: /webapps/theia/extensions/themepack/manifest.json
4. In the "main" section of manifest.json, reference your fonts by subdirectory and CSS file names, for example:

   "main": [
       "extension.js",
       "libs/themer.js",
       "extension.css",
       "fonts/MyFont/MyFont.css",
       "fonts/MyFont/MyFont-Bold.css",
       "fonts/MyFont/MyFont-Italic.css",
       fonts/MyFont/MyFont-BoldItali

5. Save and close manifest.json.
6. Open the following file in a plain-text or CSS editor: /webapps/theia/extensions/themepack/extension.js
7. Scroll down to the CUSTOM FONT LIST section, uncomment the customFonts lines, and revise them to match your newly added font, for example:

   Before:

   // customFonts = [
       // {
       // id: 'BloggerSans',
       // css: '"BloggerSans", Helvetica, sans-serif', //this should match what the
       included font css uses
       // weights: [400, 700], //normal and bold
       // }
       // ];

   After:

   customFonts = [
           {
               id: 'MyFont',
               css: '"MyFont", Helvetica, sans-serif', //this should match what the
       included font css uses
               weights: [400, 700], //normal and bold
           }
         ];

8. Save and close extension.js.
9. To confirm that your fonts are now available, in the Digital Hive user interface, select Administration > Game Boards > Appearance and scroll down to the Fonts section. Your new font should be listed in the Preset font collections drop-down list.