New Default Web Site Information: Difference between revisions

no edit summary
No edit summary
Line 18: Line 18:
As housekeeping, you will also need to clear out your existing Cumulus MX local /web folder and replace it with the contents of the distribution zip /web folder.
As housekeeping, you will also need to clear out your existing Cumulus MX local /web folder and replace it with the contents of the distribution zip /web folder.
After migrating it is best to flush the browser cache for your web site before loading it again.
After migrating it is best to flush the browser cache for your web site before loading it again.


== Editing the Template Files ==
== Editing the Template Files ==
Line 82: Line 83:
</nowiki>
</nowiki>
Note that because the mobile menu is separate from the full screen menu, you can make the menu entries a little more descriptive if you wish.
Note that because the mobile menu is separate from the full screen menu, you can make the menu entries a little more descriptive if you wish.


== Creating New Pages ==
== Creating New Pages ==
Line 93: Line 95:


You can delete the sidebar if it is not required and say you just want a single column of information. This won't make the main page area expand into the sidebar area.  To do this I recommend you take a look at the existing chart pages - these all use an expanded single column layout.  (If you don't want it expanded, just change all divs that have the class 'graph-width' to 'site-width'.
You can delete the sidebar if it is not required and say you just want a single column of information. This won't make the main page area expand into the sidebar area.  To do this I recommend you take a look at the existing chart pages - these all use an expanded single column layout.  (If you don't want it expanded, just change all divs that have the class 'graph-width' to 'site-width'.


=== Adding Data from the websitedata.json File ===
=== Adding Data from the websitedata.json File ===
Line 101: Line 104:


Where "temp" and "tempunit" are the names of the values to be displayed from the websitedata.json file.
Where "temp" and "tempunit" are the names of the values to be displayed from the websitedata.json file.


== FAQ ==
== FAQ ==
Line 107: Line 111:
This folder contains a "new" version of the original web site that uses the same data-driven approach of the new template. So you can enjoy the efficiency of the new single data file upload with the old look and feel.
This folder contains a "new" version of the original web site that uses the same data-driven approach of the new template. So you can enjoy the efficiency of the new single data file upload with the old look and feel.
Be aware though that these legacy files will no longer be maintained or updated, and at some stage will be removed from the distribution file.
Be aware though that these legacy files will no longer be maintained or updated, and at some stage will be removed from the distribution file.




==== I want to keep the old web site completely, but also update to MX v3.10 ====
==== I want to keep the old web site completely, but also update to MX v3.10 ====
It that case you will have to keep the indexT.htm, gaugesT.htm etc. files from a previous release and make sure they are still in your local /web folder.
It that case you will have to keep the indexT.htm, gaugesT.htm etc. files from a previous release and make sure they are still in your local /web folder.


Then you will have to add every web page template file (indexT.htm, gaugesT.htm etc) to your Cumulus MX Extra Files list; the remote filenames should all drop the 'T' - indexT.htm becomes index.htm. Ensure you tick process, FTP and add your web site FTP folder in remote files.
Then you will have to add every web page template file (indexT.htm, gaugesT.htm etc) to your Cumulus MX Extra Files list; the remote filenames should all drop the 'T' - indexT.htm becomes index.htm. Ensure you tick process, FTP and add your web site FTP folder in remote files.




==== I want to customise/localise the data Cumulus MX uploads in the JSON data file ====
==== I want to customise/localise the data Cumulus MX uploads in the JSON data file ====
The uploaded data file is created from a template file /web/websitedataT.json using web tags.
The uploaded data file is created from a template file /web/websitedataT.json using web tags.


Line 129: Line 129:


It is not recommended to edit supplied /web/websitedataT.json file directly, you risk losing any changes you make with every update.
It is not recommended to edit supplied /web/websitedataT.json file directly, you risk losing any changes you make with every update.


==== I want to change the colour theme ====
==== I want to change the colour theme ====
The site uses a separate stylesheet - colours.css, for all the colours used in the site.  This comes with three variations of the blue used.
The site uses a separate stylesheet - colours.css, for all the colours used in the site.  This comes with three variations of the blue used.


Line 139: Line 137:
At the moment the main body uses 'w3-theme-light' giving a pale blue background and dark blue text. Replacing 'w3-theme-light' with 'w3-theme-dark' throughout the page switches these.  You will need to do this on all pages.
At the moment the main body uses 'w3-theme-light' giving a pale blue background and dark blue text. Replacing 'w3-theme-light' with 'w3-theme-dark' throughout the page switches these.  You will need to do this on all pages.


If you want to change the theme completely, there will be a number of theme files available available shortly. These can be uploaded to your web host and put in the css folder. Choose the one you want to use and rename it 'colours.css' (after you have renamed the existing css file. It will then be used as the style for your site.
 
A number of pre-created alternative colour styles have been created, they can be downloaded from here: [//{{SERVERNAME}}/Downloads/WebTemplatesAdditionalStyles-v1.zip Alternative Styles v1]
 
To implement a new colour style, just follow these steps
# Upload the style file (eg ChiliOil.css) to your /css folder.
# Rename the original /css/colours.css file to /css/colours.css.original
# Rename the new style file (eg ChiliOil.css) to /css/colours.css
 
    
    
If you want to use your own colours, you can use the [https://www.w3schools.com/w3css/w3css_color_generator.asp theme generator] at w3schools.com.  There you can select any base colour and it will generate an almost complete set of styles for you.  Copy this to the BOTTOM of the existing colours.css file and make sure that all the style names I have used are available in your new colour theme.
If you want to use your own colours, you can use the [https://www.w3schools.com/w3css/w3css_color_generator.asp theme generator] at w3schools.com.  There you can select any base colour and it will generate an almost complete set of styles for you.  Copy this to the BOTTOM of the existing colours.css file and make sure that all the style names I have used are available in your new colour theme.
Line 146: Line 151:


Please make sure that you don't replace the existing styles, at least until you have checked that everything is OK.  By leaving the existing styles in place, anything that you miss will still get coloured.
Please make sure that you don't replace the existing styles, at least until you have checked that everything is OK.  By leaving the existing styles in place, anything that you miss will still get coloured.
If you create your own style you may want to share it via the forum.