Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

I also have an old iPad I as my main interface.

As someone familiar with both, would you mind describing your experience and level of satisfaction with that $40 Fire tablet? It’s really hard for me to imagine that using it isn’t just a, well, $40 experience.

Well I de-Amazoned it. It is a hair faster than the old iPad and I can used things like tasker. I am amazed how well it runs for $40. The first one I got was for $20. Got a free $20 to bestbuy for using Android Pay and I was amazed. I liked it enough so I got another.

Gotcha. I’m not a huge fan of having to do a bunch of hacking before I can use a device, so I think I’ll pass.

Unless someone can describe a positive Fire experience using the built in web browser.

I dont think I did any hacking. I plugged the kindle into my computer and ran a script. Its available on Mac, Windows and Linux.

[ONE-CLICK-SCRIPT][ALL OSes!]Playstore, No ADs, Root, Launcher, BusyBox and more! http://forum.xda-developers.com/amazon-fire/general/root-playstore-busybox-optimize-flash-t3281804

But I understand it is not for everyone. And it also depends on your ecosystem and preferences. I mostly use Google products so the iPad was not always happy and did not always work.

2 Likes

Sorry if this has been discussed before… I couldn’t find anything in a search.

I got sick of accidentally closing my dashboard tab on my office desktop computer, but I did a quick web search and found an OS X app called “Fluid” http://fluidapp.com

It will take a web link (like your dashboard link) and turn it into a separate application. So now I can switch to my Smarttiles dashboard like it’s a real application. Very neat!

3 Likes

Searched around and I’ve not been able to find what I want. I’m looking to color code the battery values on my theme to represent the % of battery remaining. Would someone be willing to write up a list that I might copy in the css window? I’d love to have the text of the battery tile show bright (neon?) green for 100%-65%, green from 64%-40%, yellow for 39%-20%, red for 19%-8%, and dark red from 7%-0%.

Could someone who knows what the hell they’re doing help me? I’ve got not good idea how to do this…despite reading the css tricks. I’m not very good at this stuff, evidently!

1 Like

Since you found this CSS I wonder if you could direct me to changing the sliders on mine. Currently, as you have demonstrated, the slider remains bright regardless of active/inactive status. Is there CSS that will dim it when inactive like the icon above it?

1 Like

I’m so sad…

I accidentally wiped out all my CSS changes. I was trying to get the presence to work and accidentally deleted my dashboard. Now all my custom CSS is gone!

Oh no…

There’s a very slight chance it’s in a browser cache. Try marking your browser “offline” and see if the dashboard still comes up… ?

Otherwise; well… Good lesson for everyone to copy / paste their Custom CSS to a text file somewhere for safekeeping.

Searching on here I found some of the CSS when i posted answers for others with examples. I can’t for the life of me remember how to get the icon from font awesome into the “” in my code. I can’t seem to cut and paste any of the images. Did this change?

Figured this one out. You need to cut and paste from this site Cheatsheet not the regular fontawesome.io site. Still not straightforward because pasting doesn’t actually show the icon, it still looks like “” as if there is nothing in between, but it works. Now, what else did I change…

Fontawesome is great, although it’s not very tailored to the needs of home automation. I’ve seen several people with dashboards using different icons that represent what they control more accurately. Could someone “in the know” post a quick description on how to use icons that fontawesome doesn’t host?

I read recently that someone created custom icons and hosted them out on github, while doable, i’m looking for something more built-in if possible. I have far too many IT easter eggs floating around that I forget about and this would just add to the pile :slight_smile:

2 Likes

I keep mine in Google Docs. Accessible everywhere.

1 Like

I don’t know that what you’re asking for is possible.

My thoughts on it are that the slider bar for maintaining the dimmer level acts independently of the light itself since it does retain the information on the last dimmer setting as long as the bulb doesn’t lose power. In other words, the dimmer level is still active, although the light itself is technically off.

Bummer… Since I don’t use the slider when the light is off I wonder if I could change the color to be the same as the background making it hidden. Then change it back to unhide it. But how to determine which and make the switch.

Or, make it light gray all the time then it is less obtrusive but still available?

hmmm, I haven’t nailed down the CSS to change the color. I tried some variations of your code to move it but no luck.

All these failed to change the color:

.ui-slider.ui-mini {color:#990000}
.ui-slider.ui-mini .icon {color:#990000}
.ui-slider.ui-mini .icon i.active:before {color:#990000}

Any suggestions?

.ui-page-theme-a .ui-slider-track .ui-btn-active {background-color:white;}
.ui-slider-handle.ui-btn.ui-shadow {background-color:white;}

The bottom one is for the little ball on the dimmer.
The top one is what changes the color of the Active part of the slider.

For the non-active side, it’s in

.ui-page-theme-a .ui-bar-inherit {background-color:grey;}

All of that can be pulled from the Slider section on the CSS page here:

1 Like

Does anyone know the dimensions of the video tile? I want to use that space to insert a logo instead of stop motion video tile. Need the dimensions so that I can format the logo the correct way.

Thanks! Worked awesome!!!

Here is what I’m using…

/subdue dimmer sliders/
.ui-page-theme-a .ui-slider-track .ui-btn-active {background-color:#20e167;}
.ui-slider-handle.ui-btn.ui-shadow {background-color:#20e167;}
.ui-page-theme-a .ui-bar-inherit {background-color:#009a82;}

Here is how it looks…

2 Likes

I don’t have any cameras so I can’t say for sure, but from scrolling up and looking at others’ posts, they appear to be 2 tiles wide by 1 tile high.
If that’s the case, on a dashboard with Medium tile size (I imagine this will matter per tile size selection), a 2x1 is 243.625px by 119.813 px with the standard interior buffer (appears to be 4 px)

1 Like