Page 1 of 1
Re-Editing Template files.
Posted: Tue 08 Dec 2020 3:36 am
by Phil23
Hi All,
In the process of editing the 3.9.2 template files to get them back like what I currently have.
Can anyone point out what I've missed with the Trends.htm
My old one was wider, but it's not centering ATM. Also button sizes are different.....
Old & new version here....
http://weather.inverellit.com/graphs.htm &
http://weather.inverellit.com/trends.htm
Also have NOT uploaded the new cumuluscharts.js to my site yet as mine contains changes to the zoom buttons to accommodate my 7 day graph data & make it default to 48 hours.
So AirQual won't be expected to work yet, but the JS will be next on the list.
My HTML skills aren't brilliant.
Thanks
Phil
Re: Re-Editing Template files.
Posted: Tue 08 Dec 2020 4:17 am
by beteljuice
The input sections below
<!-- End of navigation menus at the top -->
Are being handled differently (in the html)
trends is just a <div>, graphs is using a <table> construct
Re: Re-Editing Template files.
Posted: Tue 08 Dec 2020 4:26 am
by Phil23
So for a mug like me, It might be best to just try and add AirQual to my existing Graphs template.
But having said that, the buttons on trends is central on the page, it's the wider chart container that's not.
Code: Select all
<div style="text-align:center;">
<input name="btnTemp" class="button" tabindex="1" type="button" value="Temperature" onclick="changeGraph('temp');">
<input name="btnDailyTemp" class="button" tabindex="2" type="button" value="Daily Temp" onclick="changeGraph('dailytemp');">
<input name="btnPress" class="button" tabindex="3" type="button" value="Pressure" onclick="changeGraph('press');">
<input name="btnWind" class="button" tabindex="4" type="button" value="Wind Speed" onclick="changeGraph('wind');">
<input name="btnWindDir" class="button" tabindex="5" type="button" value="Wind Dir." onclick="changeGraph('windDir');">
<input name="btnHum" class="button" tabindex="6" type="button" value="Humidity" onclick="changeGraph('humidity');">
<input name="btnRain" class="button" tabindex="7" type="button" value="Rainfall" onclick="changeGraph('rain');">
<input name="btnDailyRain" class="button" tabindex="8" type="button" value="Daily Rain" onclick="changeGraph('dailyrain');">
<input name="btnSolar" class="button" tabindex="9" type="button" value="Solar" onclick="changeGraph('solar');">
<input name="btnSunHours" class="button" tabindex="10" type="button" value="Sun Hours" onclick="changeGraph('sunhours');">
<input name="btnAirQuality" class="button" tabindex="11" type="button" value="Air Quality" onclick="changeGraph('airquality');">
</div>
I assume the entire chart container is just handled by this.
Code: Select all
<div id="widecontent">
<div id="chartcontainer">
</div>
</div>
Thanks.
Re: Re-Editing Template files.
Posted: Tue 08 Dec 2020 4:55 am
by beteljuice
In 'graphs' ...
<div id="widecontent"> is in between
TWO <div id="content">
You've manged to get away with a duplicate id because there is no js involved and they are both obeying the css rule.
In 'trends' <div id="widecontent"> is in the middle of a single <div id="content">
I don't know if you are using the 'distribution' css for the buttons (the stuff that's actually in the page) or not, is the actual buttons code from a new 'distro' template ? - if so I would expect the css to give correct vertical separation (which is not happening in 'trends')
Re: Re-Editing Template files.
Posted: Tue 08 Dec 2020 5:25 am
by Phil23
My CSS would be older, but with a few sections added.
From memory a section for the watch, wider graphs & some other bits for the AirQual in the table in index.
Might need to do a bit more comparing.
Code: Select all
#content {
margin: auto;
width: 800px; /* whatever working width you like */
}
#wcontent {
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0%;
margin-left: 0%;
width: 360px; /* whatever working width you like. This bit for Galaxy Watch */
}
#widecontent {
margin: auto;
width: 1200px; /* whatever working width you like. This bit for Wider Graphs */
}