[WIKI] Custom CSS snippets, verified on SharpTools

James · November 10, 2020, 3:50pm

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.

mark_oswell · November 10, 2020, 4:38pm

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

Bloodtick_Jones · November 14, 2020, 3:46pm

Added these to the wiki

Stan_Silverman · November 15, 2020, 12:25am

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!

Avi_Kalderon · November 15, 2020, 10:46pm

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.

Chris_C · November 18, 2020, 4:47pm

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.

mark_price · November 24, 2020, 11:46am

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

Chris_C · November 24, 2020, 4:28pm

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%

mark_price · November 24, 2020, 10:52pm

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.

Avi_Kalderon · November 24, 2020, 11:19pm

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

mark_price · November 25, 2020, 1:35am

Okay. thanks a lot. i will work with these to see what I get. I have some non-themed dashes.

Stan_Silverman · November 27, 2020, 6:05am

Does anyone know the syntax for the font size of the value on the NUMBER variable tile. It doesn’t seem to be icon.

Thanks.

Chris_C · November 27, 2020, 8:13pm

The starting size is ‘3’, so the following will double the size:

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

I added it to the top wiki post too.

Stan_Silverman · December 2, 2020, 5:13am

I’m not sure I understand the use of adjusting margins.

(More accurately - I am sure I don’t understand it!)

josh · December 3, 2020, 8:08pm

This one?

kampto:

Adjust the margins on top/bottom or left/right

Make the top/bottom and side margins symmetrical or indiviually 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; }

It’s removing the whitespace around the dashboard.

Here’s a screenshot of that snippet applied:

just_jake · January 10, 2021, 3:48pm

Does anyone know the css code for the Tiles background color. I’m wanting to have a different color and transparency other than the preset colors.

Michael · January 10, 2021, 5:11pm

.tile {background-color: RGBA(130, 0, 0, 0.5)!important;} Blue with a 50% transparency

Color value/transparency is specified as: RGBA(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

just_jake · January 10, 2021, 5:33pm

Thanks how do you determine the active vs inactive tiles? @Michael

Michael · January 10, 2021, 6:49pm

Under Custom CSS enter:

.tile.--theme-style-default{background-color: RGBA(128,128,128,1.0)!important;}
.tile.--theme-style-active{background-color: RGBA(255,0,0,0.5)!important;}

Then edit the individual tiles and check the Style option

josh · January 10, 2021, 6:51pm

Most tiles will also add an ‘active’ class to the tile if you want to target things more generically.

Eg.

.tile.active {
  background: red;
}

Please note that any custom CSS snippets provided are not officially supported and may need to be adjusted with potential future changes to the SharpTools web app.