Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 25

Thread: Post your HM homepage customizations

  1. #11
    TVWBB Super Fan
    Join Date
    Aug 2010
    Posts
    479
    Quote Originally Posted by Lesley M View Post
    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.
    Boy that makes it easy, thanks. What about the background?

  2. #12
    TVWBB Pro
    Join Date
    Jul 2013
    Location
    Brandon, MS
    Posts
    603
    Quote Originally Posted by RJ Riememsnider View Post
    Boy that makes it easy, thanks. What about the background?
    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-...urces/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-...urces/fire.png
    root@hm's password:
    fire.png


    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 by Darren C.; 07-26-2014 at 09:04 AM.
    Light a man a fire, keep him warm for a day. Light a man afire, keep him warm the rest of his life.

  3. #13
    TVWBB Guru Steve_M's Avatar
    Join Date
    Jul 2013
    Location
    Toronto
    Posts
    2,021
    This is a pretty handy site for coming up with CSS options http://www.css3maker.com/

  4. #14
    TVWBB Pro
    Join Date
    Jul 2013
    Location
    Brandon, MS
    Posts
    603
    Quote Originally Posted by Steve_M View Post
    This is a pretty handy site for coming up with CSS options http://www.css3maker.com/
    That is pretty cool.
    Light a man a fire, keep him warm for a day. Light a man afire, keep him warm the rest of his life.

  5. #15
    TVWBB Guru Steve_M's Avatar
    Join Date
    Jul 2013
    Location
    Toronto
    Posts
    2,021
    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 by Steve_M; 07-25-2014 at 08:26 PM.

  6. #16
    TVWBB Pro
    Join Date
    Jul 2013
    Location
    Brandon, MS
    Posts
    603
    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 by Darren C.; 07-26-2014 at 09:33 AM.
    Light a man a fire, keep him warm for a day. Light a man afire, keep him warm the rest of his life.

  7. #17
    TVWBB Super Fan Dave Smith's Avatar
    Join Date
    Jul 2011
    Location
    Kingsville, Ontario, Canada
    Posts
    375
    #content { background: #000; border: 1px solid #467; }
    #backimage { background: #000 url(http://i145.photobucket.com/albums/r...r2006/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; }


    Last edited by Dave Smith; 08-14-2014 at 02:30 AM.

    WSM 22.5; 22.5 OTS; MINI

  8. #18
    New Member
    Join Date
    Jul 2014
    Location
    Winnipeg, Canada
    Posts
    25
    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...

  9. #19
    TVWBB Super Fan Dave Smith's Avatar
    Join Date
    Jul 2011
    Location
    Kingsville, Ontario, Canada
    Posts
    375
    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; }

    [IMG][/IMG]

    WSM 22.5; 22.5 OTS; MINI

  10. #20
    TVWBB Fan
    Join Date
    Jan 2013
    Location
    Fullerton, California
    Posts
    223
    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; }
    WSM 22" Big STEEL Keg, 4-Heatermeters, with Rotodampers

Page 2 of 3 FirstFirst 123 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •