This page uses javascript to help render elements, if you have problems please enable javascript.
 
Skip to main content
 
 
 
 
 
 
You are now inside the main content area
 
 
left col

Better Living with Themes

To make it easier to make changes we have integrated the use of a theme into the version 5 templates.  Rather than making content editors develop specific custom css we have tried to rely more on the use of a theme which will help unify styles and keep consitent look and feel regardless of site, and regardless of theme.

Colors

The main area of each theme is to define 6 colors.  Since a user might have different colors based on the theme they are using we decided to define them as backgrounds, neutral, dark, and two accent colors.  The templates also have a default black and white style that is available regardless of what theme you use.  These colors have all been developed with ATI in mind and have their own version of a dark mode.  

We know you might change your color theme in the future and all you'll need to do is tell the body class which theme you want.  By keeping all the styles locked down to those 6 standards you will not need to update any previous styles, they will simply pickup the updated color codes in the theme.

Please note we have added a border around each color box below.  This is to help make the box more defined and background styles on their own do not default with a border.

right col
 
 
 
left col

class

background-1

Primary Color

class

background-2

Secondary Color

class

background-3

Neutral Color

right col
 
 
 
left col

class

background-4

Dark Color

class

background-5

Accent Color 1

class

background-6

Accent Color 2

right col
 
 
 
left col

class

background-black

Black Hue

class

background-gray

Gray Hue

class

background-white

White Hue

right col
 
left col

Basic Styles

The theme makes it easy to have ready to go styles.  You can always add style modifiers but things should work great without much effort.  Below are examples of standard HTML elements without any styles added to them.

right col
 
 
left col

Content Headers

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

General Content

Paragraph text

hyperlink text

Bold text

Italic Text

Underline Text

right col
 
left col

Buttons (link buttons)

right col
 
 
left col

Unordered and Ordered Lists

  • unordered list item 1
    • nested item 1
      • level 3 item 1
      • level 3 item 2
    • nested item 2
  • unordered list item 2
  • unordered list item 3

or

  1. ordered list item 1
    1. nested item 1
      1. level 3 item 1
      2. level 3 item 2
    2. nested item 2
  2. ordered list item 2
  3. ordered list item 3

Block quotes, images, and horizontal rules

A very general block quote

A standard image put into the editable section below:

example for showing how images fit on the page

A horizontal rule below:

 

right col
 
left col
right col
 
 
left col

Table

Table Caption 
Header Item 1 Header Item 2 Header Item 3
Data element Data element Data element
Data element Data element Data element

Tables have captions which should be used and can be turned on via the Omin CMS editor.  There is a checkbox option which will enable the caption field above your table.

Notices

Default Notice

Information Notice

Alert Notice

Warning Notice

Success Notice

Aside

right col
 
left col
right col
 
left col

"Buttons"

The concept of a button is useful even if its just a hyperlink.  In version 5 we are not going to support forms natively, forms should be controled by another web tool such as qualtrics, google docs, ServiceNow, etc.  These button examples are hyperlinks with a button class on them.  To the end user they will appear as a button, but do not contain the <button> or <input type="button"...> code.

right col
 
 
 
left col

Color buttons use the theme's primary and secondary colors as the main color behind the button.

Default Button

right col
 
 
 
left col

Color hover buttons have a desaturated color with the full primary or secondary colors showing up on hover.

Hover Button

right col
 
 
 
left col

Clear buttons are useful for adding on top of images.  They will blur the background of the image where the button is showing making the text more readable.

Button Clear

right col
 
left col

Cards and Features

There are many ways to draw attention to your content.  Cards and Features styles allow you to put extra formatting around sections that will help content stand out from the rest of the page.  There are way to tweak these features so see the full explaination in the section level styles.

right col
 
 
left col

Extra Attention Content

Card content acts just like any other editable section on your page.  You can place images, headers, links, and anything else you would put in a regular content on your page inside them.  

There is no formatting requirements or specific order to deal with.

Feature titles go on top

decor

Feature titles go on top

all other content is move to the bottom of the box.  Features do require that you mark up your content with specific classes, all found in the editor, and it will autoformat it for you when the page loads.  

Features are fully documented on the sections level style documenation.

right col
 
 
left col
right col
 
left col
right col
 
left col
right col
 
 
 
 
left col
right col
 
left col
right col