232
edits
Customised templates: Difference between revisions
From Cumulus Wiki
Jump to navigationJump to search
m
Text replacement - "http://sandaysoft.com/forum/" to "https://cumulus.hosiene.co.uk/"
SaratogaWX (talk | contribs) m (Text replacement - "http://sandaysoft.com/forum/" to "https://cumulus.hosiene.co.uk/") |
|||
| Line 28: | Line 28: | ||
<!-- The next line is not included in official versions of Cumulus Templates, but was introduced in an alternative version to make the standard pages responsive, they adapt to screen size. --> | <!-- The next line is not included in official versions of Cumulus Templates, but was introduced in an alternative version to make the standard pages responsive, they adapt to screen size. --> | ||
<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"> <!-- See https://www.w3schools.com/w3css/default.asp for details --> | <link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"> <!-- See https://www.w3schools.com/w3css/default.asp for details --> | ||
<!-- See support forum | <!-- See support forum https://cumulus.hosiene.co.uk/viewtopic.php?f=14&t=16014&p=122788 for more details --> | ||
<link href="weatherstyle.css" rel="stylesheet"> <!-- This line links the standard Cumulus style-sheet to the HTML page (and implies the HTML and CSS files are in the same web site directory) --> | <link href="weatherstyle.css" rel="stylesheet"> <!-- This line links the standard Cumulus style-sheet to the HTML page (and implies the HTML and CSS files are in the same web site directory) --> | ||
| Line 160: | Line 160: | ||
=== Changing the appearance === | === Changing the appearance === | ||
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. | 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. | ||
One contributor on [ | One contributor on [https://cumulus.hosiene.co.uk/viewtopic.php?f=14&t=15136 the forum] has produced a very impressive looking summary page, that is totally different to the standard Cumulus provision as it takes the numbers from realtime.txt not cumulus web tags, but he has achieved much of the look using CSS. | ||
=== Templates in cumulus\web\originals sub-folder === | === Templates in cumulus\web\originals sub-folder === | ||
| Line 312: | Line 312: | ||
# You can change which Cumulus produced graphs are included (the standard version includes indoor temperature but excludes solar related graphs). The necessary edits to do this are described below. | # You can change which Cumulus produced graphs are included (the standard version includes indoor temperature but excludes solar related graphs). The necessary edits to do this are described below. | ||
# The standard template uses JavaScript to action the change of the large graph when a thumbnail graph is clicked. All modern browsers support script, but you might want to eliminate script and just use pure HTML as explained [[Editing_content_of_a_webpage_using_either_HTML_or_Script| elsewhere in this Wiki]]. | # The standard template uses JavaScript to action the change of the large graph when a thumbnail graph is clicked. All modern browsers support script, but you might want to eliminate script and just use pure HTML as explained [[Editing_content_of_a_webpage_using_either_HTML_or_Script| elsewhere in this Wiki]]. | ||
# If you want points plotted at hourly intervals for up to 7 days, the recent history tags and external script libraries can be used to do this as explained [ | # If you want points plotted at hourly intervals for up to 7 days, the recent history tags and external script libraries can be used to do this as explained [https://cumulus.hosiene.co.uk/viewtopic.php?f=18&t=12321 in this thread on the support forum]. | ||
# That same support forum thread includes how to plot histograms (best for daily totals such as rainfall and windrun) made from colour blocks reading the values from the daily summary log. But of course if you use PHP, you might want to read from a database table with similar information. | # That same support forum thread includes how to plot histograms (best for daily totals such as rainfall and windrun) made from colour blocks reading the values from the daily summary log. But of course if you use PHP, you might want to read from a database table with similar information. | ||
