1,122
edits
New Default Web Site Information: Difference between revisions
From Cumulus Wiki
Jump to navigationJump to search
New Default Web Site Information (view source)
Revision as of 09:05, 29 March 2021
, 09:05, 29 March 2021→Adding new pages to the new site menus
NeilThomas (talk | contribs) |
|||
| (6 intermediate revisions by one other user not shown) | |||
| Line 10: | Line 10: | ||
# 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. | # 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 | 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 === | === Installing the new template for new users === | ||
| Line 25: | Line 25: | ||
=== Adding new pages to the new site menus === | === 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. | 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 | You will find it in the /js/menu.js file defined as a single object. | ||
Here is the full menu... | Here is the full menu... | ||
<nowiki> | <nowiki> | ||
menuSrc = [ | |||
{title: "Now", menu: "b", url: "index.htm"}, | |||
{title: "Today", menu: "b", url: "today.htm"}, | |||
{title: "Yesterday", menu: "b", url: "yesterday.htm"}, | |||
{title: "Gauges", menu: "b", url: "gauges.htm"}, | |||
{title: "Records", menu: "b", submenu: true, items: [ | |||
{title: "This Month", menu: "b", url: "thismonth.htm"}, | |||
{title: "This Year", menu: "b", url: "thisyear.htm"}, | |||
{title: "All Time", menu: "b", url: "record.htm"}, | |||
{title: "Monthly", menu: "b", url: "monthlyrecord.htm"} | |||
]}, | |||
{title: "Charts", menu: "b", submenu: true, items: [ | |||
{title: "Trends", menu: "b", url: "trends.htm"}, | |||
{title: "Select-a-graph", menu: "b", url: "selectachart.htm"}, | |||
{title: "Historic", menu: "b", url: "historic.htm"} | |||
]}, | |||
{title: "Reports", menu: "b", url: "noaareport.htm"}, | |||
{title: "Forum", menu: "b", url: "#", forum: true, new_window: true}, | |||
{title: "Webcam", menu: "b", url: "#", webcam: true} | |||
]; | |||
</nowiki> | |||
You can see each page is defined in this format... | You can see each page is defined in this format... | ||
<nowiki> | <nowiki> | ||
{title: "Now", menu: "b", url: "index.htm"},</nowiki> | |||
Where: | |||
You can just add to this | title = the text that appears on the menu | ||
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> | <nowiki> | ||
{title: "Custom", menu: "b", url: "custom.htm"},</nowiki> | |||
</nowiki> | |||
So it becomes... | So it becomes... | ||
<nowiki> | <nowiki> | ||
{title: "Now", menu: "b", url: "index.htm"}, | |||
{title: "Today", menu: "b", url: "today.htm"}, | |||
{title: "Custom", menu: "b", url: "custom.htm"}, | |||
{title: "Yesterday", menu: "b", url: "yesterday.htm"}, | |||
{title: "Gauges", menu: "b", url: "gauges.htm"}, | |||
{title: "Records", menu: "b", submenu: true, items: [ | |||
{title: "This Month", menu: "b", url: "thismonth.htm"}, | |||
{title: "This Year", menu: "b", url: "thisyear.htm"}, | |||
{title: "All Time", menu: "b", url: "record.htm"}, | |||
{title: "Monthly", menu: "b", url: "monthlyrecord.htm"} | |||
]}, | |||
{title: "Charts", menu: "b", submenu: true, items: [ | |||
{title: "Trends", menu: "b", url: "trends.htm"}, | |||
{title: "Select-a-graph", menu: "b", url: "selectachart.htm"}, | |||
{title: "Historic", menu: "b", url: "historic.htm"} | |||
]}, | |||
{title: "Reports", menu: "b", url: "noaareport.htm"}, | |||
{title: "Forum", menu: "b", url: "#", forum: true, new_window: true}, | |||
{title: "Webcam", menu: "b", url: "#", webcam: true} | |||
</nowiki> | </nowiki> | ||
Where I have inserted the new | Where I have inserted the new Custom page between "Now" and "Yesterday" | ||
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 also find an example extended menu called "menuSample.js" in the webfiles/js folder. | |||
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=== | === 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. | 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. | ||
| Line 106: | Line 110: | ||
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. | 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 padding | * 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. | * 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. | * 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. | ||
| Line 129: | Line 133: | ||
== Creating New Pages == | == 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] | 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 === | === 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 are a number of blank page templates available for download. You can find them here: [//{{SERVERNAME}}/Downloads/WebTemplatesCurrent-v1.zip Blank page templates v1] | ||
| Line 139: | Line 146: | ||
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'. | ||
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 === | === Adding Data from the websitedata.json File === | ||
