CSS Help for Weather Tile

[Bruce_Lo]

Hi @josh ,

As I’m still a novice in CSS, I was wondering if you could give me some help in CSS for my weather tile.

I would like to move the City to the left-hand top corner, as well as increase the font size for all the other elements.

Currently, I have this in my custom CSS but I don’t think I’m doing it correctly.

TIA

[josh]

You would need to target the appropriate elements on the tile. Here’s an example…

/* align the title / header to the left */
.tile.weather .title { text-align: left; }

/* adjust the font-size of the title, footer, and feels-like fields */
.tile.weather .title,
.tile.weather .tile-footer, 
.tile.weather .feels-like {
   font-size: 1.5em!important;
}

As a reminder, any CSS snippets provided are not official guidance and may need to be adjusted with future updates to the SharpTools web app.

[Bruce_Lo]

Thank you very much for your help, Josh!

[simon]

This reminded me that I wanted to do that with my weather tile but for some reason it did not work. I have a lot of CSS that I have added over time so perhaps something else is preventing this from working - but so far I have been unable to figure it out? Thanks.

/* Stop scrolling of windows */
::-webkit-scrollbar {
    display: none; }
/* Stop pop-up commands on command received */
.toast.green { display: none }

.hide-scrollbar
 {
/*FireFox*/
scrollbar-width
: none;
}

/* Set default for all tiles */
.tile .title { top:70%; font-size: 2vh }
.tile:not(.super-tile) .icon svg { width: 45%; height: 45%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); }
.tile .tile-footer { text-align: center; bottom: unset; top:85%; font-size: 2vh}
.tile .tile-footer .status span.right { float: inherit !important; }

/* Set default for all active tiles */
/* .tile.active .icon { width: 100%; height: 100%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); } */

/* Set default for all switch tiles */
.tile.hero-attribute [data-attribute="switch"] svg {width: 45%; height: 45%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); }

/* News Feed */
.tile.news-feed .title { top:0%; font-size: 4em; }
.tile.news-feed .main-content { font-size: 3em; }

/* Calendar */
.tile.calendar.agenda .main-content { font-size: 3em; }

/* Clock */
.tile.clock .tile-footer  { text-align: center; bottom: unset; top: 75%; font-size: 2vh; }
.tile.clock .time { font-size: 4em;}

/* Thermostat Tile */
.tile.thermostat .temperature { font-size: 7em; }
.tile.thermostat .current-temperature { font-size: 1em; text-align: center; }
.tile.thermostat .actions { font-size: 2em; position: absolute; left: 5%; top: 50%; }
.tile.thermostat .status { font-size: 2em; position: absolute; right: 5%; top: 80%; }
.tile.thermostat .temperature svg { width: 25%; height: 25%; }
.tile.thermostat .tile-footer { font-size: 2em; absolute; top: 82%; }
.tile.thermostat .title { font-size: 4em; absolute; top: 5%; }
/* .tile.thermostat .span.temperature { position: absolute; top: 0%; } */

/* System Weather Tile */
.tile.weather .title { text-align: left; }

/* Weather Tile */
.tile.--theme-style-weather .title { text-align: left; top:0%; font-size: 6em; !important; }
.tile.--theme-style-weather .tile-footer { text-align: center; bottom: unset; top:95%; font-size: 3.0em !important; }
/* .tile.--theme-style-weather .icon svg {width: 50%; height: 50%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); } */
.tile.--theme-style-weather .temperature-and-icon svg { font-size: 10em; }
/* .tile.--theme-style-weather .temperature-and-icon svg { height: 40%; width: 40%; position: absolute; top: 45%; left: 35%; transform: translate(-50%, -50%); } */
.tile.--theme-style-weather .content-holder {width: 100%; }
.tile.--theme-style-weather .temperature-and-icon svg { width: 40%; position: absolute; top: 45%; left: 35%; transform: translate(-50%, -50%); }
.tile.--theme-style-weather .temperature-holder {position: relative; left:30%; font-size: 1.60em; }

