Change On to Open

SharpTools.io (web)
13

I don’t see an option to switch it to Edge. (in the drop down list of device types)

14

That part is more involved.

  1. Add the needed Edge driver
  2. Exclude the switch
  3. Remove any custom DTH for that switch if it exists or comment out the finger print in the DTH.
  4. Repair the device and it should pick up the Edge Driver.

Easier option is to wait until the automatic conversion from DTH to Edge occurs over the next few months.

15

Thanks for the help… I’ll wait.

16

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-

Capture1
Capture1641×576 19.8 KB

-Switch Tile-

Capture2
Capture2648×570 33.9 KB

17

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);
}

Custom CSS topic

18

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.

19

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?

Capture
Capture925×759 58.2 KB

20

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
21

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…

22

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 :smiley:)

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.

23

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?

24

Unfortunately, no. You have to target those 2 tiles using styles.

25

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…

26

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???

Capture
Capture468×571 23.9 KB

27

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
28

They are .svg images. I also ran them through an svg stripper to insure they could inherit the theme styles…

29

Can you post the CSS code?

30

@Terri has you pointed in the right direction. You would likely need to adjust the Custom CSS slightly as @Terri demonstrated.

31

.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.

32

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.