How do I edit the main Heatermeter display page


 
Darren C. said:
Sam, did you ever get this? The background image should be the only sticking point. To change it, you'd either need to copy a new one to the HM like I did, or you'd need to reference it in the CSS like the others did. Both ways have their challenges. Obviously, if you copy it to your HM, you have to know how to get around the filesystem a little. But, if you reference it in CSS, you have to put the image somewhere that your HM can see it. You could put it somewhere like Dropbox or imgur. Then, you would reference the URL in the CSS. I think if you are completely new to this, either one will probably be a little confusing. I'll be glad to try and help you get the image you want working.
Click to expand...

Darren:
Yes I did get this working. Thanks, for asking. Just had to edit the CSS file like you explained.

Sam
 
Anyone know how to change the colour of the text in the bottom right of each probe that shows the hourly temp delta and the time till it reaches the high alarm temp?

Dps2rjB.png
 
Nope, sorry you're stuck with those colors. They're not CSS styled, they are built in the graph configuration. I'll look and see of Flot has a way to color them by style though, that's a good idea.
 
so FONTS are built in as well and not changeable?
i'd also like to change to a 24h setting. it shows PM in the upper right corner and AM/PM when hovering over the graphs. it's a bit inconsistent to the 24h format on the x-axis.
any chances to achieve that?
 
You can change fonts all you want (except the font of the graph scales I think). The AM/PM is fixed though because the date is formatted in code.
 
thanks bryan. i just finished soldering the hardware yesterday and it was working instantly. that was great.
i dl'd the sourcecode and start looking through it.
could you maybe point me to the correct parts to look at if i wanted to change locales stuff like AM/PM and language? AM/PM is like chinese for me *ggg* like mpg instead of l/km.
 
Haha you bet man. The AM/PM is in /usr/lib/lua/luci/view/linkmeter/index.htm, the function formatTime() which affects the update time as well as the time on the top of the graph tooltip. Just replace the %l with a %H and remove the %P at the end.
 
This is a very old thread. I wanted to change the index file to get a black background and make some of the other changes noted in this thread, but it appears that the index.htm file has changed quite a bit since this thread was made and people were making changes back in 2013. The layout of the file seems pretty different and the line numbers are off.

I searched for a more up-to-date thread with instructions but didn't find one. Is there some instructions for a recent build?

Or, am I just not understanding what to do?
 
Thanks again Steve. You're a one-man helpdesk for the Heatermeter!!

Before I saw your link, I was figuring out how to just alter the index.htm page. I was using Chrome and the page inspector feature to get a 'gist' of where in the index.htm file to change things. I know absolutely nothing about CSS otherwise and don't want to take the time to learn. I'll stick with what I have for now and learn CSS later.

Thanks for pointing that out so I can change it properly in the future.

Here's what I changed by editing the index.htm file.
new%20home%20page.PNG
 
The CSS changes are relatively straightforward. The point of the User CSS section is that those changes persist through upgrades, whereas the index.htm file is overwritten with a LinkMeter upgrade.

You can even use something like the Live CSS Editor extension for Chrome to try out your changes without having to save and reload each time.
 
it's an old thread i know, but still i'm trying to adjust the main page to my likings.
and i personally don't like the text shadows. the one of the BIG MAIN temperature, and the ones below. i already managed to set the font to ARIAL instead of times new roman and remove the background graphics.
but i have NO IDEA how to remove those shadows to have a plain solid text.
can anyone please help and tell me the correct CSS statement?
 
If you all want to make things look pretty without modifying the code just click the link to the "user CSS" tool on the LinkMeter Configuration page and override the CSS settings with something like this (what I use):

#backimage { background: url(https://encrypted-tbn2.gstatic.com/...J0OQBk1eCKWqro3cS5ELNrYJao-5CW_ZxXuRDMxD1cg); }
#backoverlay { background: transparent; }
#content { background: transparent; }
#probelist { background: rgba(125,100,55,.8)}
#fancontainer { background: transparent; }
#graph_opts { background: transparent; }

To shut off your explicit shadows you can add these CSS lines to remove them from the temps:
#temp0 { text-shadow: none !important; }
#temp1 { text-shadow: none !important; }
#temp2 { text-shadow: none !important; }
#temp3 { text-shadow: none !important; }


