Modern - Domo Theme

A modern looking Domo login theme with customizable background textures and Unsplash images

This theme requires NiagaraMods Domo Beta #3 to be installed on your station.

Download NiagaraMods Domo from the Exchange

Installation

1. Ensure that the Domo module is installed on your station

2. Extract the package and copy the domo folder to your station file system. The domo folder must be in the root of your station file system at the Ord file:^domo/

Usage

1. Navigate to your station's WebService component located under Station > Config > Services > WebService

2. In the property sheet, under the Login Template property, uncheck null if it is checked

3. In the first dropdown, choose nmxdomo

4. In the second dropdown, choose UserCustomTheme and Save your changes.

5. Remove any unused pattern files in the pattern directory on your station to save space (see Page Background Texture under Customization below for more details).

Customization

The Modern theme works with the WebService's built-in logo and loginCss slots as well as all of the custom Domo configuration slots – including Unsplash and custom background images. For a full list of customization slots, see the Customizing the Built-in Templates section of the Domo Readme

Page Background Color

If you wish to set the overall page color background use the pageBackground slot in Domo instead of the backgroundColor slot. The backgroundColor slot will set the color for the area where an image is shown if no image is available or if you turn off Unsplash and do not supply your own background image in the background slot. If no pageBackground color is set, the color white is used.

Page Background Texture

This theme includes a directory named patterns which contains page background pattern images for use in the login screen. You can choose which pattern is used by editing the domo.css file and changing the file name to any file in the patterns directory. You can also add your own patterns and customize with CSS even further.

In the example below, the pattern was changed to use triangles.png from the default of geometry.png.

body {
  background-image: url('/login?domo/patterns/triangles.png');
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

Below are all of the available options for the included pattern images:

background-image: url('/login?domo/patterns/diamonds-light.png');
background-image: url('/login?domo/patterns/diamonds-dark.png');
background-image: url('/login?domo/patterns/diamond-upholstery.png');
background-image: url('/login?domo/patterns/squares.png');
background-image: url('/login?domo/patterns/triangles.png');
background-image: url('/login?domo/patterns/grunge.png');
background-image: url('/login?domo/patterns/geometry.png');
background-image: url('/login?domo/patterns/geometry-light.png');
background-image: url('/login?domo/patterns/linen.png');
background-image: url('/login?domo/patterns/noise.png');
background-image: url('/login?domo/patterns/illusion.png');

Card Animation

This theme uses Animate.css for the card animation. You can customize the animation of the card by changing the animation class of the main-content div tag in the login.hbs file from animate__backInDown to any animation class available in Animate.css, for a full list, check the Animate.css documentation. You can also add your own custom CSS to control the card animation, just be sure to target the main-content div.

The example below changes the default animation to a simple fade with the animate__fadeIn class:

...
<div class="main-content animate__animated animate__delay-1s animate__fadeIn">
...

Copyright 2020 NiagaraMods