Thanks for the help… I’ll wait.
So, the Super tile looks pretty close to the switch tile. I’m guessing that there is no way to make the icon “glow” or “pulse” when the device is “ON” like the switch tile…(?)
-Super Tile-
-Switch Tile-
You can set glow using a theme and CSS
.tile.--theme-style-dash-active .icon {
-webkit-filter: drop-shadow(0 0 2px #ffc30B) drop-shadow(0 0 2px #ffc30B);
filter: drop-shadow(0 0 2px #ffc30B) drop-shadow(0 0 2px #ffc30B);
}
Yes, the style features exist on the Super Tile too, so you can use animations on icons. Once it’s added to a dashboard, you can edit the style mappings. The difference is you have to add in the mappings yourself since a Super Tile can have multiple data sources.
I figured out a way to make a “thing” tile that ordinarily would be “ON” or “OFF” to be “OPEN” or “CLOSED” without any driver modifications or other surgery (LOL)…
Is there a way to move the icon down on the tile or can I relocate it?
You can use CSS to move the icon. Here a link with a lot of CSS code.
[WIKI] Custom CSS snippets, verified on SharpTools
The one you want is labeled Change Icon Size for Tiles
1 Like
Where does the CSS go? I looked at a previous thread earlier today and I don’t seem to have the CSS at the bottom of the screen like in the example.
EDIT: Never mind… Turn on Advanced…
When you open your theme there is an advance button on the top right. Click that and it will open a text space at the bottom.
Make sure the tile you want to move the icon on has a specific style created or you will end up adjusting all of your icons. (I may have learned this the hard way 
)
You can then isolate that style by using
.tile.--theme-style-*your style name* followed by the rest of the CSS code
Let me know if you need more help.
So… I only want to do this on 2 tiles. Is there a better way as opposed to putting this on the Theme? Maybe on just the 2 tiles somehow?
Unfortunately, no. You have to target those 2 tiles using styles.
Is there a way to copy a theme just like making a copy of a dashboard? That way I have something to work with and if it doesn’t work out, I can go back to the working one…
So… Does this CSS only work on stock icons? It seems the stock icons can be enlarged/moved with this CSS, BUT, it appears the icons I drew and uploaded to my files are not changed. Thoughts???
Yes. Create a dashboard, open the settings and select configuration. Scroll down to theme and select copy theme. Make sure the theme is applied and hit save. You can then go back into the theme and edit. Also, if you open the configuration and hold control and select edit theme it will open in a new tab and you can adjust the theme without closing and see if the changes worked in the dashboard tab.
What file type are your images? If the are svg files, using .icon svg should work. If they are png or jpeg files you can try .icon img
2 Likes
They are .svg images. I also ran them through an svg stripper to insure they could inherit the theme styles…
Can you post the CSS code?
@Terri has you pointed in the right direction. You would likely need to adjust the Custom CSS slightly as @Terri demonstrated.
.tile .icon svg {width: 35%; height: 35%; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
Changing 35% to 60% to see if it works enlarges ALL the stock icons on the page, but none of the .svg icons I drew and uploaded to “files” on that same page.
You may also need to adjust the transform: translate(-50%, -50%). I had to do this for a custom icon. I started by making it match the specified height and width and adjusted from there.
If the icon disappears from the tile you can play with the top and left percentages as well.
Are you talking for the theme, or just the tiles that have a custom icon? I don’t see a way to adjust CSS on an individual tile… 
The theme is applied to the entire dashboard. Within each theme you can create different styles to use on various tiles.
For example, I have a dashboard with door, windows, & locks.
This dashboard has a theme called doors•windows•locks.
In this theme I created styles for door-open, door-closed, window-open, window-closed, lock-locked, lock-unlocked. This is how each tile has its own color.
I then target the icons I want by using CSS with the style name
.tile.--theme-style-lock-locked .icon svg