Forecast IO without Big Circle

I have set up a Forecast IO and it seems to be working very well. However, I don’t like the Big circle for today’s date. Does anyone know how i could possibly fix it to have 5 small Icons and not one very large with 4 small?

Ok so, you’ll need to override the template and edit some css to make it look as you want it:


  day:nth-of-type(1) .currentDay

you can get rid of the border/make it smaller


.day:nth-of-type(1) .currentDay .day-icon

you can adjust the size of the icon (to make it the same size as other days for example)


day:nth-of-type(1) .currentDay .maxTemp

you can adjust the font size of temperature
and so on.

you will probably need to adjust height in .day{ and some others depending on how you want it to look like.

Where is this file? I’m looking in Xibo Libarary and the only CSS file is weather-icons.min.css. Are there other ones I should see?

I’m installing cygwin to be able to find and grep, but dont have the functionality yet.

You can edit css in CMS, just edit your forecast item, and check the ‘override template’ checkbox, then find ‘Enter CSS style sheet to style the weather widget’ there you will find the lines I was talking about.

1 Like

Great Info… was getting to ask the same question. Thanks

As an added note - if you get a template designed that you like you can save it in:

  • 1.7 - modules/theme/forecastio/name.template.json
  • 1.8 - modules/forecastio/name.template.json

It will then appear in the “Templates” dropdown (the one that disappeared when you selected override template

1 Like