320
edits
NeilThomas (talk | contribs) |
NeilThomas (talk | contribs) |
||
(4 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
==The default CMX website Development== | ==The default CMX website Development== | ||
These section of the Wiki will enable you to get the latest information and resources for the | These section of the Wiki will enable you to get the latest information and resources for the alternative to the default CMX website shipped with version 3.10.x | ||
'''This page is under development at the moment''' | |||
This | |||
===Alternative public website=== | |||
As part of the development process, a new public website template is available which can either sit on top of of totally replace the template supplied with CumulusMX. | |||
This template introduces a number of features and/or improvements. | |||
*It is significantly more responsive - adaptable to different viewing devices | |||
*;All the fonts correctly scale on all browsers | |||
*;All tables have been removed and replaced with more flexible elements | |||
*;Panels correctly redistribute themselves on all screens. | |||
*Panels can be rearranged with minimal coding skills | |||
*Different colour schemes can be applied, again with minimal coding required | |||
*It has the facility to specify a separate location for your data files | |||
==== | ==Installing== | ||
Download the current zip file to you local machine and upload it to your web server. | |||
*Unzip it in the same location as your existing site - it will not overwrite the existing pages | |||
*:The new site uses .html pages whereas the existing default site uses .htm | |||
* | *; If you visit your site without specifying a page you will be taken to the new template, | ||
*;Specifying a page such as index.htm will display your old template. | |||
* | |||
* | |||
* | |||
==Editing the website menu== | |||
The website menu is held in the file ''my-menu.js''. This ensures that it does not conflict with the existing menu. | |||
This | |||
It is now possible to add dividing bars to sub-menus as well as extra menu items. The menu is shown below: | |||
<nowiki> | |||
menuSrc = [ | |||
{title: "Dashboard", menu: "b", url: "index.html"}, | |||
{title: "Today", menu: "b", url: "today.html"}, | |||
{title: "Yesterday", menu: "b", url: "yesterday.html"}, | |||
{title: "Today-Yest", menu: "b", url: "todayVyest.html"}, | |||
{title: "Gauges", menu: "b", url: "gauges.html"}, | |||
{title: "Records", menu: "b", submenu: true, items: [ | |||
{title: "This Month<i class=\"fa-solid fa-rectangle-list\"></i>", menu: "b", url: "recordsthismonth.html"}, | |||
{title: "This Year<i class=\"fa-solid fa-rectangle-list\"></i>", menu: "b", url: "recordsthisyear.html"}, | |||
{title: "All Time<i class=\"fa-solid fa-rectangle-list\"></i>", menu: "b", url: "recordsalltime.html"}, | |||
{title: "Monthly<i class=\"fa-solid fa-rectangle-list\"></i>", menu: "b", url: "recordsmonthly.html"}, | |||
{title: "", menu: "b", url: "#"}, | |||
{title: "All records<i class=\"fa-solid fa-rectangle-list\"></i>", menu: "b", url: "records.html"} | |||
]}, | |||
{title: "Charts", menu: "b", submenu: true, items: [ | |||
{title: "Trends<i class='fa-solid fa-chart-line'></i>", menu: "b", url: "chartstrends.html"}, | |||
{title: "Select-a-graph<i class='fa-solid fa-chart-line'></i>", menu: "b", url: "chartsselect.html"}, | |||
{title: "Historic<i class='fa-solid fa-chart-line'></i>", menu: "b", url: "chartshistoric.html"} | |||
]}, | |||
{title: "Reports", menu: "b", url: "noaareports.html"}, | |||
{title: "Forum", menu: "b", url: "#", forum: true, new_window: true}, | |||
{title: "Webcam<i class='fa-solid fa-camera'></i>", menu: "b", url: "#", webcam: true} | |||
]; | |||
</nowiki> | |||
'''Things to note''' | |||
* It is possible to use ''Font-Awsome'' icons in the menu | |||
*; You don't need to add sub-menu indicator icons as this is embedded in the code. | |||
* You can add menu dividers to the sub-menus by adding an entry as shown below: | |||
'''{title: "", menu: "b", url: "#"}''' | |||
*; It can be placed in both menus, only the full screen menu or the mobile menu as required. | |||
====Other changes==== | |||
The mobile menu now collapses correctly if you select a different sub-menu - you don't have to close a submenu manually before you open another one. | |||
=== | |||
==Changing the Theme and Other Settings== | |||
This template comes with 33 themes to enable you to personalise the public website. Sixteen of these are light, 16 are dark and one is a high contrast theme. They are all located in the /themes folder. | |||
To change the theme you will need to edit the page-manager.js file located in the 'js folder. The pertinent section is shown below: | |||
<nowiki> | |||
let CMXConfig = { | |||
'Theme': 'Nebulas-Blue', | |||
'StaticHead': true, | |||
'StaticFoot': true, | |||
'Units': 'vh', | |||
'PaddingTop': 2, | |||
'PaddingBottom': 1, | |||
'Seagull': { | |||
'Animation': '', | |||
'Duration': 5, | |||
'OnTop': true | |||
}, | |||
'Version': 3.0 | |||
}</nowiki> | |||
This is located at the start of the file between lines 9 and 22. Do '''not''' edit anything else as you will in all likelihood break the site. | |||
===Theme=== | |||
The available themes are: | |||
<nowiki> | |||
Arcadia, Arcadia-Dark, Cherry-Tomato, Cherry-Tomato-Dark, | |||
Chili-Oil, Chili-Oil-Dark, Crocus-Petal, Crocus-Petal-Dark, | |||
Cylon-Yellow, Cylon-Yellow-Dark, Dark-Grey, Dark-Grey, | |||
Emporador, Emporador-Dark, High-Contrast, | |||
Lime-Punch, Lime-Punch-Dark, Marsala, Marsala-Dark, | |||
Martini-Olive, Martini-Olive-Dark, MeerKat, MeerKat-Dark, | |||
Nebulas-Blue, Nebulas-Blue-Dark, Red-Pear, Red-Pear-Dark, | |||
Russet-Orange, Russet-Orange-Dark, Spring-Crocus, Spring-Crocus-Dark, | |||
Valiant-Poppy, Valiant-Poppy-Dark</nowiki> | |||
Any of these can be used but be careful not to disrupt the formatting - It must be in quotation marks and the whole entry must be followed by a comma. | |||
===Other Settings=== | |||
====Layout==== | |||
The next '''FIVE''' options affect the overall layout of the pages. | |||
* Static Header | |||
*; By default the header will stay at the top of the page when long pages are scrolled. | |||
*; If you prefer to have it scroll, then set '''StaticHead''': false, | |||
* Static Footer | |||
*; By default the footer will always stay at the bottom of your screen regardless of the length of the page. | |||
*; If you want it to scroll then set '''StaticFoot''': false, | |||
* Units to use for gaps | |||
*; By default the site uses responsive units to adjust the gap between the header content and footer. | |||
** You can use '''vh''' which ties the gap units to a percentage of the screen height | |||
** You can use '''em''' which ties the gap to the height of the font (which is responsive), or | |||
** You can use '''px''' which is a fixed height based on the resolution of your browser/screen. | |||
* Gap between header and page content | |||
*; Any positive value can be used but if using pixels, it must be an integer. | |||
* Gap between page content and footer | |||
*; As for above. | |||
====The Seagull==== | |||
The seagull is a fixture on your screen. By default it fades in over two seconds. However, you can use a different animation if you prefer. The available animations are: | |||
==An Alternative Interface== | ==An Alternative Interface== |
edits