/* Weather Temp Tile */
.tile.--theme-style-weather-temp .title { top:0%; font-size: 3em }
.tile.--theme-style-weather-temp .value { position: absolute; top:10%; right: +35%; font-size: 1.5em }
.tile.--theme-style-weather-temp .main-content .uom { position: absolute; top:20%; left: +65%; font-size: 1em }
.tile.--theme-style-weather-temp .tile-footer .uom { position: absolute; top:0%; left: +60%; font-size: 1em }
.tile.--theme-style-weather-temp .tile-footer { position: absolute; top:80%; content: "Low:"; font-size: 3em }
/* .tile.--theme-style-weather-temp .uom { position: absolute; top:20%; left: +65%; font-size: 1em } */
/* .tile.--theme-style-weather-temp .right:before { content: "Low:"; } */
/* .tile.--theme-style-weather-temp .status { position: absolute; left:50%; top:20%; font-size: 3em } */

/* Weather Warning Tile */
/* .tile.--theme-style-weather-warning .icon svg { width: 200%; height: 200% !important; } DIDN'T WORK */
.tile.--theme-style-weather-warning .title { top:70%; font-size: 3em }
.tile.--theme-style-weather-warning .status { font-size: 1em }

/* Variable Tile - Don't display value */
.tile.--theme-style-variable-hide-value.active .value {display: none; }
.tile.--theme-style-variable-hide-value.inactive .value {display: none; }

/* Hide-Footer-Active and Hide-Footer-Inactive */
.tile.--theme-style-hide-footer-active .title { top:70%; font-size: 3em }
.tile.--theme-style-hide-footer-active .value { position: absolute; top: -10%; font-weight: bold; font-size: 2.5em }
.tile.--theme-style-hide-footer-active .icon svg {width: 50%; height: 50%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); }
.tile.--theme-style-hide-footer-inactive .title { top:70%; font-size: 3em }
.tile.--theme-style-hide-footer-inactive .value { position: absolute; top: -10%; font-weight: bold; font-size: 2.5em }
.tile.--theme-style-hide-footer-inactive .icon svg {width: 50%; height: 50%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); }

/* Hide Footer Small Text*/
.tile.--theme-style-hide-footer-active-small-text .title { top:70%; font-size: 2em; white-space: normal }
.tile.--theme-style-hide-footer-active-small-text .tile-footer { font-size: 0em }
.tile.--theme-style-hide-footer-active-small-text .value { position: absolute; top: -10%; font-weight: bold; font-size: 2.5em }
.tile.--theme-style-hide-footer-active-small-text .icon svg {width: 50%; height: 50%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); }

.tile.--theme-style-hide-footer-inactive-small-text .title { top:70%; font-size: 2em; white-space: normal }
.tile.--theme-style-hide-footer-inactive-small-text .tile-footer { font-size: 0em }
.tile.--theme-style-hide-footer-inactive-small-text .value { position: absolute; top: -10%; font-weight: bold; font-size: 2.5em }
.tile.--theme-style-hide-footer-inactive-small-text .icon svg {width: 50%; height: 50%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); }

/* Hide Footer Half Height Tile - Active & Inactive */
.tile.--theme-style-hide-footer-active-half-height-tile .title { top:55%; font-size: 2em }
.tile.--theme-style-hide-footer-active-half-height-tile .icon svg {width: 45%; height: 45%; margin: 0; position: absolute; top: 25%; left: 50%; }

.tile.--theme-style-hide-footer-inactive-half-height-tile .title { top:55%; font-size: 2em }
.tile.--theme-style-hide-footer-inactive-half-height-tile .icon svg {width: 45%; height: 45%; margin: 0; position: absolute; top: 25%; left: 50%; }
/* Leftovers:  transform: translate(-50%, -50%); transform: translate(-50%, -50%); */

/* Solar Tile */
.tile.--theme-style-solar-tile-active .title { top:10%; font-size: 3em }
.tile.--theme-style-solar-tile-active .value { font-size: 1.5em; text-align: center  }
.tile.--theme-style-solar-tile-active .main-content .uom { position: absolute; top:60%; right: +15%; font-size: 1em; text-align: center  }
.tile.--theme-style-solar-tile-inactive .title { top:10%; font-size: 3em }
.tile.--theme-style-solar-tile-inactive .value {  font-size: 1.5em; text-align: center   }
.tile.--theme-style-solar-tile-inactive .main-content .uom { position: absolute; top:60%; right: +15%; font-size: 1em; text-align: center  }
/* .tile.--theme-style-solar-tile .icon svg {width: 100%; height: 500% !important; } DIDN'T WORK */

