5,838
edits
Customised templates: Difference between revisions
From Cumulus Wiki
Jump to navigationJump to search
→Customised templates: As consequence of HTML5 and utf-8 change; Restructured whole article
m (→How Cumulus uses its templates: corrected list, added mention of charset change) |
(→Customised templates: As consequence of HTML5 and utf-8 change; Restructured whole article) |
||
| Line 57: | Line 57: | ||
The standard website set up is fully described in [[Simple_Website_setup]]. | The standard website set up is fully described in [[Simple_Website_setup]]. | ||
=Changing the templates | =Changing the Standard Templates= | ||
Typically 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/removing table cell (td) elements and possibly rows (tr). | |||
*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; | |||
**add a link to another of your pages or externally; | |||
**add/remove some Cumulus derived information; | |||
**add a page counter; etc | |||
*Remember to edit the xxxT.htm files, (not the xxx.htm files as they are created by the Cumulus 'process') | |||
*It is best to close down Cumulus while updating the template files. | |||
*Use windows Notepad or another '''text editor''' tool to modify the HTML as necessary. | |||
**Do not use a word processor as that will introduce unwanted characters; | |||
**Many web page editors should also be avoided as they can change the page structure and remove the Cumulus web tags; | |||
**Other 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. | |||
== 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.''' | |||
It is best to | ==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. | |||
*If you edit one or more of the templates, listed in the table above, in the ''cumulus\web'' sub-folder, keeping their original names, this has the advantage that Cumulus will process the customised template as if it is a standard one (as described above). | |||
*You just need to have 'Include Standard Files' ticked (as shown above) on the ''Files'' tab of the '''Internet''' screen within the 'Configuration' menu. | |||
[[File:Components_screen.JPG]]*As soon as you edit templates, remember that when you update to a new build of Cumulus (or re-install the current version) the installer offers you the option of either installing the new build's standard 'HTML templates' in the 'cumulus\web' folder (and any updated files in 'Cumulus\webfiles'), or not replacing the current contents of those sub-folders. If you select to install the templates, your changes will be lost as Cumulus will replace those in the 'web' folder with the standard ones. | |||
*If you use a mixture of unmodified standard templates and customised templates with standard names, if a release announcement says there are updated scripts then on an update you will need to accept the templates in the screen above to download those updated versions of scripts used by the standard templates. | |||
'''Consequently, the recommendation is that for any customised templates, you delete the original template from the web sub-folder (leaving it in the web\originals sub-folder) and put your customised template in a different folder.''' If you do this: | |||
*You reduce the risk of accidental overwriting. | |||
*You can either use a standard template name or you can select a new filename (it is recommended you continue to insert the suffix 'T' to indicate it is a template that needs to be processed by Cumulus). | |||
*You can select your own folder name | |||
*You do need to define the local and remote file names - as described [[#Creating_Your_Own_Templates| below]] | |||
== Adding/removing Solar table cells for main page and trend graphs == | |||
Here are two examples relating to solar and UV sensors. Your weather station might be a sort that can accept [[Extra_Sensor_Files| Extra Sensors]] and if so you probably want to add webtags for those. | |||
== indexT.htm == | === indexT.htm === | ||
Look through the standard file and find the following code segment begining with a comment starting 'Solar data'... | Look through the standard file and find the following code segment begining with a comment starting 'Solar data'... | ||
<pre> | <pre> | ||
| Line 93: | Line 117: | ||
<td colspan="2"></td> | <td colspan="2"></td> | ||
</pre> | </pre> | ||
== trendsT.htm == | === trendsT.htm === | ||
Look through the standard file and find the following code segment defining a table... | Look through the standard file and find the following code segment defining a table... | ||
<pre> | <pre> | ||
| Line 119: | Line 143: | ||
</table> | </table> | ||
</pre> | </pre> | ||
If you look in 'web\images' sub-folder of where you have installed cumulus.exe, you will see 3 more pairs (solar, UV, and Sunshine) of images not mentioned in above segment. You might want to add 1 or 2 of them taking hints from the revised segment below. Note that in two rows a 'colspan' attribute is used to place one piece of text across the entire row, and the value given to that parameter needs to match the number of 'td' elements in other rows. Also note that because an odd number of thumbnails is included in the table, that one 'td' element is empty. | If you look in 'web\images' sub-folder of where you have installed cumulus.exe, you will see 3 more pairs (solar, UV, and Sunshine) of images not mentioned in above segment. You might want to add 1 or 2 of them taking hints from the revised segment below. Note that in two rows a 'colspan' attribute is used to place one piece of text across the entire row, and the value given to that parameter needs to match the number of 'td' elements in other rows. Also note that because an odd number of thumbnails is included in the table, that one 'td' element is empty. | ||
[[File:File_tab.JPG]]On the screen (extract) shown here, you select solar, uv or sunshine to determine which of the 3 extra graphs, are file transferred (or copied) to your web site. Remember, in practice your station will not support all 3, so you will need to edit the changes shown below to suit your instrumentation. | |||
<pre> | <pre> | ||
<table cellpadding="0" cellspacing="0" id="Graph_menu"> | <table cellpadding="0" cellspacing="0" id="Graph_menu"> | ||
| Line 145: | Line 169: | ||
<td class="td_thumbnails"><a onclick='changeImage("images/raind.png")'><img src="images/raindsm.png" alt="Daily Rain Graph Thumbnail" width="150" height="100" border="0" /></a></td> | <td class="td_thumbnails"><a onclick='changeImage("images/raind.png")'><img src="images/raindsm.png" alt="Daily Rain Graph Thumbnail" width="150" height="100" border="0" /></a></td> | ||
<td class="td_thumbnails"><a onclick='changeImage("images/sunshine.png")'><img src="images/sunshinesm.png" alt="Sunshine Hours Thumbnail" width="150" height="100" border="0" /></a></td> <!-- only for stations measuring hours of sunshine --> | <td class="td_thumbnails"><a onclick='changeImage("images/sunshine.png")'><img src="images/sunshinesm.png" alt="Sunshine Hours Thumbnail" width="150" height="100" border="0" /></a></td> <!-- only for stations measuring hours of sunshine --> | ||
<td></td> <!-- This is an empty element to ensure the same number of elements is in all rows | <td></td> <!-- This is an empty element to ensure the same number of elements is in all rows of thumbnails --> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
| Line 153: | Line 177: | ||
</table> | </table> | ||
</pre> | </pre> | ||
In your implementation, you may only use 1 or 2 of the 3 included here. Also you may want to delete the 'td' elements relating to indoor observations. Just remember to adjust the 'colspan' value and if you have an odd number of thumbnails to make all rows the same number of columns by including the null 'td' element shown in the above example. | In your implementation, you may only use 1 or 2 of the 3 included here. Also you may want to delete the 'td' elements relating to indoor observations. Just remember to adjust the 'colspan' value and, if you have an odd total number of thumbnails split between an even number of rows, to make all rows the same number of columns by including the null 'td' element shown in the above example. | ||
== Coding standard and character set for Customised Templates == | |||
[[File:Web settings.JPG]]Your edited template should be written in HTML 5 using charset="UTF-8". If it is using one of the standard names in the table above and does not comply with that coding, then you need to unselect the utf-8 seelction illustrated here. | |||
[[File: | |||
*Try to use a simple text editor to change the files. Many HTML editors will insert additional code, or break the standard Cumulus '[[webtags]]' by replacing the < or > symbols with character codes. Avoid using Word processors, like Word, to edit these files. | *Try to use a simple text editor to change the files. Many HTML editors will insert additional code, or break the standard Cumulus '[[webtags]]' by replacing the < or > symbols with character codes. Avoid using Word processors, like Word, to edit these files. | ||
= Creating Your Own Templates = | = Creating Your Own Templates = | ||
