[WIKI] Custom CSS snippets, verified on SharpTools

[just_jake]

@josh

A user on Facebook was asking how they could have a Konnected Siren (switch) only show the Label (title) as the main content and no icon, so I wanted to share the snippet here for reference:

.tile.switch .icon { 
  display: none;  /* hide the icon */
}
.tile.switch .title { 
  font-size: 2em; /* 2x font size */
  height: 100%; /* fill the full tile height for centering */
  top: 0; /* align to the top of the tile; remove top padding from title */
  display: flex; /* enable vertical centering */
  align-items: center; /* horizontally align */
  justify-content: center; /* vertically align */
}
/* The style below targets everything in the title 
    to make it have a ellipsis if the text overflows  */
.tile.switch .title * { 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@josh would this work for hiding the icon for a hyperlink tile? Obviously it wouldn’t be .tile.switch

I ask because I’m wanting to make a hyperlink tile look like a label tile.

[josh]

Yeah, you should be able to change .tile.switch to .tile.hyperlink.

As usual, any CSS snippets provided aren’t officially supported and may have to be adjusted with future SharpTools.io updates.

With the introduction of Super Tiles, that would probably be the ‘officially’ sanctioned way to get a tile with a custom label layout and a hyperlink action.

[josh]

@Carlos_Juarez

But:
.tile.–theme-style-iluminacionon .icon svg {font-size: 3em } does NOT work at all.

Does anybody knows why variable tile icon could has the scroll effect ?

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.

[John_Williamson]

@just_jake

would this work for hiding the icon for a hyperlink tile?

@just_jake

I ask because I’m wanting to make a hyperlink tile look like a label tile.

It would be nice if the standard label tile had the ‘action on tap’ ‘open hyperlink’ option.

[Terri]

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

[josh]

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

[Bernhard_Boennemann]

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?

[josh]

@Bernhard_Boennemann

For example, how do I overwrite the background color?

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.

Introduction to Themes and Styles - SharpTools Knowledge Base

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.

[Bernhard_Boennemann]

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:

Community Theme Sharing

This beautiful design by @Tim spurred some discussion about Community Theme Sharing, so I wanted to create a topic dedicated to it (and so we don’t derail his other thread).

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

[Dean_Berman]

Anyone have any luck setting a style for a specific div/dom id?

[Dean_Berman]

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=“###”] { … }

[Dean_Berman]

[Bernhard_Boennemann]

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

[Dean_Berman]

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 { … }

[josh]

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.

@Bernhard_Boennemann

Is it possible to individually style super tiles?

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.

[Dean_Berman]

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.

[josh]

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.

[Dean_Berman]

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.

[Bernhard_Boennemann]

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.

[josh]

Yes. It was discussed further up in the thread.

[WIKI] Custom CSS snippets, verified on SharpTools - #68 by Chris_C