[WIKI] Custom CSS snippets, verified on SharpTools

SharpTools.io (web)
1

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 size

‘!important’ used to over ride other tile size settings.
.tile .title { font-size: 2.5em !important; }

:information_source: Note that the title text font size can also be adjusted directly in a Theme Style using the Header Font Size setting

Adjust the footer text line spacing

Default is 150% and 100% = no space

.tile .tile-footer { line-height: 100%; }

Center align the footer

Needs both lines. Doesn’t cover all tiles, but works pretty well.

.tile .tile-footer { text-align: center; }
.tile .tile-footer .status span.right { float: inherit!important; }

Prepend Text to Footer Status

You can use the :before pseudoselector along with the content property to prepend text to the footer of your tiles.

.tile.switch .tile-footer .status > span:before { content: "Switch is " }
.tile.lock .tile-footer .status > span:before { content: "Lock is "; }

Adjust the Weather Tile footer size

Needs !important to override

.tile.weather .tile-footer { font-size: 1.2em!important; }

Remove green “Command Sent” pop-up

.toast.green{ display: none; }

You can also change the color of this popup:

.toast.green{
  background-color: pink!important; 
}

Title Text Shadow

Remove the shadow on Media Tiles (and other potential tiles)

.tile .title { text-shadow: none; }

Adjust clock / calendar / news-feed tile fonts

.tile.clock .time { font-size: 1.8em; } .date { font-size: 2em; }
.tile.calendar.agenda .main-content { font-size: 1.75em; }
.tile.news-feed .main-content { font-size: 1.75em; }

Adjust the margins / whitespace around the dashboard

Make the top/bottom and side margins around the dashboard symmetrical, remove them altogether, or individually adjust using em or other

.grid.dashboard { margin-top:0; margin-bottom:0; }
.force-full-width, body div#app div.container.full-width { padding-left:0; padding-right:0; }

Change Icon Size for Tiles

Change the default icon size for tiles. The example below reduces the icon size to 80% of the normal size.

.tile .icon {font-size: 80%;}

Change Icon Color

.tile .icon { color: red; }
.tile.active .icon { color: blue }

Change Numeric Variable Content Size

The default size is ‘3’, so a value of ‘6’ should double the size:

.tile.variable.variable-number .main-content > span { font-size: 6em;  }

Custom Background Color for All Tiles (optionally with transparency)

You can use any hex color:

.tile {
  background-color: #01579B!important;
}

Or you can use rgba() which is the Red, Green, Blue, and Alpha (transparency). Alpha is between 0.0 and 1.0:

.tile {
   background-color: rgba(130, 0, 0, 0.5)!important;
}

Custom Background Color for All Active Tiles

Similar to above, but you can target just the ‘active’ tiles:

.tile.active {
   background-color: #B388FF!important;
}

Targeting a Tile with a Named Style

When using themes that use a named style (for example: ‘warning’ is custom), you can target tiles that are using that named style with .--theme-style-{stylename}

.tile.--theme-style-default { background-color: #2f3f6f!important; }
.tile.--theme-style-active { background-color: rgba(130, 0, 0, 0.5)!important; }
.tile.--theme-style-warning { background-color: red!important; }
9 Likes
2

Some examples here…

1 Like
3

This is a great idea. A list of snipets and a description of what they do would be a nice resource.

4

@kampto if you’d like me to, I can make the first post of this thread a Wiki so anyone can edit it?

5

Yes, that would be great. I tried to put some space inbetween the description and the snippet but cant seem to do it.

6

The best way to do it is to either wrap the CSS part in triple backticks ``` or to highlight the block of CSS text and tap the </> button in the forum’s editor toolbar:

So the following text that is entered (screenshotted):

image

Would become:

.tile .title { line-height: 100%; }
7

OK. I turned the first post into a wiki and updated the formatting a bit. Feel free to adjust as you see fit though! :smiley:

8

Added footer line spacing

1 Like
9

Added margin adjust to top/bottom or left/right

1 Like
10

Hi all, this CSS editing is a lovely touch. Fine tuning my dashboards and they’re looking better than ever.

Can someone possible assist me with adjusting the calendar main body font size? The font for my actual calendar events is very very small. The tile itself it fairly large and header is a good size font

Thanks for help.

11

Try these, and you may adjust the font-size that fits you the best.

.tile.calendar.agenda .main-content { font-size: 1.75em; }
.tile.news-feed .main-content { font-size: 1.75em; }

Please note these CSS snippets provided are not officially supported and you may have to adjust them if there are DOM changes with future releases

-EDIT-
Updated the css slightly to apply the font size change to the whole agenda content, as well as including the font-size change for news-feed tile.

1 Like
12

Thanks for sharing. It now looks much better and I’ve noted the caveats for future development.

:slight_smile:

13

Added these to the wiki

1 Like
14

Would like to know a way to remove padding on icons using CSS.

Need to make them as large as possible, and don’t need padding since using transparent tile.

Thanks!

1 Like
15

CSS for adjusting icon size (which I find the default size a bit too imposing). If you consider 50% being the default size for the CSS below then I use 35% as a bit smaller icon which I find much more aesthetic. Adjust percentages to your taste…

.tile .icon svg {width: 35%; height: 35%; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

I also added to the wiki. CSS can likely be shortened but I kinda like it in full form to play around with any of the related attributes.

2 Likes
16

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; }

I was trying to figure out why you had all the other stuff with positioning in your example since the icons are already centered, but I guess once you make the icons so big that they go out of their bounding box, the extra centering can help force them back to center.

4 Likes
17

Does anyone know syntax for header or title font upsizing? since the scalable updates I cannot read or update the tile title sizes. I did fix the calendar content size with the CSS per guidance above.

thanks, Mark

18

You can adjust it in the theme. It’s listed as “Header Font Size” toward the bottom of the customizations. You can choose the ‘Custom’ size and then input whatever percentage you want like 200%

image
image896×863 27.6 KB

2 Likes
19

Thank you for that; seems to work with a little trial and error. I had tried the largest non custom size and didn’t see any movement. I am assuming the theme solution is the only way to modify dashboard tile font size (for icon hero types) if scalable method is used? thanks again.

20

.tile .title { font-size: <specify size in points or em units>; }
-and-
.tile .title-footer { font-size: <specify size in points or em units>; }

should to the trick
Note: if you don’t see any changes, you may need to add !important clause before the semicolon to force these styles to override other definitions
Example:
.tile .title { font-size: 2.5em !important; }