What size do you want it to be in terms of multiples of base tile?
1 Like
@tgauchat
Since I have not even looked at doing anything with CSS yet, I should let somebody else do that part.
However, I’d be willing to at least attempt helping on a Hardware & Mounting-Only thread (if that’s desired).
I won’t promise to get all of them, but I’d be willing to go back through our current, primary SmartTiles threads (over time), and work on gathering all/most of the posts with hardware and/or mounting ideas (or, at least the obvious good ones; i.e. not every discussion post about it, but the original post where it was offered, AND any relevant follow-on - with all relevant posts about that specific idea gathered into the same post in the new/other thread).
I would just do a quote-copy-paste to get them all in the same place (and/or just move them if we get any sort of mini-mod or even micro-mod thing going on; i.e. a mod that’s only good for specific SmartTiles threads; if that’s possible and desired by a majority…or just by you two).
I have a few questions regarding SHM and Mode Tile’s CSS.
SHM Tile
I want to modify the SHM tile (background color, color of text, color of icon, icon, etc), what is the name of the tile I should you us in CSS to accomplish this? What lines of code I should use to change each item (background color, color of text, color of icon, icon) for each state (disarmed, armed(away), armed(stay))?
Mode Tile
I am able to modify the mode tile backrgoung color and text color using the code below. However, I would like to add an icon (and color) to each of my custom modes as well as the defaults (Home, Night & Away). I’vr tried several combination of code to see if I get the icon to appear without luck. Any help?
.mode.tile[data-mode=“Stay Night”] {background-color:#808080; color:#FF0000} (this one works to change the colors)
.icon.mode[data-mode=“Stay Night”] i::before {content: “”} (I tried this one to change the icon but doesn’t work)
1 Like
Here’s what I am using for my Modes. This will change the color of the icons and the icon for the specific modes.
/* Modes */
.icon.Home i::before {content: "";}
.icon.Away i::before {content: "";}
.icon.Night i::before {content: "";}
.mode.Away .fa {color: #9F792C;}
.mode.Home .fa {color: #006778;}
.mode.Night .fa {color: #003399;}
And here is what I am using for my SHM. This is just for the color of the icon, but it should give you enough to start with.
/* Smart Home Monitor */
.alarm .icon i.active:before {color: #006778;}
.alarm .icon i.inactive:before {color: #9F792C;}
2 Likes
Thanks Brian.
I was able to change the icon and color with your code for the modes with only one word. But as shown in my previous post, I have modes with multiple words, “Stay Night”. Because of that, I had to go with the [data-mode=“Stay Night”]. Is there a way I can modify your suggested code to be used for multiple word modes?
@tgauchat is there a cheat sheet for all the .css stuff mentioned above or is everyone just using there initiative and browser developer tools to find them — think im going to get stuck in and have a play this weekend for first time properly 
1 Like
No cheat sheet yet, though frankly a volunteer created one would be more valuable than many of the donations we get 
.
I want to publish shared custom CSS blocks on our SmartTiles.click website soon, but I don’t want to imply this is a feature we have time to provide assistance with. (i.e., It’s a “bonus” non-core feature until further notice.)
2 Likes
if i was a .css wiz id be eager to do that - im more of a design something then ticker until i learn how to do the same in .css and then look back and forget how ive done it kind of guy lol
1 Like
Does that also work for custom modes that are 1 word?
I thought I recalled it not working for my mode Test when I went to set up an icon for it.
No, it doesn’t work with my 1 word custom mode. 
These are the codes/combinations I tried:
.icon.Stay i::before {content: “”}
.icon.tile[data-mode=“Stay”] i::before {content: “”}
.icon.mode[data-mode=“Stay”] i::before {content: “”}
.mode.icon.tile[data-mode=“Stay”] i::before {content: “”}
.mode.tile[data-mode=“Stay”].icon i::before {content: “”}
.icon.mode.tile[data-mode=“Stay”] i::before {content: “”}
.mode.tile[data-mode=“Stay”] {background-color:#808080; color:#FF0000; content:“”}
With the last one, I am able to change the background and icon color on the custom mode. So I believe I am close, but I can’t seem to get the icon to appear.
As usual, not sure I can offer a lot of help at this time, but found a clue that maybe you can latch onto.
The handling of Icons inside Mode Tile is different than for text… there is a different class selector.
See the highlighted area below for the <div class= ...>text or icon character</div> that might help you discover the applicable CSS selector:
Trying to see if I can change the battery icon in the lower left corner of a battery tile depending on the data-value. Currently I use this to change the color of the text value depending on the amount of battery is left:
.battery[data-value=‘100%’] .icon {color: #32CD32}
And I use this to increase the image size as well as change the orientation of the icon:
.batt svg {width: 25px;height: 25px;transform: rotate(0deg);}
I would also like to change the .battery svg to a content url, is it possible?
This will do the trick @pmjoen.
.battery[data-value=‘100%’] .batt path {fill: #32CD32!important;}
Another trick I figured out was coloring the icon on the Smart Home Monitor tile based on status.
/* Smart Home Monitor */
.alarm[data-status=“away”] .icon i.active:before {color: #FF0000;}
.alarm[data-status=“stay”] .icon i.active:before {color: blue;}
.alarm[data-status=“off”] .icon i.inactive:before {color: #32CD32;}
You can also add “content:” to each status to give it a unique color and icon.
{content: “”; color: blue;}
2 Likes
I actually found a solution messing around with it:
.battery[data-value=‘100%’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url()}
This lets me put a custom footer icon to replace the current battery icon based on the percentage.
6 Likes
Love you dashboard!
Can you share the custom code for the tiles?
The weather tile updates background color based on the weather type.
SHM changes color based on armed or disarmed.
The lighter grey tiles can be selected and change background color when active.
The dark grey can’t be selected but do change color upon active.
All the icons except the lightbulb and SHM are custom icons i created and host for my use. What are you looking to use.
Doors/Garage Door, lights and the nice looking motion icon.
Do you have somewhere to host them? I can provide the image files.
I can use my Google drive. PM me
