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
Default is 150% and 100% = no space
.tile .title { line-height: 100%; }
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; }
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. 50% being the base, teh example below reduces the size by 15% to 35% total
.tile .icon svg {width: 35%; height: 35%; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
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;
}