
All about the supplied CMX Themes
=================================

All themes are suitable for use with either the default CumulusMX website or the CumulusMX 
Alternative Interface.

They should be placed in the css folder for the required site.  You can then follow the 
instructions below to make them the default colour scheme for your site.

The Default Website
===================

1.	Upload your chosen theme(s) to the css folder on your remote site.
2.	Rename the existing 'colours.css' file.  This ensures that it is available in the 
	future, should you wish to revert to it.
3.	Rename your chose CumulusMX theme to 'colours.css'. Please ensure that it is exactly 
	the same - no capitals.

You published website will now use your chosen theme stylesheet for all pages.

The Alternative Interface
=========================

All the themes are available as part of the AI package so to choose an alternative colour 
theme follow these instructions.

1.	Use the AI interface to view your weather station setup.
2.	Select the color theme you wish to use using the drop-down on that page.
3.	The selected colour theme is now active for your current browsing session.
4.	To make it permenant (until you change your mind), click the button 'Use as default'.

Even if you shut your computer down, your chosen color them will be used for the AI.

If you want to change it later just follow the same 4 steps again.  You can also revert 
back to the deafult colour scheme by using the 'Restore Original' button.

Available Theme Styles
======================

All themes include 11 theme colour variations for background, foreground and border 
colours.  You also get 11 independant text, border and hover variations of those colours.  
However, the border hover colours are only availabel as theme, light and dark variations.

The style names available are:

Text & Background	Text & Background Hover		Text Only			Border only
-----------------	-----------------------		---------			-----------
w3-theme-light,		w3-theme-light-hvr			w3-theme-light-txt	w3-theme-light-bdr
w3-theme-l5,		w3-theme-l5-hvr				w3-theme-l5-txt		w3-theme-l5-bdr
w3-theme-l4,		w3-theme-l4-hvr				w3-theme-l4-txt		w3-theme-l4-bdr
w3-theme-l3,		w3-theme-l3-hvr				w3-theme-l3-txt		w3-theme-l3-bdr
w3-theme-l2,		w3-theme-l2-hvr				w3-theme-l2-txt		w3-theme-l2-bdr
w3-theme-l1,		w3-theme-l1-hvr				w3-theme-l1-txt		w3-theme-l2-bdr
w3-theme,			w3-theme-hvr				w3-theme-txt		w3-theme-bdr
w3-theme-d1,		w3-theme-d1-hvr				w3-theme-d1-txt		w3-theme-d1-bdr
w3-theme-d2,		w3-theme-d2-hvr				w3-theme-d2-txt		w3-theme-d2-bdr
w3-theme-d3,		w3-theme-d3-hvr				w3-theme-d3-txt		w3-theme-d3-bdr
w3-theme-d4,		w3-theme-d4-hvr				w3-theme-d4-txt		w3-theme-d4-bdr
w3-theme-d5,		w3-theme-d5-hvr				w3-theme-d5-txt		w3-theme-d5-bdr
w3-theme-dark,		w3-theme-dark-hvr			w3-theme-dark-txt	w3-theme-dark-bdr

w3-theme-white:			Gives a dark text on a white background
w3-theme-action:		Gives mid-light text and mid-dark background
w3-theme-action-hvr:	A hover style that reverses text & background colours used with 
						the w3-theme-action style.

TEXT only HOVER styles			BORDER only HOVER styles
----------------------			------------------------
w3-theme-light-txt-hvr			w3-theme-light-bdr-hvr
w3-theme-l5-txt-hvr				w3-theme-l5-bdr-hvr
w3-theme-txt-hvr				w3-theme-bdr-hvr
3-theme-d5-txt-hvr				w3-theme-d5-bdr-hvr
w3-theme-dark-txt-hvr			w3-theme-dark-bdr-hvr


In all cases above, light is the same as 'l5', and dark the same as 'd5'.

MODAL Window Background
.at-theme-modal {
	background-color: var(--theme);
	background-color: var(--modal);
}

This style is semi-transparent and is used behind modal windows.
