5,838
edits
Customised templates: Difference between revisions
no edit summary
m (→Simple customisation of indexT.htm: Corrected incorrect row opening reference) |
No edit summary |
||
| Line 1: | Line 1: | ||
= HTML 5 - a very quick guide to structure = | =Customisation Introduction= | ||
Steve Loft once described the web pages he provides with Cumulus with these words: "They exist because they're our web pages, and they're really only included with Cumulus as examples of how the web tags work. It never occurred to me that most people would simply use the supplied examples instead of creating their own pages!" | |||
For many people, however, a big attraction of Cumulus is that you can install it and immediently get some web pages that allow you to see so many more statistics than are available on a typical weather station console. If you have on-line web space you can see those pages on any of your devices wherever you are, and the pages can be seen by other people without you having to know how to write web page code. The standard web pages that come with Cumulus are written as templates, they are page designs that have in effect place-holders where processing (this is explained below) by Cumulus adds the relevant statistics and then creates a web page that is uploaded to your web server. Because the standard web pages have to work with several different weather station types, you may find some of the items shown cannot be updated with your own weather station. Much of this article will help you to customise these templates, when you do want to be more adventuous and tailor the web pages to match your weather station and fit in with your own needs. | |||
This article is being written as a compromise, it tries to help those who know nothing about web pages and want to learn the bits relevent to redesigning Cumulus web pages (instead of learning everthing about HTML, CSS, and the various script languages), but it also wants to help those who do have coding knowledge to understand how to apply such knowledge to the Cumulus context. So don't worry if there are parts of this article too difficult for you, hopefully some of the examples will help you. | |||
Actually, what you see in a browser as a web page tends to involve more than one file. A web-page written to a standard called 'HTML5' defines structure and content, but the style and look will be read from a separate file called a cascading style sheet. That approach allows several web pages to have a common look and makes it easy to change the look of all pages on a web site. More than one style sheet might be invoked, sometimes to allow the web page to be responsive and adjust to the device it is being viewed on, and sometimes just because some styling may not be applicable to more than one web page. Some web pages may require a script to run allowing information (tables or graphs) on that web page to be updated with current statistics. The scope of this article is to focus on the HTML file (so its content will be explained next), as that defines the content and puts it into a structure. However, if you are after a change in the look or want a more significant change to the content, you may need to edit some of the other files, and this article will only give a few pointers. | |||
== HTML 5 - a very quick guide to structure == | |||
It is possible to take the standard Cumulus web templates and customise these into totally new ones to your own requirements. A basic understanding of HTML is useful. | It is possible to take the standard Cumulus web templates and customise these into totally new ones to your own requirements. A basic understanding of HTML is useful. | ||
| Line 24: | Line 33: | ||
<body> <!-- This defines the start of what the browser is to display in its window --> | <body> <!-- This defines the start of what the browser is to display in its window --> | ||
</pre> | </pre> | ||
The comments <code><!-- a comment goes here --></code> are place holders explaining the above code | The comments <code><!-- a comment goes here --></code> are place holders explaining the above code. | ||
You will see that the Cascading Style Sheet for Cumulus "weatherstyle.css" is linked to the HTML in the 10th line of the above code example. There is more information about stylesheets in a separate article [[Stylesheets]] in this Wiki. | |||
== Structure that browser displays == | === Structure that browser displays === | ||
The main part of the page (you can base | The main part of the page (you can base your own version of code for here on what you can see in the closest standard template to what you are trying to achieve) goes next. | ||
== Standard Finish == | === Standard Finish === | ||
All your templates could have this standard finish if you have created a Cumulus style template so need to acknowledge the software that will process the template (creating the web page): | All your templates could have this standard finish if you have created a Cumulus style template so need to acknowledge the software that will process the template (creating the web page): | ||
| Line 46: | Line 57: | ||
</pre> | </pre> | ||
== What is meant by 'Cumulus processes templates' == | |||
#When Cumulus is ready to perform a web site update, it will read each template file: | |||
#*If ''Include Standard Files'' is selected it processes all the standard files (those listed in table below). How the (built in, third party) component which handles the processing of the template file copes with a missing input file depends on the version: | |||
#** Up to version 1.9.3 - If a template listed above does not exist, will create an empty output file. | |||
#** In version 1.9.4 (from build 1061) - Don't try to process a standard template file if it's been deleted. | |||
#*If ''Include Standard Files'' is not selected, then only the files explicitly listed with ''Process?'' selected are processed. | |||
#*Regardless of that setting, the Cumulus component will process those listed in [[Cumulus.ini#Section:_FTP_Site]] as local files that also have ''Process?'' selected (set to 1 in Cumulus.ini#Section:_FTP_Site). [[File:Cumulus FTP Process.png |right]] | |||
[[File:badge v1.png]] In Cumulus 1, only the first 10 of a possible maximum of 100 files appear on 'Files' tab in internet settings screen reached from configuration menu. The others can only be edited (with Cumulus stopped) by editing the Cumulus.ini file (see the information later in this article) | |||
[[File:Badge vMx.png]] In Cumulus MX, the configuration screen for the internet files will step through all the possible 100 slots (what you select or input there is covered later in this article). | |||
#Processing means: | |||
#*Where it finds a [[Webtags|web tag]] it will remove that tag and - | |||
#**either insert the relevant observations from the weather station, | |||
#**or insert derived values calculated by Cumulus, | |||
#**or insert time-stamps (formatted by default or [[Webtags#Time.2FDate_.27format.27_Parameter|how you specify]]), | |||
#**or insert [[Webtags#Miscellaneous|miscellaneous]] values. | |||
#*Otherwise text and code as defined by the template is copied into the output file. <br/><br/> | |||
#The result of that process is the creation of local output pages: | |||
#*Typically the output is a HTML web page; | |||
#** but it is also possible to process scripts with cumulus web tags, and produce an output file in JavaScript or PHP Hypertext pre-processor (e.g. [[Php_webtags|this file]]) code; | |||
#**(you can even, inefficiently, process Cascade Styling Sheets if you want to put web tags in them, but more usually the HTML template can include a web tag in the href property value that selects the required pre-loaded CSS). | |||
#*(until build 1092 any created web pages were in XHTML 1.0 Transitional using charset=iso-8859-1; from build 1093 normal created web pages are by default - see below for how to change this - in HTML 5 using charset="UTF-8") | |||
#*The file name that Cumulus uses for the created local output page depends on the original template: | |||
#**If template is being processed by "Include Standard Files", the output page created locally is the same name without the 'T', | |||
#**If template is listed in cumulus.ini FTP section as a local file then the web page created locally has 'tmp' suffixed to the extension. This copes with customised templates that do not use the 'T' convention. <br/><br/> | |||
#Cumulus will FTP these up to your web space on the internet. If you have asked it to use ''Rename'' on the remote file, a temporary name is created with the suffix 'tmp' added to the final file name as shown in diagram here. The final file names on your web site will be: | |||
#*for templates being processed by ''Include Standard Files'', final file name is as template name without the letter T; | |||
#*for customised templates (what the chart labels as ''Extra files''), final file name is the name stored for the remote file name in [[Cumulus.ini#Section:_FTP_Site]]). | |||
=Cumulus Web Templates= | |||
The standard website set up, with several other files, is fully described in [[Simple_Website_setup]], look there for details of all the different files needed on your web site. | |||
==The Standard Templates for Cumulus 1== | |||
[[Category:WebTips]] | [[Category:WebTips]] | ||
Cumulus has a number of template files that it uses if you select to 'Include standard files' within Internet Configuration: | [[File:badge v1.png]] Cumulus 1 has a number of template files that it uses if you select to 'Include standard files' within Internet Configuration: | ||
[[File:SimpleInternet-StandardTicks.png]] | [[File:SimpleInternet-StandardTicks.png]] | ||
Cumulus 1 generates some graphics used for the moon image on index.htm web page, for some of the images on the the gauges.htm web page, and the graphs that appear on the trends.htm web page. | |||
The '''template files''' are stored in the 'web' folder under your Cumulus installation on your PC. They all have a 'T' (for 'template') in their names: | The '''template files''' are stored in the 'web' folder under your Cumulus installation on your PC. They all have a 'T' (for 'template') in their names: | ||
| Line 98: | Line 146: | ||
|} | |} | ||
== | ==Standard Templates for Cumulus MX== | ||
[[File:Badge vMx.png]] The standard template files are found in CumulusMX\webfiles folder. Although the templates appear to be the same as Cumulus 1, those for gauges and trends are different. In Cumulus MX script files supply the data that will be used to show on the gauges web page and for the web server to draw the trend graphs, Cumulus MX does not generate any new graphics for each upload. | |||
=Changing the Standard Templates= | ==Changing the Standard Templates== | ||
If all you want to do is change the look of the web pages, then it is the CSS that needs to be changed, just changing the background picture is explained in [[FAQ#How_do_I_replace_the_.27bird.27_image_on_my_website.3F|this FAQ]], . If you don't like your text being converted to lower case see [[FAQ#I.27m_using_the_supplied_web_pages.2C_and_get_lower_case_in_places_where_I_want_upper_case|this FAQ]]. If you want a more extensive change to the look, you might want to consider a third-party template, see downloads page or the support forum, as a starting point. If those don't suit you, you will need to learn about coding CSS (basically you specify selectors and for each selector you can specify a list of property names and their values), as the selectors available in CSS are really very clever now there is an awful lot you can do just using CSS, but it is too complicated to cover here. | |||
This section covers how the templates are modified to include additional weather data, or remove it. This is generally done by adding or removing Cumulus [[webtags]], but you normally have to vary the HTML structure by adding/editing/removing table cell (<td> to </td>) elements and possibly add/remove a row (<tr class="..."> to </tr>) element. | |||
*You can modify one or more of the template files listed above. For example, you may wish to | *You can modify one or more of the template files listed above. For example, you may wish to | ||
**change the wording that appears on the web page by editing it on the template; | **change the wording that appears on the web page by editing it on the template; | ||
| Line 137: | Line 161: | ||
*Remember to edit the xxxT.htm files, (not the xxx.htm files as they are created by the [[#What is meant by 'Cumulus processes templates' |Cumulus 'process']]) | *Remember to edit the xxxT.htm files, (not the xxx.htm files as they are created by the [[#What is meant by 'Cumulus processes templates' |Cumulus 'process']]) | ||
*It is best to close down Cumulus while updating the template files. | *It is best to close down Cumulus while updating the template files. | ||
* | *You should ideally use a tool designed to help you edit a file written in a 'programming language', although most '''text editor''' tools can be safely used to modify the HTML. | ||
** | **HTML editors (like [http://notepad-plus.sourceforge.net/uk/site.htm Notepad++], [http://www.htmlkit.com/ HTML kit-292] to cite just two free ones) are just text editors that use colour and other aids to help you identify what you are editing and may make it easier for you as they also preserve the character encoding in the file (Cumulus files are encoded in UTF-8 without BOM - see below). | ||
**Do not use a 'word processor' as that will introduce unwanted characters; | |||
**Avoid most 'web page editors' (like wordpress) as they can change the page structure and remove the Cumulus web tags; | |||
== Templates in cumulus\web\originals sub-folder == | === Templates in cumulus\web\originals sub-folder === | ||
From version 1.8.9 onwards, the Cumulus installer installs the standard templates in a Cumulus subfolder called 'web/originals' so you can refer to them. '''Do not edit these.''' | From version 1.8.9 onwards, the Cumulus installer installs the standard templates in a Cumulus subfolder called 'web/originals' so you can refer to them. '''Do not edit these.''' | ||
==Editing to create one or more customised templates in the standard web sub-folder== | ===Editing to create one or more customised templates in the standard web sub-folder=== | ||
*Keep copies of any xxxT.htm files you modify. It is best to back up the whole Cumulus folder onto a different disc on a regular basis. | *Keep copies of any xxxT.htm files you modify. It is best to back up the whole Cumulus folder onto a different disc on a regular basis. | ||
| Line 164: | Line 188: | ||
*Alternatively, if it is a template containing web tags but uses a name other than a standard one, treat as [[#Creating or Editing Templates in a Separate Folder]]. | *Alternatively, if it is a template containing web tags but uses a name other than a standard one, treat as [[#Creating or Editing Templates in a Separate Folder]]. | ||
== Navigation Links == | |||
On a standard Cumulus page there are some HTML headings and then a HTML table ending with a way to select another Cumulus page (a set of 'anchor' links). If you are modifying standard Cumulus templates or adding extra pages of your own to those existing, then you will need to modify the navigation links on all pages, so a page can access any other page. The support forum can be searched to see what problems others have encountered when doing this. | On a standard Cumulus page there are some HTML headings and then a HTML table ending with a way to select another Cumulus page (a set of 'anchor' links). If you are modifying standard Cumulus templates or adding extra pages of your own to those existing, then you will need to modify the navigation links on all pages, so a page can access any other page. The support forum can be searched to see what problems others have encountered when doing this. | ||
| Line 179: | Line 203: | ||
If you add extra items, the links may be too wide to fit within the screen, rectify this by adding a space between a pair of colons where you want to allow the browser to move to a new line (or defining two table rows each with half the anchor links). Alternatively, introduce drop-down selections where links are grouped into categories, too complicated to explain here, but examples appear in the support forum and are explained elsewhere on the web. | If you add extra items, the links may be too wide to fit within the screen, rectify this by adding a space between a pair of colons where you want to allow the browser to move to a new line (or defining two table rows each with half the anchor links). Alternatively, introduce drop-down selections where links are grouped into categories, too complicated to explain here, but examples appear in the support forum and are explained elsewhere on the web. | ||
==Updating to a new Cumulus build== | |||
[[File:Components_screen.JPG|right]] | [[File:Components_screen.JPG|right]] | ||
| Line 213: | Line 237: | ||
</pre> | </pre> | ||
Cumulus standard web pages use "<td>"...</td> tag pair for table cells containing labels, but you could use "<th>" as shown in above example, the advantage of that is you can add a reference to that tag in the CSS to change the look of label cells. See [[Stylesheets|styling page]] for more information. | Cumulus standard web pages use "<td>"...</td> tag pair for table cells containing labels, but you could use "<th>" as shown in above example, the advantage of that is you can add a reference to that tag in the CSS to change the look of label cells whilst keeping a different look for value cells. See [[Stylesheets|styling page]] for more information. | ||
Since on this web page there are two pairs of table cells per row, if you really want to add ''just one pair'' in a row, then you need to also add ''an empty pair of cells'' to keep the same count of cells in every row: | Since on this web page there are two pairs of table cells per row, if you really want to add ''just one pair'' in a row, then you need to also add ''an empty pair of cells'' to keep the same count of cells in every row: | ||
| Line 223: | Line 247: | ||
</tr> | </tr> | ||
</pre> | </pre> | ||
Again, you can change the look of such empty cells, | Again, you can change the look of such empty cells, using a modification to the CSS (''empty-cells: hide;'') will preserve the structure but any cell that does not contain any content will show the background of the table instead of whatever look is defined for table cells, without that modification empty cells will have same background colour as other cells in that row. | ||
Similarly you can add any other observations, remember you need to add another 'tr' start tag with the appropriate class attribute value, then 4 table cells, and don't forget any of the end tags (it may seem to work without end tags, but that forces the browser at display time to decide for itself where to end each cell, potentially confusing the structure). | Similarly you can add any other observations, remember you need to add another 'tr' start tag with the appropriate class attribute value, then 4 table cells, and don't forget any of the end tags (it may seem to work without end tags, but that forces the browser at display time to decide for itself where to end each cell, potentially confusing the structure). | ||
== Adding/removing Solar table cells for main page and trend graphs == | == Adding/removing Solar table cells for main page and trend graphs == | ||
Below are some examples relating to solar and UV sensors. | Below are some examples relating to solar and UV sensors. | ||
| Line 235: | Line 258: | ||
=== Simple customisation of indexT.htm === | === Simple customisation of indexT.htm === | ||
{{Version badge 1}} {{Version badge Mx}} | |||
How to Customise your indexT.htm is described here, but the FAQ referenced just above repeats an excerpt from that and also covers todayT.htm and yesterdayT.htm. | How to Customise your indexT.htm is described here, but the FAQ referenced just above repeats an excerpt from that and also covers todayT.htm and yesterdayT.htm. | ||
| Line 264: | Line 288: | ||
</pre> | </pre> | ||
=== Slightly less simple customisation of trendsT.htm === | === Slightly less simple customisation of trendsT.htm (Cumulus 1 only) === | ||
{{Version badge 1}} | |||
The standard template plots temperature range and rainfall on a day by day basis for the '''Daily Chart period''' as set on ''Display'' settings screen from '''Configuration menu''', but all the other graphs plot points at 10 minutes interval for thumbnails and 1 minute interval for the large graph (assuming you have left Cumulus running) for the '''Detailed Chart Period''' set in the same place. | The standard template plots temperature range and rainfall on a day by day basis for the '''Daily Chart period''' as set on ''Display'' settings screen from '''Configuration menu''', but all the other graphs plot points at 10 minutes interval for thumbnails and 1 minute interval for the large graph (assuming you have left Cumulus running) for the '''Detailed Chart Period''' set in the same place. | ||
| Line 345: | Line 369: | ||
In this section, the instruction cover both template files (Cumulus has to be asked to 'process' these) and other files (such as images, web pages without cumulus web tags, log files etc) that are to be file transferred or copied multiple times each day. | In this section, the instruction cover both template files (Cumulus has to be asked to 'process' these) and other files (such as images, web pages without cumulus web tags, log files etc) that are to be file transferred or copied multiple times each day. | ||
[[File:badge v1.png]] The pictures of the settings screen are taken from Cumulus 1, but although the settings screen in Cumulus MX has a different look, it is populated with the same content. | |||
[[File:Files tab settings.jpg|right]] | [[File:Files tab settings.jpg|right]] | ||
#''Include Standard Files'' (see top left in this image). | #''Include Standard Files'' (see top left in this image). | ||