New user: CSS Help for Dashboards-Tile

[josh]

Hi @blitzmaster - welcome to the community!

You might find the Community Maintained CSS Wiki helpful when looking for CSS snippets:

512×512 40.6 KB

This is a community maintained wiki of Custom CSS code snippets that have been tested as working on Sharptools. CSS snippet lines can be added to the bottom of your Theme. Feel free to edit this wiki post or reply in the thread with your examples. Adjust the title text line spacing and allow title wrapping Default is 150% and 100% = no space .tile .title { line-height: 100%; } Allows title wrapping including the Hero attribute .tile .title { white-space: normal; } Adjust the title text font…

Note that we don’t officially support adjusting the size of icons as the tiles are all designed with specific element sizes in mind. That being said, if you want to use Custom CSS to modify the icon size, I find it simpler to target the font-size of the icon rather than manipulating the size and positioning of the elements:

@Chris_C

I usually just target the font size of the icon. It looks like the icons are usually 4em by default, so I just adjust from there.

Half size: (2 / 4)

.tile .icon svg { font-size: 2em; } 

25% bigger (5 / 4):

.tile .icon svg { font-size: 5em; } 

Also note that custom uploaded icons are a slightly different element to target as noted here:

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