Post your HM homepage customizations


 
Thanks for all your suggestions. Please find attached my new one :wsm:
cJsBv67.jpg


Code:
#content { 
/* Permalink - use to edit and share this gradient: [url]http://colorzilla.com/gradient-editor/#050000+34,00114a+86,050102+89,990000+100[/url] */
background: rgb(5,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(5,0,0,1) 34%, rgba(0,17,74,1) 86%, rgba(5,1,2,1) 93%, rgba(5,1,2,1) 93%, rgba(153,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(5,0,0,1) 34%,rgba(0,17,74,1) 86%,rgba(5,1,2,1) 93%,rgba(5,1,2,1) 93%,rgba(153,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(5,0,0,1) 34%,rgba(0,17,74,1) 86%,rgba(5,1,2,1) 93%,rgba(5,1,2,1) 93%,rgba(153,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#050000', endColorstr='#990000',GradientType=0 ); /* IE6-9 */; border: 5px solid #7C7C7C;}

#backimage { background: #000 url('http://i.imgur.com/MW3znzk.jpg'); }
#backoverlay { background: inherit;background-size: 50% 100% }
#probelist { background: solid; }
.pname { color: #ff0; font-size: 24pt; line-height: 16pt; display: inline-block; text-shadow:2px 2px 4px #000000 ; }
#fanl { color: #ff0; }
#fanc { #fe4 ; opacity: 0.6; }
#fancontainer { background: solid; }
#navcontainer ul { padding: 0; }
#navcontainer li { width: 150px; padding-right: 15px; }
#navcontainer li a { display: inline-block; width: 125px; }
#temp0 { text-shadow: none !important; }
#temp1 { text-shadow: none !important; }
#temp2 { text-shadow: none !important; }
#temp3 { text-shadow: none !important; }
 
Having fun creating my own home screen. The one change I see that I definitely want to add to my home screen is the change with the name on the pid screen. I see many out there changed the name from "Output %" to "Blower Speed %". Can this be done in the user CSS tool? If so can someone provide the changes I will need to make this happen.
Thanks
 
I don't think there's a way to do it in CSS because the text is replaced with every update received from the HeaterMeter. That would have to be changed in the source itself.

I will also say that it isn't displaying the Blower output %, it is displaying the PID output %, which could be the blower speed as well, but only in the case where all the blower settings are default. That's just me being pedantic though.
 
Thanks Brian. I was hoping that could be done, but being able to customize the home screen using CSS and getting results that fits your personal style is a good thing.
 
Allow me to dig up an old thread...
I've been playing with my HM while I'm stuck at home. I've changed a bunch of stuff on the home page using the CSS tool.
Is there a way to change the probe colors? as well as the fan speed on the graphs?
1586448451124.png
 
Is there a way to change the probe colors? as well as the fan speed on the graphs?
Yup they are:
Code:
.pcolor0 { background: #e73; }
.pcolor1 { background: #6c3; }
.pcolor2 { background: #297; }
.pcolor3 { background: #789; }
.ooutcolor { background: #6cf; }
.ofancolor { background: #4c99bf; }
.osercolor { background: #cef; }
The first four are the probe colors and the last three are "Output", "Fan output", "Servo output". The last three were added in the last few months so if you're on an old snapshot you'll need to upgrade to get them.
 
Nice! Thank you.
I upgraded to the latest software (April 2020) on Monday. That's what started all of this.
 
Is there a full list of everything that can be modded?
Everything is fair game! The probe / output colors are special because they are the only things I explicitly copy from the CSS into all the UI elements that use them. Everything else you can just open up the devtools (F12 in chrome / firefox / etc) and use the find element tool (Ctrl+Shift+C or upper left button in Chrome) to see what the name is and just change it in User CSS.

I think the alarm, noise, and wireless icons might be fixed but everything else should be able to be colored, hidden, or have its size changed. Those could also probably be changed too with some URL overrides like the background.
 

 

Back
Top