The icon in the Text Variable tile isn’t inside an .icon wrapper, the .icon class is applied directly to the SVG, so the selector would be svg.icon instead of .icon svg.
Side note: This might be something that needs to get cleaned up for consistency (especially with custom icons being a top upcoming request) and it’s the type of change I’m referring to when I say that you might have to adjust Custom CSS with future SharpTools.io app updates.
That being said, since you’ve already hidden the value and this is in a Text Variable tile, you shouldn’t need to apply custom CSS for the sizing. You can just adjust the Main Content Size in the tile settings and it will do the same thing:
I would note that the icon has a small bit of spacing on the right via margin-right, so you might want to set that to 0 so the spacing is clean.
.tile.--theme-style-iluminacionon svg.icon {margin-right: 0 } /* removes right margin on text-variable icon */
As usual, any CSS snippets provided aren’t officially supported and may have to be adjusted with future SharpTools.io updates.
All that being said, it’s kind of similar to Jake’s item in that Super Tiles could probably accomplish what you’re looking for without the need for custom CSS.
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.
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 )
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
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):
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.
