New user: CSS Help for Dashboards-Tile

[blitzmaster]

Hi everbody.
I am a new user from Germany.
I would like to enlarge the icon from the dashboard tile.

This code does not work:
.tile .dashboards .icon svg { width: 45%; height: 45%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); }
.tile .dashboard .icon svg { width: 45%; height: 45%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); }

This code works, but it is not purposeful:
.tile:not(.super-tile) .icon svg { width: 50%; height: 50%; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

How can I enlarge the icon from the dashboard tile directly?

Udo

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

[blitzmaster]

Yes, I have read all this.

With this, I increase or reduce all icons. But I just want to change the icon of Dashboard Tiles. Is that possible?

.tile.dashboards .icon svg {…} does not work.

.tile .icon svg {…} works for all icons

[josh]

@blitzmaster

.tile.dashboards .icon svg {…} does not work.

That looks right. Are you using the native dashboard tiles?

And are you using other CSS snippets as those could be conflicting/overriding your dashboard tile CSS snippet?

[blitzmaster]

I found my mistake.

.tile.dashboard …, not tile.dashboards …

I looked at the item name (dashboards).

Sorry.