Post your HM homepage customizations


 
D

Darren C.

TVWBB Pro
I thought it would be fun to see what kind of cool homepage customizations that everyone can up with. I've been thinking about starting this thread for awhile. But, I was holding off until I finished my own. But, I'm jumping the gun a little here because I wanted to go ahead and share what I have done with someone who mentioned customizations in another thread.

It's not much, but here's what I have so far.

#backoverlay { background: transparent; }
#content { background: transparent; }
#probelist { background: rgba(125,100,55,.6)}
#fancontainer { background: transparent; }
Click to expand...

My background image:

DCMBzVe.png


Oh, and here's the final result:

Md9FZId.png
 
Last edited:
Code: 
#content { background: #000; border: 1px solid #467; }
#backimage { background: #000 url(http://www.angelys-resorts.com/wp-content/uploads/2013/02/header011-1600x250.jpg); }
#backoverlay { background: inherit; }
#probelist { background: transparent; }
.pname { color: #fff; font-size: 24pt; line-height: 16pt; display: inline-block; text-shadow:2px 2px 4px #000000 ; }
#fanl { color: #fff; }
#fanc { #fe4 ; opacity: 0.6; }
#fancontainer { background: transparent; }
#navcontainer ul { padding: 0; }
#navcontainer li { width: 150px; padding-right: 15px; }
#navcontainer li a { display: inline-block; width: 125px; }

2qb61r7.png


Not BBQ related, but I like the change
 
If you don't mind, include your image so people can replicate it if they like it. I was thinking this could be kinda like a "themes" thread.
 
Last edited:
Code: 
#content { background: rgba(32,32,32,1); }
#backimage { background: url(http://i.imgur.com/3XLDUWY.png); }
#backoverlay { background: inherit; }
#probelist { background: rgba(0,0,0,0.3); }
#pn0 { color: #FFF; }
.pname { color: #FFF; font-size: 24pt; line-height: 16pt; display: inline-block; text-shadow:2px 2px 4px #000000 ; }
#fanl { color: #FFF; }
#fanc { opacity: 0.6; }
#fana { background: rgba(255,255,0,1); opacity: 1; }
#fancontainer { background: rgba(197,17,0,1); }                                                                                  
#graph { height: 500px; width: 950px; margin: 8px auto 0px auto; }
#graph_overview { height: 90px; width: 900px; margin-left: auto; margin-right: auto; }

I9sHZMd.jpg


I also like like this background:

JOKRVi2.jpg
 
Last edited:
Log into to the linkmeter webpage. There at the top is some text about the css override. Clink on that and add the css code to change the appearance.
 
RJ Riememsnider said:
Boy that makes it easy, thanks. What about the background?
Click to expand...

You could do it like the other 2 posts and just put it somewhere online. It could be anywhere you post images. And, then just reference it in the CSS like they did. That's going to slow loading down a little, but probably not noticeably. And, if the URL ever changes or the image becomes unavailable for some reason, it will quit working.

I used scp in Linux to copy my image to my heatermeter. If you use Windows, there's a WinSCP app that should work. The path to the fire.png (which is the name of the header background image) is "/www/luci-static/resources/fire.png". Just drag and drop the image with WinSCP from your computer to your HM.

Or, from a Linux or Mac, you can use scp (Secure Copy) from the terminal. Here are the exact shell commands you would type if you were using a Unix/Linux terminal shell.

username@linux-box:~/HM$ scp root@<your HM IP address>:/www/luci-static/resources/fire.png fire_backup.png
root@hm's password:
fire.png 100% 936KB 935.9KB/s 00:00
username@linux-box:~/HM$ scp your_fancy_new_fire.png root@<your HM IP address>:/www/luci-static/resources/fire.png
root@hm's password:
fire.png
Click to expand...



Edit: added exact path and more specific shell commands, also cut out the find command (since you won't need it now that I've added the exact path to the command)
 
Last edited:
I was trying to get fancy and set a gradient for the #content variable, but it doesn't seem to be taking.

Update 2. I like this much better.


Code: 
#content { background:-webkit-gradient(linear, 100% 50%, 100% 100%, from(#000000), to(#322D15)); }
#contentframe { padding: 5px; }
#backimage { background: url(http://i.imgur.com/JOKRVi2.jpg); }
#backoverlay { background: inherit; }
#probelist { background: rgba(0,0,0,0.3); }
#pn0 { color: #FFF; }
.pname { color: #FFF; font-size: 24pt; line-height: 16pt; display: inline-block; text-shadow:2px 2px 4px #000000 ; }
#fanl { color: #FFF; }
#fanc { opacity: 0.6; }
#fana { background: rgba(255,255,0,1); opacity: 1; }
#fancontainer { background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(#000000), to(#322D15)) ; opacity: .7 ; border: 0px ; height: 20px; position: relative; }
#graph { height: 500px; width: 950px; margin: 8px auto 0px auto; }
#graph_overview { height: 100px; width: 920px; margin-left: auto; margin-right: auto; }

 
Last edited:
I like that gradient. It looks nice.

BTW, the styles that reference webkit will not work in Firefox. You will need something specific to Firefox like #content { background:-moz-linear-gradient(2% 80% 90deg, #000, #777 90%) }. You may not use Firefox. I'm just pointing that out so that anyone using Firefox who may just want to copy and paste your CSS will know why they are not getting the exact results.
 
Last edited:
#content { background: #000; border: 1px solid #467; }
#backimage { background: #000 url(http://i145.photobucket.com/albums/r221/oldsailor2006/bn.jpg); }
#backoverlay { background: inherit; }
#probelist { background: transparent; }
.pname { color: #fff; font-size: 24pt; line-height: 16pt; display: inline-block; text-shadow:2px 2px 4px #000000 ; }
#fanl { color: #fff; }
#fanc { #fe4 ; opacity: 0.6; }
#fancontainer { background: transparent; }
#navcontainer ul { padding: 0; }
#navcontainer li { width: 150px; padding-right: 15px; }
#navcontainer li a { display: inline-block; width: 125px; }


uNUi6ux.jpg
 
Last edited:
I originaly posted this in the wrong thread...


"This is what I got using animated gifs... Looks promising, right?"

http://parrilla.organiccrap.com/


The css itself is one of the many customizations already published here. The only difference is that I used an animated gif instead of a png picture. You only have to change the name of the picture in the index page, using an animated gif. The browser will take care from there...
 
I like this one:
#content { background: rgba(32,32,32,1); }
#backimage { background: url(http://i.imgur.com/IMIh0Jo.png); }
#backoverlay { background: inherit; }
#probelist { background: rgba(0,0,0,0.3); }
#pn0 { color: #FFF; }
.pname { color: #FFF; font-size: 24pt; line-height: 16pt; display: inline-block; text-shadow:2px 2px 4px #000000 ; }
#fanl { color: #FFF; }
#fanc { opacity: 0.6; }
#fana { background: rgba(255,255,0,1); opacity: 1; }
#fancontainer { background: rgba(197,17,0,1); }
#graph { height: 500px; width: 950px; margin: 8px auto 0px auto; }
#graph_overview { height: 90px; width: 900px; margin-left: auto; margin-right: auto; }

4Oa4KhD.png
[/IMG]
 
Add these lines and you can see the blower speed and damper position .

#fanf { position: relative; background: red; }
#fanc { position: relative; background: green; }
#fanl { font-size: 18pt; }
#fancontainer, #fana { height: 33px; }
 
You must log in or register to reply here.

 

Back
Top