Calendar and News Feed Tiles

SharpTools.io (web) Announcements
62

Thanks for the swift update Josh, I now have the calendar working with locale.

1 Like
63

Nice dashboard! How did you change the font-type for the clock?

64

Hey @Wet.Blanket Thanks :slightly_smiling_face:

It’s quite simple, first just go to https://fonts.google.com/ and choose a font you like, remember to check on variations of the same font family, then after choosing a font you have a panel in the right with examples ( if you don’t see the panel click on the last icon in the header (*1)) on how to use them, choose the “import” option has this will give you the URL you will need in the next step (*2).

Screenshot 2023-05-25 233636
Screenshot 2023-05-25 2336362539×1639 279 KB

Take the url from the @import() statement and open that in your browser. It should be a series of @font-face declarations that tell your browser where to get the font from. You can then paste that declaration directly into your CSS. You can even trim out the declarations for cyrillic and other formats if all you need is your standard latin characters.

Now, assuming you already have a Theme for your dashboard configured in your account ( if not, just go to your dashboard, click on the 3 dots in the right bottom corner and choose “Configuration” and then you have the option to “Copy Theme”) head over to your resources → Themes and edit the theme you use, go to the “Custom CSS” section and paste this code ( Please note that this is my example ):

/* latin */
@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/bungee/v11/N0bU2SZBIuF2PU_0DXR1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.time{font-size:9vw!important; font-family: 'Bungee', cursive;}

In my case I used the “Bungee” font with a size of 9vw, remember to adjust size with your needs.

In the CSS selector ( .time{font-size:9vw!important; font-family: ‘Bungee’, cursive;} ) place the name of the font, in this case, replace the ‘Bungee’ for the font you choose.

Edit: Hope you understood and I did not make a mess trying to explain :man_shrugging: