Default Website Development

From Cumulus Wiki

The default CMX website Development

These section of the Wiki will enable you to get the latest information and resources for the new default CMX website shipped with version 3.10.x

The current default site

This will always be available to you in the 'websites' folder of your Cumulus MX Installation. If you wish to undo any of the changes that downloads from this page generate then simply re-copy the websites folder to your web host.


There are currently 3 alternative template frameworks for the site. These all include 4 variations for the main content area of a page; a single column, two column, three column and four columns. These can be used as the framework for existing pages or to add your own content as required. You can choose to use them in any combination or just one - its up to you. All come with a pdf readme file to help you use them but for full information about the available styles visit w3Schools.

The available frameworks are:

Additional/Alternative Pages


We also have an alternative to the default gauges.htm page. This does away with the sidebar and places the gauges in fixed width panels that automatically reposition themselves as the page width is changed. The gauges are also able to be placed in any order without resorting to cut-n-paste. Just add/change a number to their order property and its done.

This can be downloaded from Gauges Page. Updated: 11 March 2021

NOAA Reports

This is now included in the standard default website. It enables any of your NOAA reports to be loaded into the page using Ajax calls so no page refresh is needed. Updated: 16 June 2021.

Complete ready to run alternative website pack

We hope to have complete 'website' ready alternatives to the default provided by CumulusMX available. It is likely that these will include a NOAA reports page as standard.

Colour Themes

The website and templates use colour themes to make it easier to change the colour throughout the site. By downloading the colour theme pack, you can simply rename the chosen colour as 'colours.css' and it will be applied throughout your site. All colour themes have now been updated to use css variables for the available theme colours. This makes it much easier to add your theme colours to your custom pages. or style sheets. It is also possible to apply theme colours to the gauges tooltips in this way.

For example, to add a coloured border to an element you can add the style like so: <span style="border-color: var(--d2);"></span>.

Visit the new Theme Viewer to preview any of these themes on a basic template page.

You will also find that additional themes have now been added. The download includes a reworked default 'colours.css' stylesheet to also use css variables.

The current list is:

Theme Description Theme Description
AlmostMauve As the name implies, a mauve like colour Arcadia almost a bottle green based on #00a591
CherryTomato A muted red based on #e94b3c ChiliOil A reddy brown based on #944743
CoconutMilk A slightly sandy milk colour is the best way to describe this Emporador A mid misty brown based colour
HarbourMist A warm grey based on #b4b7ba Limelight An insipid yellow based on #f1ea7f (for the brave or colour challenged)
Lime Punch A greener variation on the 'LimeLight' theme QuietGrey A slightly cooler grey based on #bcbcbe
RedPear A variation between CherryTomato and ChiliOil based on #bcbcbe RussetOrange A muted orange based on #bcbcbe
SailorBlue A strong dark blue SpringCrocus A muted purple theme based on #bc70a4
UltraViolet Theme based on purple / violet - for the brave or colour challenged. ValientPoppy Theme based on purple / violet - again for the brave or colour challenged.
WarmSand The lighter colours are sandy coloured while the darker range have a distinct orange tinge.

Use this link Additional colour schemes to down load the schemes. Updated: 16 June 2021.