Please help a CSS newbie

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

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

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

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.

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