1,180
edits
New Default Web Site Information: Difference between revisions
→Adding new pages to the new site menus
NeilThomas (talk | contribs) |
|||
| (5 intermediate revisions by one other user not shown) | |||
|
=== 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
Here is the full menu...
<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...
<nowiki>
{title: "Now", menu: "b", url: "index.htm"},</nowiki>
Where:
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>
{title: "Custom", menu: "b", url: "custom.htm"},</nowiki>
So it becomes...
<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>
Where I have inserted the new
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===
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.
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
* 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.
== 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]
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 ===
| |||