New Default Web Site Information: Difference between revisions

(14 intermediate revisions by 2 users not shown)
# The template for the pages has been replaced with a new more modern and responsive version. This affects the look of the pages.
# The web site is now "data driven". The old template had the all the data except for the graphs embedded within every page. This meant that every page was processed by Cumulus and uploaded to your web site at every update. The new template pages only have to be uploaded once, they then populate their data from a single JSON data file that Cumulus uploads at each update. This is much more efficient both in terms of bandwidth used and time taken.
 
You can view a live site using the new templates using live data [https://weather.oaktreewebs.co.uk here]. The only page that has been changed is the gauges page and it is hoped that this will soon be part of the default site as well.
 
=== Installing the new template for new users ===
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.
 
 
== Editing the Template Files ==
=== Adding new pages to the new site menus ===
Unlike the old site where you had the edit the menu on every existing page in order to add a new one, the new site has the menus defined once.
You will find them (one for large screens, one for mobile)it in the /js/setpagedatamenu.js file defined as twoa longsingle stringsobject.
Here is the full menu...
<nowiki>
menuSrc = [
let menu = '<a href="index.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Now</a>' +
{title: "Now", menu: "b", url: "index.htm"},
'<a href="gauges.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Gauges</a>' +
{title: "Today", menu: "b", url: "today.htm"},
'<a href="today.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Today</a>' +
{title: "Yesterday", menu: "b", url: "yesterday.htm"},
'<a href="yesterday.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Yesterday</a>' +
{title: "Gauges", menu: "b", url: "gauges.htm"},
'<a href="thismonth.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">This Month</a>' +
{title: "Records", menu: "b", submenu: true, items: [
'<a href="thisyear.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">This Year</a>' +
{title: "This Month", menu: "b", url: "thismonth.htm"},
'<a href="record.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Records</a>' +
{title: "This Year", menu: "b", url: "thisyear.htm"},
'<a href="monthlyrecord.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Monthly Records</a>' +
{title: "All Time", menu: "b", url: "record.htm"},
'<div class="w3-dropdown-hover">' +
{title: "Monthly", menu: "b", url: "monthlyrecord.htm"}
'<button class="w3-btn w3-theme-hvr at-slim w3-hide-medium w3-hide-small">Charts</button>' +
]},
'<div class="w3-dropdown-content w3-bar-block w3-theme">' +
{title: "Charts", menu: "b", submenu: true, items: [
'<a href="trends.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Trends</a>' +
{title: "Trends", menu: "b", url: "trends.htm"},
'<a href="selectachart.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Select-a-graph</a>' +
{title: "Select-a-graph", menu: "b", url: "selectachart.htm"},
'<a href="historic.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Historic</a>' +
{title: "Historic", menu: "b", url: "historic.htm"}
'</div>' +
]},
'</div>' +
{title: "Reports", menu: "b", url: "noaareport.htm"},
'<a href="https://cumulus.hosiene.co.uk/index.php" data-cmx-forumlink class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium w3-hide" target="_blank">Forum</a>' +
{title: "Forum", menu: "b", url: "#", forum: true, new_window: true},
'<a href="#" data-cmx-webcamlink class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium w3-hide webcamlink">Webcam</a>' +
{title: "Webcam", menu: "b", url: "#", webcam: true}
'<button class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-large w3-right" onClick="toggleMenu(\'Main_Menu_Mobile\')">&#9776;</button>';</nowiki>
];
</nowiki>
You can see each page is defined in this format...
<nowiki>
{title: "Now", menu: "b", url: "index.htm"},</nowiki>
'<a href="today.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Today</a>' +
Where:
</nowiki>
title = the text that appears on the menu
You can just add to this string variable, and the new menu item will then appear on every page. So to add a NOAA page add this...
menu = b - appears on both the full and mobile menus, w - show on full (wide) menu only, n - show on mobile (narrow) menu only
 
You can just add new items to this object, and the new menu item will then appear on every page. So to add a Custom page add this...
<nowiki>
{title: "Custom", menu: "b", url: "custom.htm"},</nowiki>
'<a href="noaa.php" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">NOAA Reports</a>' +
</nowiki>
So it becomes...
<nowiki>
{title: "Now", menu: "b", url: "index.htm"},
let menu = '<a href="index.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Now</a>' +
{title: "Today", menu: "b", url: "today.htm"},
'<a href="gauges.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Gauges</a>' +
{title: "Custom", menu: "b", url: "custom.htm"},
'<a href="today.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Today</a>' +
{title: "Yesterday", menu: "b", url: "yesterday.htm"},
'<a href="yesterday.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Yesterday</a>' +
{title: "Gauges", menu: "b", url: "gauges.htm"},
'<a href="thismonth.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">This Month</a>' +
{title: "Records", menu: "b", submenu: true, items: [
'<a href="thisyear.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">This Year</a>' +
{title: "This Month", menu: "b", url: "thismonth.htm"},
'<a href="noaa.php" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">NOAA Reports</a>' +
{title: "This Year", menu: "b", url: "thisyear.htm"},
'<a href="record.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Records</a>' +
{title: "All Time", menu: "b", url: "record.htm"},
'<a href="monthlyrecord.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Monthly Records</a>' +
{title: "Monthly", menu: "b", url: "monthlyrecord.htm"}
'<div class="w3-dropdown-hover">' +
]},
'<button class="w3-btn w3-theme-hvr at-slim w3-hide-medium w3-hide-small">Charts</button>' +
{title: "Charts", menu: "b", submenu: true, items: [
'<div class="w3-dropdown-content w3-bar-block w3-theme">' +
{title: "Trends", menu: "b", url: "trends.htm"},
'<a href="trends.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Trends</a>' +
{title: "Select-a-graph", menu: "b", url: "selectachart.htm"},
'<a href="selectachart.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Select-a-graph</a>' +
{title: "Historic", menu: "b", url: "historic.htm"}
'<a href="historic.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Historic</a>' +
]},
'</div>' +
{title: "Reports", menu: "b", url: "noaareport.htm"},
'</div>' +
{title: "Forum", menu: "b", url: "#", forum: true, new_window: true},
'<a href="https://cumulus.hosiene.co.uk/index.php" data-cmx-forumlink class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium w3-hide" target="_blank">Forum</a>' +
{title: "Webcam", menu: "b", url: "#", webcam: true}
'<a href="#" data-cmx-webcamlink class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium w3-hide webcamlink">Webcam</a>' +
'<button class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-large w3-right" onClick="toggleMenu(\'Main_Menu_Mobile\')">&#9776;</button>';
</nowiki>
Where I have inserted the new NOAACustom page between "This YearNow" and "RecordsYesterday"
 
Submenus can also be defined, they use the property "submenu: true", and then have an array of submenu items (defined as above) added to the "items: []" array.
You will need to do a similar thing for the mobile menu, which begins...
 
<nowiki>
You will also find an example extended menu called "menuSample.js" in the webfiles/js folder.
let mobileMenu = '<a href="index.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim">Now</a>' +
 
Note: the forum and webcam menu items only have special properties "forum" and "webcam", these are used by the main page code to determine if these menu items should be displayed or not.
 
=== Making changes to the pages===
Although looking at the new template pages makes the idea of editing them daunting, it really is not that hard. There are just a few classes that are really useful.
{| class="wikitable"
|-
! Class !! What it does
|-
| w3-hide || This is the most useful as it completely removes the element from the display. The space it took up is now available for the following elements
|-
| w3-hide-small || This does what it says on the tin - it hides an element but only on small screens like mobile phones
|-
| w3-hide-medium || As for the above class but just for medium screens like tablets
|-
| w3-hide-large || This hides an element on a large screen
|}
The last three classes can all be used together in any combination. Of course using all three is the same as using just w3-hide.
====Page Widths====
Some of you feel that the site is not wide enough. This is easy to adjust. There is just one style in the mx-templates styles sheet that controls this called 'site-width'. It's default value is 1140px but you can safely change this to any greater value and it will affect all pages except the graphs pages. This has a locally set style 'graph-width' set to 1250px. Again if this is not wide enough for you make it bigger.
 
====The white panels====
If you look at any of these panels you will see that they all have the following styles: w3-panel, w3-card and w3-theme-white.
 
* w3-panel gives it its left and right padding and top and bottom margin. This is controlled by the w3Pro style sheet - I would not recommend messing with this - it's semi-minified. If you change panel to container you loose the top and bottom margin.
* w3-card gives the panel the border shadow. If you don't like this simply remove this class. Personally I just put an 'X' at the end of the style - 'w3-cardX, which means it is ignored. This allows me to easily change my mind.
* Finally the w3-theme-white gives the panel its background and foreground colour. You have 10 variations on this; 'w3-theme-l1' to 'w3-theme-d5' as well as w3-theme, w3-theme-light and w3-theme-dark.
 
====Tips====
When using the above classes always start at the heading or paragraph level to see if it does enough. If it doesn't then add it to the div element above and check again. Doing it this way you end up hiding content rather than inadvertently wrecking the structure of the page.
A word of advice though, this cannot remove the whole sidebar to give its space to the main body of a page - that requires changes to rows and columns.
With creative use of the above classes you can change what is displayed at any screen size.
For example, if a table contains a long description such as: 'Highest Temperature Range' that wraps on small screens you can have two (or even three) variations for each screen size.
 
Make the table cell contain the following:
 
<nowiki>
<span class="w3-hide-small w3-hide-medium">Highest Temperature Range</span><span class="w3-hide-large w3-hide-small">Highest Temp. Range</span><span class="w3-hide-medium w3-hide-large">High Temp Range</span>
</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.
It's a lot of content but the page is not uploaded as before so it will have no impact on CumulusMX but will be different on each screen size.
 
As the new pages are dynamically updated using data tags, it is also possible to put content in more than one place. If you want to have the 'page updated' information at the top of the page and in the footer as well, you can. You can also have it display in one position on large screens and a different position on small screens.
 
Although the new system looks intimidating it is very much more flexible that the old.
 
== Creating New Pages ==
The new template is based on the w3schools template. You can read all about this template here: [https://www.w3schools.com/html/html_responsive.asp HTML Responsive Web Design].
 
You should also visit the page [[Default_Website_Development|Default Website Development]] for up to date resources and information about developments that we are making to the default system.
=== Blank Template Pages ===
The are a number of blank page templates available for download. You can find them here: [//{{SERVERNAME}}/Downloads/WebTemplatesCurrent-v1.zip Blank page templates v1]
The templates are commented with information about where to place your headings and data etc.
 
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'.
 
A new complete set of templates in three variations will be published Tues 9th March. These are as follows:
* A set of four templates; 1, 2, 3 and 4 column with a sidebar on the left.
* A set of four templates; 1, 2, 3 and 4 column with NO sidebar
* A set of four templates; 1, 2, 3 and 4 column with the sidebar on the right. (These are slightly different as the sidebar content starts at the top of the page.
 
If you wish to view them before downloading, they can be viewed at [https://weather.oaktreewebs.co.uk here]
 
These templates also demonstrate the various colour themes that are also available to download. It is hoped by the end of the month to have at least one of these available as a complete alternative package. If these's one template style that is preferred, I'll focus on that one.
 
=== Adding Data from the websitedata.json File ===
 
Where "temp" and "tempunit" are the names of the values to be displayed from the websitedata.json file.
 
These can be repeated as often as necessary.
 
== FAQ ==
==== I want to keep the old web site look and feel, but also update to MX v3.10+ ====
Well, good news (for now). The distribution zip file contains a folder named /webfiles-legacy.
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.
 
 
==== 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.
 
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 ====
 
The uploaded data file is created from a template file /web/websitedataT.json using web tags.
 
 
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 ====
 
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.
 
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 colours completely, 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 colours.css file and make sure that all the style names I have used are available in your new colour theme.
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.
 
There are notes in the stylesheet to help.
 
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.