Default Website Development: Difference between revisions

From Cumulus Wiki
Jump to navigationJump to search
(26 intermediate revisions by 3 users not shown)
Line 5: Line 5:
===The current default site===
===The current default site===
This will always be available to you in the 'websites' folder of your Cumulus MX Installation. If you wish to undo any of the changes that downloads from this page generate then simply re-copy the websites folder to your web host.
This will always be available to you in the 'websites' folder of your Cumulus MX Installation. If you wish to undo any of the changes that downloads from this page generate then simply re-copy the websites folder to your web host.
===An Alternative Interface===
A new addition to the existing Interface site used for managing your weather station is now available.  You can find out about it here: [[Alternative_Interface|Alternative Interface]].


===Templates===
===Templates===
Line 10: Line 13:


The available frameworks are:
The available frameworks are:
* A lefthand sidebar with the main panel on the right. [https://cumuluswiki.org/images/7/75/LeftSBTemplates.zip Left-handed sidebar template]
* A lefthand sidebar with the main panel on the right. Download at [https://cumuluswiki.org/images/7/75/LeftSBTemplates.zip Left-handed sidebar template]. These can be viewed at [https://weather.oaktreewebs.co.uk/ATL-1c.htm OaktreeWebs Weather]. Updated: 16 June 2021
* A righthand sidebar with the man panel on the left. [Https://cumuluswiki.org/images/6/67/RightSBTemplates.zip Right-handed sidebar templates]. This is similar to the default site but the sidebar starts higher up the screen.
* A righthand sidebar with the man panel on the left. Download at [Https://cumuluswiki.org/images/6/67/RightSBTemplates.zip Right-handed sidebar templates]. This is similar to the default site but the sidebar starts higher up the screen. Again, these can be viewed at [https://weather.oaktreewebs.co.uk/ATR-1c.htm OaktreeWebs Weather]. Updated 15 June 2021.
* A set with no sidebar - just the main content area. [Https://cumuluswiki.org/images/2/2a/NoSBTemplates.zip No sidebar templates]
* A set with no sidebar - just the main content area. Download at [Https://cumuluswiki.org/images/2/2a/NoSBTemplates.zip No sidebar templates]. View at [https://weather.oaktreewebs.co.uk/ATN-1c.htm OaktreeWebs Weather]. The single column version gauges page is set wider than other pages. Updated: 1 October 2021


====Additional/Alternative Pages====
====Additional/Alternative Pages====
=====Gauges=====
=====Gauges=====
We also have an alternative to the default gauges.htm page.  This does away with the sidebar and places the gauges in fixed width panels that automatically reposition themselves as the page strings.  The gauges are also able to be placed in any order without resorting to cut-n-paste.  Just add a number to their order property and its done.
We also have an alternative to the default gauges.htm page.  This does away with the sidebar and places the gauges in fixed width panels that automatically reposition themselves as the page width is changed.  The gauges are also able to be placed in any order without resorting to cut-n-paste.  Just add/change a number to their order style and its done.


This can be from here [Https://cumuluswiki.org/images/a/a8/NewGauges.zip Gauges_Page]. Updated: 11 March 2021
This can be downloaded from [Https://cumuluswiki.org/Downloads/NewGauges.zip Gauges Page]. Updated: 11 March 2021


=====NOAA Reports=====
=====NOAA Reports=====
To satisfy those who also publish their NOAA reports, this page will display 12 months worth of reports and the current annual report.  It uses the default layout at present but will be updated as required.
This is now included in the standard default website.  It enables any of your NOAA reports to be loaded into the page using Ajax calls so no page refresh is needed. Updated: 16 June 2021.
[Https://cumuluswiki.org/images/b/b4/Noaareport.zip NOAA_Reports_page]


===Complete ready to run alternative website pack===
===Complete ready to run alternative website pack===
We hope to have complete 'website' ready alternatives to the default provided by CumulusMX available.  It is likely that these will include a NOAA reports page as standard.
We now have a complete [[ResponsiveSite.zip | alternative 'website']] ready for use.  It is very similar to the current supplied website but with the following changes:
 
* There are two (2) gauges pages - gauges.htm and gaugesII.htm.  They are both full width.  The first removes the radio buttons from all gauges making is easy to see all gauges without scrolling.  The options are provided in a dropdown page menu along with units.  The second shows individual gauges in panels with their radio buttons.
* There is also a 'today v yesterday' page (todayYest.htm), for those that want to be able to compare readings.
* The layout of the sidebar is slightly different - it starts at the top of the right hand panel.
The menu has NOT been included in the zip and consequently you will need to adjust it to use the chosen pages listed above.
The zip file does contain the three css stylesheets; colours.css, mx-templates.css and gauges.css which will need to be copied to the correct location on your waebserver.
 
'''Please backup your site before uploading and extracting this alternative website'''
 
===Colour Themes===
The website and templates use colour themes to make it easier to change the colour throughout the site.  By downloading the colour theme pack, you can simply rename the chosen colour as 'colours.css' and it will be applied throughout your site.  All colour themes have now been updated to use ''css variables'' for the available theme colours.  This makes it much easier to add your theme colours to your custom pages, or style sheets.  It is also possible to apply theme colours to the gauges tooltips in this way.
 
For example, to add a coloured border to an element you can add the style like so:
<nowiki><span style="border-color: var(--d2);">**</span></nowiki> or <nowiki><span style="w3-theme-d2-bdr w3-border">**</span></nowiki>.
 
Visit the new '''[https://weather.oaktreewebs.co.uk/ATThemes.htm Theme Viewer]''' to preview any of these themes on a basic template page.  You can download individual themes directly from that page.  Alternatively you can download all themes (plus a 'readme.txt' file explaining the styles) [[File:ColourSchemes.zip | here]]
.


===Colour schemes===
Additional themes have now been added. The download includes a reworked default 'colours.css' stylesheet to also use css variables and a ReadMe file to explain the styles used.  
The website and templates use a colour scheme to make it easier to change the colour throughout the site.  By downloading the colour theme pack, you can simply rename the chosen colour as 'colours.css' and it will be applied throughout your site.


The theme included in the pack are:
The current list is:
* '''Arcadia''' - almost a bottle green based on #00a591
{| class="wikitable"
* '''CherryTomato''' - a muted red based on #e94b3c
|-
* '''ChiliOil''' - a reddy brown based on #944743
! Theme !! Theme !! Theme !! Theme
* '''HarbourMist''' - A warm grey based on #b4b7ba
|-
* '''Limelight''' - An insipid yellow based on #f1ea7f (for the brave or colour challenged)
| AlmondBuff || AlmostMauve || Arcadia || BasicGrey
* '''QuietGrey''' - A slightly cooler grey based on #bcbcbe
|-
* '''RedPear''' - A variation between CherryTomato and ChiliOil based on #bcbcbe
| CherryTomato || ChiliOil || colours || CrocusPetal
* '''RussetOrange''' - A muted orange based on #bcbcbe
|-
* '''SpringCrocus''' - a muted purple based on #bc70a4
| CylonYellow || Emporador || GreyBlue (new) || GreyGreen (new)
* '''UltraViolet''' - Two theme based on purple / violet - again for the brave or colour challenged.
|-
* '''ValientPoppy''' - As above.
| GreyRed (new) || HarbourMist || Limelight || LimePunch
|-
| Marsala || MartiniOlive || MeerKat || NebulasBlue
|-
| QuietGrey || ReadPear || RussetOrange || SailorBlue
|-
| SargassoSea || SlateGrey || SpringCrocus || Tofu
|-
| UltraViolet || ValiantPoppy || WarmSand || -
|}


More will be added over time.  Use this link [https://cumuluswiki.org/images/4/43/ColourSchemes.zip Additional colour schemes] to down load the schemes.
Use this link [https://cumuluswiki.org/images/4/43/ColourSchemes.zip Additional colour schemes] to down load the schemes.  You can view them in action at [https://weather.oaktreewebs.co.uk/ATThemes.htm Theme Viewer] page.  Updated: 1st Oct 2021.

Revision as of 08:37, 1 October 2021

The default CMX website Development

These section of the Wiki will enable you to get the latest information and resources for the new default CMX website shipped with version 3.10.x

The current default site

This will always be available to you in the 'websites' folder of your Cumulus MX Installation. If you wish to undo any of the changes that downloads from this page generate then simply re-copy the websites folder to your web host.

An Alternative Interface

A new addition to the existing Interface site used for managing your weather station is now available. You can find out about it here: Alternative Interface.

Templates

There are currently 3 alternative template frameworks for the site. These all include 4 variations for the main content area of a page; a single column, two column, three column and four columns. These can be used as the framework for existing pages or to add your own content as required. You can choose to use them in any combination or just one - its up to you. All come with a pdf readme file to help you use them but for full information about the available styles visit w3Schools.

The available frameworks are:

Additional/Alternative Pages

Gauges

We also have an alternative to the default gauges.htm page. This does away with the sidebar and places the gauges in fixed width panels that automatically reposition themselves as the page width is changed. The gauges are also able to be placed in any order without resorting to cut-n-paste. Just add/change a number to their order style and its done.

This can be downloaded from Gauges Page. Updated: 11 March 2021

NOAA Reports

This is now included in the standard default website. It enables any of your NOAA reports to be loaded into the page using Ajax calls so no page refresh is needed. Updated: 16 June 2021.

Complete ready to run alternative website pack

We now have a complete alternative 'website' ready for use. It is very similar to the current supplied website but with the following changes:

  • There are two (2) gauges pages - gauges.htm and gaugesII.htm. They are both full width. The first removes the radio buttons from all gauges making is easy to see all gauges without scrolling. The options are provided in a dropdown page menu along with units. The second shows individual gauges in panels with their radio buttons.
  • There is also a 'today v yesterday' page (todayYest.htm), for those that want to be able to compare readings.
  • The layout of the sidebar is slightly different - it starts at the top of the right hand panel.

The menu has NOT been included in the zip and consequently you will need to adjust it to use the chosen pages listed above. The zip file does contain the three css stylesheets; colours.css, mx-templates.css and gauges.css which will need to be copied to the correct location on your waebserver.

Please backup your site before uploading and extracting this alternative website

Colour Themes

The website and templates use colour themes to make it easier to change the colour throughout the site. By downloading the colour theme pack, you can simply rename the chosen colour as 'colours.css' and it will be applied throughout your site. All colour themes have now been updated to use css variables for the available theme colours. This makes it much easier to add your theme colours to your custom pages, or style sheets. It is also possible to apply theme colours to the gauges tooltips in this way.

For example, to add a coloured border to an element you can add the style like so: <span style="border-color: var(--d2);">**</span> or <span style="w3-theme-d2-bdr w3-border">**</span>.

Visit the new Theme Viewer to preview any of these themes on a basic template page. You can download individual themes directly from that page. Alternatively you can download all themes (plus a 'readme.txt' file explaining the styles) File:ColourSchemes.zip .

Additional themes have now been added. The download includes a reworked default 'colours.css' stylesheet to also use css variables and a ReadMe file to explain the styles used.

The current list is:

Theme Theme Theme Theme
AlmondBuff AlmostMauve Arcadia BasicGrey
CherryTomato ChiliOil colours CrocusPetal
CylonYellow Emporador GreyBlue (new) GreyGreen (new)
GreyRed (new) HarbourMist Limelight LimePunch
Marsala MartiniOlive MeerKat NebulasBlue
QuietGrey ReadPear RussetOrange SailorBlue
SargassoSea SlateGrey SpringCrocus Tofu
UltraViolet ValiantPoppy WarmSand -

Use this link Additional colour schemes to down load the schemes. You can view them in action at Theme Viewer page. Updated: 1st Oct 2021.