It would be nice if the standard label tile had the ‘action on tap’ ‘open hyperlink’ option.
Hoping someone can answer this CSS question.
When do you target .icon vs .icon svg?
I’ve got some tiles that respond to each but don’t understand why.
Thanks
.icon is the wrapping element (div) that holds the icon.
.icon svg points to the actual SVG icon within the icon holder. Note that if you are using a custom uploaded icon that’s in a format other than SVG, then this won’t target that icon. Something like .icon img would likely work with those custom icons.
1 Like
Hi! Is there a guide to style adjustments and a list of elements? I am having a hard time getting even started with CSS for sharptools. For example, how do I overwrite the background color? but eventually I would like to apply more advanced styles. Where to start?
Thanks for sharing the example use-case. In general, I would recommend using the core styling features of the platform rather than relying on Custom CSS whenever possible. For example, you should be able to use the native Theme + Style features to customize the background color of dashboards and tiles.
Custom CSS is more of an ‘advanced’ feature designed with a technical audience in mind. @Bloodtick_Jones put together a brief primer on how to use Custom CSS which might be helpful if you find yourself looking to use Custom CSS if a Theme/Style feature doesn’t cover your need.
Thank you! I probably did not phrase that the right way. I have not done any coding in a while but am not new to CSS. I was hoping to replicate something along the lines of this one:
The css snippets thread has some references here and there but does not seem to be a complete inventory. I was hoping to have a reference to the sharptools element IDs or class names. That would help me extend or overwrite the default styles.
(I was not even able to change the background color so far 
)
---------------------- EDIT -------------------------------------------
However, I was able to change the background color of the Rules Engine and Dashboard pages… And I am not able to revert it, even after deleting the theme 
Anyone have any luck setting a style for a specific div/dom id?
I might have figured it out. I have a specific layout on my dashboards and I wanted to make all the background colors black and just put a border around the different sections. I figured it out by doing the following CSS:
[id=“###”] { … }
Is it possible to individually style super tiles? Ideally, would be able to reference the tile by style name or ID. is that possible? I had something like this in mind (include tile name in css class names):
So I did something like this for the “Title” tiles that had tiles DIV’s underneath them and it worked out well:
[id=“tile-holder-XXXXXXX”]>div { … }
Looking at your screenshot, you could probably do:
[id=“tile-holder-MnMprh2E”]>div { … }
I would not target the tile-holder elements. Those are the ‘wrapper’ elements I was referring to in our PM that I mentioned might get removed in future updates. 
The named styles approach mentioned further up in the thread is a good way to target Custom CSS to a tile that has a specific named style applied to it.
Because I’ve had my panels built for a while, I don’t change much at all, so my tiles are pretty much the same and probably won’t ever change (except for adding a new element here-and-there).
But yes, I agree, if you happen to have tiles or devices that change, absolutely these would be affected constantly.
To be clear I mean that those wrapper DIVs were originally added because of a technical limitation based on how our dimmer pop-ups worked. We’ve since come up with a better solution, so those wrapper divs could be eliminated in a future update.
And that’s a great point that we discussed in PM as well - making sure to pick the right level of targeting is important. It’s preferred to use the more general class selectors (eg. .tile.super-tile) than to pick a narrowly targeted set of DOM elements as your selector where possible. The named styles is a decent alternative for targeting tiles that have a specific named style applied to them though.
I’ll look into the super tiles a bit more. I tried to build something with them but it definitely was something that I needed to find some training or videos on.
Sorry for the confusion. I think I am misunderstanding your response. Are you referring to my screenshot? I did that in the browser dev tools to demonstrate what I had in mind. I was wondering if something like that is already possible or if this would be a new feature.
Yes. It was discussed further up in the thread.
[WIKI] Custom CSS snippets, verified on SharpTools - #68 by Chris_C
Now I got it! Thanks! I was just a bit slow to get my head around this concept. Thank you!
Yes you absolutely can, I’ve done it on several times. What exactly are you wanting to edit?
I’m using css to add a glow effect to some tiles but the glow effect is a different shade and size than tiles with the native glow effect.
Does anyone know what the Sharptools default icon glow settings are for tiles with the native glow option? Or can someone tell me what I’m looking for using inspect on a PC? I could only find the code for tiles I added glow to.
It’s driving me crazy that they don’t look the same. 
1 Like