Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Wiki Projects & Stories
, , , ,
868

.theme-default, a i {color: white}
.theme-slate, .theme-slate a i {color: white}
.theme-quartz .tile, .theme-quartz a i {color: #555}
.theme-onyx .tile, .theme-onyx .tile a i {color: wheat}
.theme-cobalt .tile, .theme-cobalt a i {color: white}
.theme-sballoz .tile, .theme-onyx .tile a i {color: #ffa500}

In the main CSS file there are variations of the lines as listed above. I’m playing with customizing the themes and changes to the Slate theme line above don’t seem to change anything when I change the color. When I looked at the other lines in different themes they seem to have slight differences. What element(s) are the lines supposed to change? Are there syntax errors in some/all of the lines above or are there just subtle differences in how each behaves?

869

How are you putting the clock into night mode with tasker? I can get it to launch but not into night mode.

870

I used autoinput.

871

Awesome, thank you very much for your help. That did the trick and should be dark enough at night!

872

Depending on your base theme selection (configurable in SmartApp preferences) some of the above CSS values will take effect.

873

My post above wasn’t a clear as it could have been. I cut and pasted them from different sections of the CSS file. I realize that they depend on the theme selected. Right now I’m playing with the slate theme and learning by trial and error how to change themes.

My confusion is that although it seems that the line is supposed to change an element, ( a i ?) I don’t know what element it is changing to see the changes take effect. Also, although there are 6 different lines from different themes, each one is slightly different leading me to believe there might be a syntax error preventing the changes from taking effect. (such as misspelling a color name or forgetting a punctuation mark in the correct place causing the change to be ignored or have an unpredicted result) Some have a comma after the theme name, some have .tile once or twice, some have the theme name once or twice, some have different theme names on the same line?

874

@sballoz I notice in your theme you invert the sliders when the tile is active. I’d like to use that to dim the sliders on tiles that are inactive.

What lines of your code differentiate the active vs inactive slider colors? I tried reading through but still a bit lost.

875

Hi Stroh,

Nothing really. Since my Sballoz them was introduced I have basically removed all CSS apart from the lines that invert the colors when my nests have Heating state. (which was suggested by Louis96 and yourself)
f

876

I played with this for a while tonight and think I have it figured out. I created a theme for the wife that is pretty easy on the eyes in darker light and still easy to read in regular light. Has a purple background with blue active icons and sliders and subdued inactive icons and sliders. Start with the Slate theme and then make the additional CSS changes below.

Still haven’t figured out the “.theme-slate a i {color: red;}” line. Nothing seems to change?

Here’s the code with comments identifying what the lines do:

// .theme-slate a i {color: red;}                                                                          /*??????*/
.theme-slate .ui-page-theme-a .tile.active .ui-slider-track .ui-btn-active {background-color: darkblue;}  /*active left slider bar*/
.theme-slate .ui-page-theme-a .ui-slider-track .ui-btn-active {background-color:#7777BB;}                  /*inactive left slider bar*/
.theme-slate .ui-slider-handle.ui-btn.ui-shadow {background-color: #7777BB;}                               /*inactive slider button*/
.theme-slate .tile.active .ui-slider-handle.ui-btn.ui-shadow {background-color: darkblue;}                 /*active slider button*/
.theme-slate .tile {background-color:#5555BB;}                                                             /*tile background color */
.theme-slate .ui-page-theme-a .ui-bar-inherit {background-color: black;}                                   /*right slider bar */
.theme-slate .tile.active .icon i.active {color: darkblue;}                                                /*active icon color */

And a screen capture:

1440×2560 205 KB

877

Can’t give you an easy answer (though I’m curious and should investigate…), but the selectors might give you a clue.

“a” = Defines a hyperlink
“i” = Defines a part of text in an alternate voice or mood

So these might affect hovering over a part of the tile that is surrounded by <i></i>?
Try “inspect” of the browser debugger, perhaps. Lots of layered CSS gets really hard to reverse engineer. Need to add comments throughout the entire CSS file!

EDIT: It is quite possible this is a style definition for an element that SmartTiles doesn’t use! Can’t find many (any?) classic <a href=> style hyperlinks in a typical dashboard. Maybe there aren’t any?

878

TIL that the clock tile can work as a refresh tile.

When I was playing with the browser debugger I found that the clock tile is clickable and seems to behave as a refresh button. Make more room for other tiles by removing that extra redundant tile.

TIL that the order of items in the custom CSS makes a difference.

When I was changing CSS for different elements I couldn’t figure out why they weren’t changing. After quite a bit of frustration and trial and error, I then realized that lower in the file were other changes that I hadn’t commented out and they were taking precedence. I have since reordered and better documented the CSS file to prevent this from confusing me in the future.

879

For those of you who are using the default theme and would like the slider buttons subdued when the tile is inactive here is the code. I don’t have the color perfect, but it is close. If someone finds the color that perfectly matches the light green inactive icon let me know.

/*subdue dimmer sliders (Metro (default) theme)*/
.ui-page-theme-a .tile.active .ui-slider-track .ui-btn-active {background-color: white;}   /*active left slider bar*/
.ui-page-theme-a .ui-slider-track .ui-btn-active {background-color: #70cc70;}                /*inactive left slider bar*/
.ui-slider-handle.ui-btn.ui-shadow {background-color: #70cc70;}                                       /*inactive slider button*/
.tile.active .ui-slider-handle.ui-btn.ui-shadow {background-color: white;}                           /*active slider button*/
.ui-page-theme-a .ui-bar-inherit {background-color: #70cc70;}                                           /*inactive right slider bar */
.ui-page-theme-a .tile.active .ui-bar-inherit {background-color: gray;}                                /*active right slider bar */
880

I’m trying to change the active icon color for lights, but I can’t figure out what code to use. Can someone point me in the right direction?

881

This code changes the icon and color of my garage door contact sensor tile (shows status but doesn’t control it).

/*change garage door icons*/
.tile.contact[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] .icon i.active:before {content: ""; color: darkred;}
.tile.contact[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] .icon i.inactive:before {content: "";}

I think you can modify it for your lights. Do you want all the lights to change or just particular lights?

If you want all of that type then leave out the [data-device= … ] and use:

.tile.light .icon i.active:before {color: red;} or
.tile.dimmerlight .icon i.active:before {color: #FF0000;}

If you want just a specific light’s tile to change you will have to include the [data-device= … ] portion.

Edit: Forgot to mention to pick a color you can use names or hex codes preceded by #. For a list of names take a look at HTML Color Names. That page shows 140 colors by name that are accepted by all modern browsers. The site also shows shades of the basic colors and the hex codes for all of them as well as a bunch of other ways to come up with the color you want.

Lessons learned: If you use the names make sure they are spelled exactly with no spaces added by autocorrect! If you use the hex code don’t forget the # or you will get unexpected results!

882

sorry if this has ben asked many times before, I couldn’t seem to find it via search.

How do you get smarttiles to load on Android fullscreen without the toolbars? Is it possible?

883

###Mobile Native App (Android and iOS)

To install SmartTiles as a native app, open the URL in Safari on iOS or Chrome on Android device, then add shortcut to the home screen. When the shortcut icon is tapped, the dashboard launches as a full screen native application (without tool bars).

http://www.smarttiles.click/info/#mobileapp

884

Thanks @tgauchat. I’ve been trying that but its not working. still getting the toolbars chrome tabs and address bar.

does this only work on certain versions? I’m on 4.4.2 chrome 49.0.2623.91

885

Not sure, but quite possibly.

An alternative browser might work… Perhaps someone has a recommendation.

886

I use Full Screen Browser and Smarttiles

887

I second this browser as that’s what I’m running on my Kindle Fire HD10