Help adjusting a weather tile

SharpTools.io (web)
1

I am changing the layout of the weather tile to display just the temp. So picking Hero Attribute. Then picking primary attribute as ForecastHigh and secondary attribute as ForecastLow.

Then I am assigning a custom tile called temp-tile (below). It seems like the two ℉’s are tied together. If I change the position of the .uom which corresponds to the ℉ it moves the both the one in the middle of the tile and the one in the bottom.

I have tried inspecting the elements and I cannot seem to figure out how to address them separately - perhaps not possible? Thanks.

.tile.--theme-style-temp-tile .title { top:10%; font-size: 3em }
.tile.--theme-style-temp-tile .value { position: absolute; top:10%; right: +35%; font-size: 1.5em }
.tile.--theme-style-temp-tile .uom { position: absolute; top:20%; left: +65%; font-size: 1em }
.tile.--theme-style-temp-tile .tile-footer { position: absolute; top:80%; font-size: 3em }

Screen Shot 2021-10-31 at 10.25.44 AM

2

You can target them a bit more narrow if needed:

  • Unit of measure shown in the main content:
    .tile .main-content .uom { font-size: 1em; }
  • Unit of measure shown in the tile footer:
    .tile .tile-footer .uom { font-size: 1em}

Since CSS is based on the hierarchy of elements, you can target the parent elements to narrow things down. In this case, we narrow to .uom that’s inside either the .main-content or the .tile-footer within the .tile.

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.

1 Like
3

Beautiful, this worked great. thanks.

2 Likes