Readme
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
Ensure that the Domo module is installed on your station
Extract the package and copy the
domo
folder to your station file system. Thedomo
folder must be in the root of your station file system at the Ordfile:^domo/
Usage
Navigate to your station's WebService component located under Station > Config > Services > WebService
In the property sheet, under the
Login Template
property, uncheck null if it is checkedIn the first dropdown, choose
nmxdomo
In the second dropdown, choose
UserCustomTheme
and Save your changes.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
Direct Link
Category
Last Updated
Feb 14
License type
NiagaraMods Exchange LicenseCompatability
Niagara 4 Only