I am having trouble getting the slider on my dimmer switch to color right. I used the css code from SmartTiles but nothing is changing. I am trying to get the inactive slider to be the dark yellow.
3 Likes
Can you show the CSS you have for the slider? That will make it easier to help.
This is on the CSS guide over on the SmartTiles page:
http://www.smarttiles.click/help/customizing-css/
/* Modes using Font Awesome */.icon.Home i::before {content: " ";} /* Although all you see is a box here, this is actually a Font Awesome icon. You can put any Font Awesome icon from the cheatsheet in here and have it displayed. It goes in between the 2 sets of double quotes. /
.icon.Away i::before {content: " ";}
.icon.Night i::before {content: " ";}
.mode.Away .fa {color: gray;} / This will change the color for your Font Awesome icons. You can change it per mode. */
.mode.Home .fa {color: white;}
.mode.Night .fa {color: #003399;}
2 Likes
How did yo do the floor layout? Seriously cool! I would love to learn how you did this.
I hope this helps @ludwig76.
If you have a theme set you will need to amend the beginning of the script for each CSS command, like I did below. It should be the same theme you are using to override the default settings. Just replace āquartzā with the them you are using.
.theme-quartz .ui-page-theme-a .tile.active .ui-slider-track .ui-btn-active {background-color: white; opacity: 1.0;} /* Left Slider bar - Active */
.theme-quartz .ui-page-theme-a .tile.active .ui-bar-inherit {background-color: #4682b4; opacity: 1.0;} /* Right Slider bar - Active */
.theme-quartz .ui-page-theme-a .ui-slider-track .ui-btn-active {background-color: green; opacity: 0.7;} /* Left Slider bar - Inactive */
.theme-quartz .ui-page-theme-a .ui-bar-inherit {background-color: #3EFF00; opacity: 0.7;} /* Right Slider bar - Inactive */
The first two lines should change the slider bar when the dimmer is active. The second line is for the right side of the bar. The next set is for when the dimmer is inactive, since the slider bar is still visible.
1 Like
can you please tell me how you got your icons to their size and overlap on to other tiles?
Whatās that undercabinet mount? Iāve been looking for something like that for an old iPad 2.
Here is how to get weather radar / forecastsā¦
3 Likes
My apologies if this is posted somewhere but Iāve been searching for a bit and canāt find anything.
Is there a way to set custom icons for specific link tiles? For other tiles you have a deviceid but for links you donāt. Basically what I want to do is add a Skydrop icon for my Skydrop link tile, a Nest icon for my Nest link tile, etc.
Do try the āInspectā option of Chrome Debug (Ctrl-Shift-I), to double check each Tileās HTML elements for any unique identifier(s) ā¦ id, class, etcā¦ Itās educational 
.
But I think it is likely we just apply the same CSS to all Links Tiles.
Thanks, yes, already been down that road.
Greatā¦ thanks for trying.
ActionTiles will launch without āCustom CSSā support initially. Sorry ā but in the long run it will be for the best. We want to support customization, but that means putting some extra thought into covering all the angles like this one example you have run into.
1 Like
Yes, I realize that and understand.
I only started playing with CSS today and I realize itās throw-away in the long term. Given we donāt know when the next version is arriving I figured it was worthwhile playing around for now.
1 Like
Maybe try the same way for dashboard ones?
I donāt have links so I havenāt tested it.
Hereās the info on the dashboard tiles:
.tile.dashboard[data-link-i='1'] .icon i{content : "ļ«"}
The second one would be data-link-i='2ā
You can use the Inspect option to see if they show up that way. I know the dashboards and video tiles do.
2 Likes
Thanks. Iāll take a look when I get a chance.
Itās working. I had to change it to:
.tile.link[data-link-i=ā1ā] .icon i{content: ā¦}
Appreciate your help.
Can you share the 3d source files for this so I can make one for a Fire HD 8? What program did you use to design it?
My effort so far. I still have about a dozen more devices to add (not installed yet).
Of course presence using my phone is not working again as Iām sitting right here at home and I just noticed it says Iām away. Opening the iOS app fixed it.
2 Likes
Can someone explain me how to wake an iPad everytime I approach it?
I used to have an android tablet that was perfect for that with motion detector and tasker. I have switched to the iPad because of home kit but I canāt manage to wake up the screen
thanks
1 Like
The iPad doesnāt not allow the same functionality as a android.
That is why I have Samsung tablets on my walls, so much more functionality.
The iPads are way too limited. You will always have to press the button to wake it up or just leave it on/awake 24/7. I didnāt want to do that due to risk of degrading the iPad and power.
1 Like
Hi, all.
I am trying to customize my garage door with 2 icons. Below is the CSS code I posted into the custom css section from the tools menu in my dashboard:
.switch[data-device='xxxxxxxxxxxx|GarageDoorOpener|xxxxxxxxxxxx'] .icon i.active:before {content: url(http://five-fifteen.com/garage_open.png);color: #006778;} /* This will change the icon color for Active (On) Switch tiles. */
.switch[data-device='xxxxxxxxxxxx|GarageDoorOpener|xxxxxxxxxxxx'] .icon i.inactive:before {content: url(http://five-fifteen.com/garage_closed.png);color: #9F792C;} /* This will change the icon color for Inactive (Off) Switch tiles. */
Am I missing anything?
Thanks!