/* Christmas Tile */
.tile.--theme-style-christmas-tile-active .title { top:10%; font-size: 2.2vh; }
.tile.--theme-style-christmas-tile-active .value { font-size: 3.0em; text-align: center;  }
.tile.--theme-style-christmas-tile-active .main-content .uom { position: absolute; top:60%; right: +15%; font-size: 1em; text-align: center  }
.tile.--theme-style-christmas-tile-inactive .title { top:10%; font-size: 2.2vh; }
.tile.--theme-style-christmas-tile-inactive .value {  font-size: 3.0em; text-align: center   }
.tile.--theme-style-christmas-tile-inactive .main-content .uom { position: absolute; top:60%; right: +15%; font-size: 1em; text-align: center  }

/* Christmas Music Tiles */
.tile.--theme-style-modal-christmas-music-tile-green .title { top:75%; font-size: 2vh; }
.tile.--theme-style-modal-christmas-music-tile-red .title { top:75%; font-size: 2vh; }
.tile.--theme-style-modal-christmas-music-tile-red .status {  font-size: 0em  }
.tile.--theme-style-modal-christmas-music-tile-green .status {  font-size: 0em  }
.tile.--theme-style-modal-christmas-music-tile-red .icon img {width: 100%; height: 150%; !important;}
.tile.--theme-style-modal-christmas-music-tile-green .icon img {width: 100%; height: 150%; !important;} 

/* Modal Tiles */
.tile.--theme-style-modal-default .title { top:60%; font-size: 6vh !important; }
.tile.--theme-style-modal-active .title { top:60%; font-size: 6vh !important; }
.tile.--theme-style-modal-default .status { font-size: 5vh; }
.tile.--theme-style-modal-active .status { font-size: 5vh; }
.tile.--theme-style-modal-default .tile-footer { top:80%;  }
.tile.--theme-style-modal-active .tile-footer { top:80%;  }

.force-full-width, body #app {background-image: linear-gradient(to bottom right, #666666, #000000); margin: 0px;}

/* Hide the 'value' for Hero Attribute Tiles that use 'switch' as the primary attribute - e.g. Weather Alerts tile*/
.tile.hero-attribute [data-attribute="switch"] .value { display: none }
/* Fix the margin of the icon so it's centered */
.tile.hero-attribute [data-attribute="switch"] svg { margin: initial!important }