Using chrome's frame inspection the style options are all these:
<style type="text/css">
body { font: normal 13px Arial, sans-serif; background: #f3f1e9; text-align: center; margin: 0; padding: 0; }
h2 { color: #bbb; }
#content { background: #246; border: 1px solid #467; }
#contentframe { background: #000; padding: 10px; }
#probelist { width: 100%; background: #8ab; background: rgba(99, 162, 230, 0.5); border: 1px solid #235; padding: 0; }
td.probe { width: 33%; position: relative; }
.first.probe { border-right: 1px solid #235; }
.last.probe { border-left: 1px solid #235; }
.legbord { border: 1px solid #ccc; padding: 1px; display: inline-block; }
.legfill { width: 14px; height: 14px; }
.dph { color: #003; font-size: 10pt; text-align: right; position: absolute; right: 0; bottom: 0; }
.pname { color: #003; font-size: 18pt; line-height: 16pt; display: inline-block; }
.ptemp { font-size: 32pt; line-height: 26pt; color: #fff; }
.alarmHigh { color: #c00 !important; }
.alarmLow { color: #33f !important; }
#graphtt { display: none; position: absolute; border: 1px solid #89c; background: #eef;
opacity: 0.9; padding: 2px; color: #003; }
#graphtt_title { color: #fff; border: 1px solid #008; background-color: #357; }
#graphtt_peak { font-size: smaller; color: #fff; }
.hotback { background-color: #d20; }
.coldback { background-color: #08F; }
#graphtt_arrow { position: absolute; left: 0; bottom: -9px; }
#dialog-overlay { width: 100%; height: 100%; position: fixed;
top: 0px; left: 0px; display: none; background-color: #000;
opacity: 0.6; z-index: 2; }
#alarm { background-color: #600; width: 340px; height: 150px;
border: 5px solid #fff; padding: 10px; color: #fff;
position: fixed; z-index: 3; top: 100px; display: none;
left: 50%; margin-left: -240px; }
#alarmclear { display: none; position: absolute; bottom: 4px; right: 4px; color: #ccc; }
.rfstatus { display: none; position: absolute; left: 0; bottom: 0;
width: 16px; height: 16px; background-image: url('/luci-static/resources/rf.png'); }
.noise { display: none; position: absolute; left: 0; bottom: 0;
width: 16px; height: 16px; background-image: url('/luci-static/resources/noise.png'); }
#pidint { width: 200px; background-color: #fcfcfc; border-radius: 5px;
border: 1px solid #333; position: absolute; font-size: 10pt;
bottom: 0px; line-height: 12pt; padding: 3px; display: none; }
.pilabel { width: 7%; color: #555; font-weight: bold; float: left; clear: left; }
.first.pilabel { margin-top: 1px; }
.pival { width: 25%; color: #aaa; text-align: right; float: left; }
.first.pival { margin-top: 1px; }
.pibarcont { position: relative; float: right; width: 65%; border: 1px solid #999;
background-color: #f0f0f0; }
.pibar { position: relative; }
.pipip { position: absolute; left: 50%; top: 0; width: 1px; height: 100%;
background-color: #999; }
#navcontainer ul { list-style-type: none; margin-top: 10px; margin-bottom: 0; }
#navcontainer li { display: inline; }
#navcontainer li a { text-decoration: none; color: #f3f1e9;
padding: 4px 30px 4px 30px; border: 1px solid #000; }
#navcontainer li a:hover { background-color: #246; color: #f3f1e9;
border: 1px solid #333; }
.noisebtn { color: #555; text-align: center; height: 32px; width: 32px; font-size: 15px;
border: 1px solid #dcdcdc; line-height: 32px; background-color: #ededed;
float: right; }
.first.noisebtn { border-radius: 6px 6px 0 0; margin-top: 6px; }
.last.noisebtn { border-radius: 0 0 6px 6px; }
#updatedtime { position: absolute; top: 8px; right: 13px; color: #bbb; font-size: 12pt; }
#lid { position: absolute; top: 8px; left: 13px; color: #bbb; font-size: 12pt; }
#png { display: none; height: 350px; margin: 8px auto 0px auto; }
#noisegraph { display: none; height: 256px; width: 1058px; margin: 8px auto 0px auto; }
#noisegraph_g { height: 256px; width: 1024px; float: left; }
#graph { height: 350px; width: 700px; margin: 8px auto 0px auto; }
#graphcontainer { display: inline-block; }
#graph_overview { height: 90px; width: 700px; margin-left: auto; margin-right: auto; }
#graph_opts { color: #000; }
#loadindic { display: none; position: relative; top: -320px; z-index: 2; }
#pn0 { color: #bbb; font-size: 28pt; }
#p0container { font-size: 120pt; line-height: 100pt; color: #fff; position: relative; }
.ramp { color: #bbb; }
#ramp { font-size: 22pt; line-height: 22pt; display: none; }
#setcontainer { font-size: 22pt; line-height: 22pt; position: absolute; bottom: 0; right:0; }
#backimage { font-family: Trebuchet MS; background: #000 url('/luci-static/resources/fire.png') repeat-x scroll left bottom; }
#backoverlay { background: rgba(76,135,199,0.5); }
#fancontainer { background: #357; border: 1px solid #777; height: 20px; position: relative; }
#fanc { position: absolute; left: 0; top: 3px; z-index: 0; background: #008db8;
width: 0%; height: 14px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
#fanf { position: absolute; left: 0; top: 3px; z-index: 1; background: #0ad;
width: 0%; height: 14px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
#fanl { position: absolute; left: 0; top: 1px; z-index: 2; color: #003; font-size: 10pt; }
#fana { position: absolute; left: 0; top: 0; z-index: 3; width: 3px; height: 20px; background: #fe4; opacity: 0.5; }
img.preload { display: none; }
#backimage { background: url(https://encrypted-tbn2.gstatic.com/...J0OQBk1eCKWqro3cS5ELNrYJao-5CW_ZxXuRDMxD1cg); }
#backoverlay { background: transparent; }
#content { background: transparent; }
#probelist { background: rgba(125,100,55,.8)}
#fancontainer { background: transparent; }
#graph_opts { background: transparent; }
</style>
 
Last edited:
You must log in or register to reply here.

 

Back
Top