Clean - Domo Theme

A clean looking, responsive Domo login theme

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 Clean theme works with the WebService's built-in logo and loginCss slots as well as most of the custom Domo configuration slots. For a full list of customization slots, see the Customizing the Built-in Templates section of the Domo Readme.

Unsplash Images

This theme does not support using Unsplash images, however you can include your own background image using the background slot on the WebService. The background image will be used as the background for the Logo Pane and will override the Logo Pane Background Color if one is set (see description for this slot below).

Welcome Message

This theme can show a custom welcome message above the "Login in to your account" title on the form if you create a new slot on the WebService named welcomeMessage. It should be of the type baja:String and you can set its value to any text you wish to show. This message will be hidden unless this slot exists with a value.

Page Background Color

If you wish to set the overall page color background use the pageBackground slot in Domo instead of the backgroundColor slot. You can also edit the domo.css file and change it in the body definition at the top of the file. Note that if a pageBackground slot is set, it will override the value in the CSS.

Logo Pane Background Color

Use the backgroundColor slot to set the background color of the pane that contains the logo image/station name.

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');

Custom Animations

This theme uses Animate.css for the form and logo animations. You can customize these animations by changing the animation class of the logo-content div tag or the card-content div tag in the login.hbs file 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 respective div tags listed above.

The example below changes the default logo animation to bounce in with the animate__bounceIn class:

...
<div class="logo-content animate__animated animate__slow animate__bounceIn">
...

Copyright 2020 NiagaraMods