/** Menu Buttons **/
tile.--theme-style-menuitem {box-shadow: 2px 2px 2px #8585e0 !important; background-color: #29293d !important; background-position: right bottom; background-repeat: no-repeat; }
.tile.--theme-style-menuitem .icon svg {width: 70%; height: 70%; position: relative; top: 30%; left: +20%; opacity: 1.0 !important; color: #FFFFFF !important;}
.tile.--theme-style-menuitem .title {font-size: 5em !important; color: #999999 !important; opacity: 1.0 !important; position: absolute; top: 10%; left: 0%; padding-left: 25px; padding-right: 25px; width: 100% !important; text-align: right !important;}

.tile.--theme-style-menuitemselect {padding-bottom: 10px; box-shadow:2px 2px 2px #ebebfa !important; background-color: #666699 !important; background-position: right bottom; background-repeat: no-repeat; }
.tile.--theme-style-menuitemselect .icon svg {width: 70%; height: 70%; position: relative; top: 30%; left: +20%; color: #FFFFFF !important;}
.tile.--theme-style-menuitemselect .title {font-size: 5em !important; color: #999999 !important; opacity: 1.0 !important; position: absolute; top: 10%; left: 0%; padding-left: 25px; padding-right: 25px; width: 100% !important; text-align: right !important;}

/** Music Tile **/
.tile.--theme-style-music-2x4 .icon img {width: 90%; height: 100%; !important;}

[josh]

There’s a lot going on there. Can you clarify what you’re trying to accomplish and what isn’t working?

[simon]

@simon

/* System Weather Tile */
.tile.weather .title { text-align: left; }

Sorry, should have been more specific. Based on the conversation above I was reminded that I cannot seem to move the city name on the weather tile from the center. See screen shot. Also I have extracted the relevant lines below on the weather tile. I am reformatting a number of things to make them more readable, etc. But for some reason I can increase the font in the title and move it up to the top of the tile but not to the left or right. I have tried moving other commands out to see if something is getting in the way but nothing I seem to do let’s me move it into the top left corner, which is where I would like it to be. Thanks.

/* Weather Tile */
.tile.weather .title { text-align: left; top:0%; font-size: 6em; !important; }
.tile.weather .tile-footer { text-align: left; bottom: unset; top:95%; font-size: 3.0em !important; }
.tile.weather .temperature-and-icon svg { font-size: 10em; }
.tile.weather .content-holder {width: 100%; }
.tile.weather .temperature-and-icon svg { width: 40%; position: absolute; top: 50%; left: 30%; transform: translate(-50%, -50%); }
.tile.weather .temperature-holder {position: relative; left:30%; font-size: 1.60em; }{position: relative; left:30%; font-size: 1.60em; }

[josh]

Once you start getting into that level and amount of customization with CSS, it becomes difficult to just look at the CSS and understand all the potential implications. It’s really important to have a solid understanding of the fundamentals of CSS and how to troubleshoot using the tools in your browser.

There’s a variety of great resources available. Here’s a few you might find interesting:

CSS Tutorials

1. MDN Web Docs - CSS Basics: This is a comprehensive guide that starts from the very basics. It’s well-structured and offers interactive examples.
   • MDN CSS Basics
      
2. W3Schools - CSS Tutorial: This is a great resource for quick learning. It provides examples that users can try out in their browser.
   • W3Schools CSS Tutorial
      
3. CSS-Tricks - A Complete Guide to CSS: This is more of an in-depth guide that covers almost every aspect of CSS. It’s great for users who want to dive deep.
   • CSS-Tricks Guide
      
4. freeCodeCamp - Responsive Web Design Certification: This is a free course that not only teaches CSS but also how to make a web page responsive. It includes hands-on projects.
   • freeCodeCamp Course
      
5. YouTube - Net Ninja CSS Tutorial for Beginners: This is a video series that covers CSS in a very engaging manner. It’s great for visual learners.
   • Net Ninja YouTube Series

CSS and Browser DevTools

1. Google Developers - Get Started with Viewing and Changing CSS: This is a beginner-friendly guide that walks you through the basics of inspecting and modifying CSS using Chrome DevTools.
   • Get Started with Viewing and Changing CSS
      
2. MDN Web Docs - Examine and Edit CSS: This guide from Mozilla provides a detailed look at how to examine and edit CSS using Firefox DevTools.
   • Examine and Edit CSS on MDN
      
3. YouTube - Traversy Media: Chrome Dev Tools Crash Course: This video tutorial covers various aspects of Chrome DevTools, including a section dedicated to CSS.
   • Traversy Media Chrome Dev Tools
      
4. CSS-Tricks - A Guide to New and Experimental CSS DevTools in Firefox: This article is for those who want to explore some of the newer and experimental features in Firefox DevTools.
   • CSS-Tricks Firefox DevTools
      
5. Frontend Masters - Mastering Chrome Developer Tools v2: This is a more in-depth course that covers DevTools extensively, including how to debug CSS.
   • Mastering Chrome Developer Tools v2
      
6. Scotch.io - Debugging CSS with Chrome DevTools: This tutorial goes into the specifics of debugging CSS issues using Chrome DevTools.
   • Debugging CSS with Chrome DevTools

If you already have a good understanding of CSS fundamentals, reviewing Google’s DevTools Introduction is probably a good next step for better understanding how to troubleshoot CSS rules.

–

From a quick look, I’m not seeing anything that really sticks out to me. A few minor things, but nothing I would have thought would ‘break’ things.

• .tile .title will shift the top position and font size of the Title
• .tile.weather .title will align the Title of the Weather tile left
• If the weather named style is applied:
  • .tile.--theme-style-weather .title moves the title back to the top left and adjusts the font size
  • Note that the !important is applied incorrectly here. It needs to be within the ; of the property you are trying to apply it to as it is applied per-property.

[simon]

To close this out - I switched to this tile and it is working very well:

Weather Tile - Open Weather - Current and Forecast

Display the current weather and upcoming 6 day forecast using the Open Weather custom tile! [chrome_C7Fz1NQG1t] This uses weather data from Open Weather Map, so you’ll need to register for a free API Key to try things out. Check out the instructions below for more details. This was built as a proof of concept, but should be relatively feature complete. Feel free to learn from it, copy the code and adjust it as you see fit, or even share your own custom tile! [image] Ins…