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
Thanks for the time @Terri
There are only 4 tiles on this dashboard that have a custom icon (red arrows) that are not affected by the CSS in the theme. That theme only has 2 Styles. Active and Default. The colors and icon actions are changed by “active” or “not”. Everything works as intended so far. I’m not getting what would be required to change the size of the icons when either “active” and “not active”.
You would need to create 2 new styles, 1 for active and 1 for not active. They can look the exact same as the 2 styles you already have. You would then go into the dashboard and apply the new styles to those 4 tiles.
When you write the CSS to adjust the icon you then target only those tiles by using the style name you just created as shown above.
Tagging @josh and @James to see if maybe they can explain it better.
I believe you’re referring to targeting a named style with Custom CSS which is covered in the CSS Wiki you linked to earlier:
I would note that we do not offer official staff support for Custom CSS. Of course, we keep an eye on the community and respond where appropriate, but otherwise we defer to the community.
That being said, when seeking support with Custom CSS, I would strongly recommend sharing as much detail as possible. For example, sharing the whole set of custom CSS rather in addition to the specific snippet you’re interested in can be immensely helpful. Since you can customize almost anything with the Custom CSS, it’s possible something else in your Custom CSS is impacting your snippet. In other words, these things generally cannot be reviewed in a narrow scope, but often need the context of what the rest of the CSS is doing or any customizations you’ve made to your dashboard/theme/etc.
If you’re not familiar with Custom CSS, reading through the first couple of pages on a CSS Tutorial could be helpful as well. 
Some of the fundamental principles like the fact that CSS is cascading, there’s a concept of precedence / weight based on the specificity of the selectors, and that custom CSS applied after the base system CSS can make some of the concepts make much more sense
–
That being said, for sizing icons, I tend to prefer a much simpler syntax:
.tile .icon svg { font-size: 6em; }
The standard disclaimer applies…
Please note that any custom CSS snippets provided are not officially supported and may need to be adjusted with potential future changes to the SharpTools web app.
I’ll keep poking around with this. I previously read the threads on custom icons. Maybe I misunderstood, but I thought by creating and saving them as 16px X 16px would make them size correctly with all the other stock icons.
As for the CSS, I only have this one snippet of code. Nothing else to interfere with it. I’ll try the simpler syntax as mentioned…