Please help a CSS newbie

SharpTools.io (web)
1

Hi, I’m new to Sharptools and on a steep learning curve, particularly with custom CSS. I’m having some success, largely down to some excellent posts on this forum, but have hit a mental brick wall on font size.

I’ve pasted some code that works around icons, I seem to be able to size, move, colour etc - I think more through luck. But whatever I try doesn’t achieve anything positive around font size etc.

I’ve created a style called weather that I’m applying this to

The code that seems to work with icons

.tile.–theme-style-menu.active .icon { color: orange ;important;}
.tile.–theme-style-menu .icon { color: green ;important;}
.tile.–theme-style-weather .icon {width: 125%; height: 125%; margin: 0; position: absolute; top: 50%; left: 80%; transform: translate(-50%, -50%);important}

The code I’ve been trying around fonts that doesn’t work

.tile.–theme-style-weather {font-size:3em; margin: 0; position: absolute; top: 50%; left: 50%; important}

Any help greatly appreciated

2

Can you clarify what you are trying to do? Which font size are you trying to increase?

Do you have a style named ‘weather’ and you have selected that ‘weather’ style for whatever tile you are trying to customize?

image

image

3

Josh

Thanks for your reply

I’m basically trying to increase the icon and text on the standard weather tile + move the position within the tile.

The icon part is working fine using the code I pasted in my original message.

The text part “it’s actually the temperature as a digit” isn’t.

I have created a style called weather and it’s selected on the dashboard with the tile I’m customising.

As I said, the tile consists of an icon and a temperature digit, I seem to have cracked icon part.

I admit to be struggling with CSS, it’s something I want to get to grips with, but things haven’t clicked yet.

J

4

Are you looking to change the size of everything in the dashed red line in the following screenshot?

image

If so, something like the following might work:

.tile.--theme-style-weather .temperature-and-icon {
   font-size: 125%;
}

Please note that any custom CSS snippets provided are not officially supported and may need to be adjusted with future app updates.

5

Josh

Kind of, I’ll give it a go and see what happens

I was also trying to move everything up and to the right, rather than it bring centred. I managed that with the icon.

J

1 Like