MMM-Darksky-hourly - change icons

shounak78_mm · Sep 1, 2018, 8:05 AM

@maros Hi, what changes did you make in custom.css to be successful?

Maros · Nov 5, 2018, 2:10 PM

what i’ve done :

download icons from : https://www.amcharts.com/free-animated-svg-weather-icons/
put icons in folder MagicMirror/css/icons (if it’s not there create it)
edit custom.css in MagicMirror/css and add :

.MMM-darksky-hourly {
}

.MMM-darksky-hourly .big-icon {
  font-size: 70%;
  line-height: 65px;
  display: inline-block;
  -ms-transform: translate(0, -3px); /* IE 9 */
  -webkit-transform: translate(0, -3px); /* Safari */
  transform: translate(0, -3px);
  width: 140px;
}

.MMM-darksky-hourly .summary {
  width: 400px;
}

.MMM-darksky-hourly .forecast {
  text-align: left;
  min-width: 400px;
  margin-top: 0.05ex;
}

.MMM-darksky-hourly .forecast-row {
}

.MMM-darksky-hourly .forecast-row>span {
  display: table-cell;
  width: 60px;
}

.MMM-darksky-hourly .forecast-row .forecast-day {
  text-align: center;
  padding-right: 0.5em;
}

.MMM-darksky-hourly .forecast-row .forecast-hour {
  text-align: right;
  padding-right: 0.6em;
}

.MMM-darksky-hourly .forecast-row .weathericon {
  text-align: center;
  padding-right: 0.5em;
}

.MMM-darksky-hourly .forecast-bar {
  display: table;
  overflow: hidden;
}

.MMM-darksky-hourly .forecast-bar>span {
  display: table-cell;
  text-align: left;
}

.MMM-darksky-hourly .forecast-bar .bar {
  background-color: #aaa;
  line-height: 0.1em;
  border-radius: 0.1em;
  border: 0.5ex transparent solid;
  background-clip: padding-box;
  color: black;
}

.small.MMM-darksky-hourly .forecast {
  min-width: 200px;
  max-width: 300px;
}

.small.MMM-darksky-hourly .summary {
  width: 300px;
}
.MMM-darksky-hourly .wi-day-sunny {
content: url("/css/icons/day.svg");
}

.MMM-darksky-hourly .wi-day-cloudy {
content: url("/css/icons/cloudy-day-1.svg");
}

.MMM-darksky-hourly .wi-rain {
content: url("/css/icons/rainy-6.svg");
}

.MMM-darksky-hourly .wi-night-clear {
content: url("/css/icons/night.svg");
}

.MMM-darksky-hourly .wi-night-alt-cloudy {
content: url("/css/icons/cloudy-night-2.svg");
}

.MMM-darksky-hourly .wi-cloudy {
content: url("/css/icons/cloudy.svg");
}

.MMM-darksky-hourly .wi-hail {
content: url("/css/icons/rainy-7.svg");
}

.MMM-darksky-hourly .wi-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.MMM-darksky-hourly .wi-snow {
content: url("/css/icons/snowy-6.svg");
}

.MMM-darksky-hourly .wi-cloudy-gusts {
content: url("/css/icons/cloudy-day-3.svg");
}

.MMM-darksky-hourly .wi-fog {
content: url("/css/icons/cloudy.svg");
}

edit main.css change line 12, 14, 15 (this will change how far from borders other modules will be) (line 14 and 15 are 2x bigger than line 12)
if you change to 40px line 12 line 14 and 15 will be 100% - 80px

     12   margin: 30px;
     14   height: calc(100% - 60px);
     15   width: calc(100% - 60px);

restart mm (pm2 restart mm)

maybe this will help someone :)

StrIIker · Oct 11, 2018, 2:24 PM

This is great! I was wondering if you could help me. I would like to decrease the spacing between the rows which list the hourly forecast. I feel the spacing is a little too large. Is there something I can change within the custom CSS which you posted to achieve this? Thank you in advance!

Cr4z33 · Nov 5, 2018, 5:15 PM

@maros said in MMM-Darksky-hourly - change icons:

what i’ve done :

download icons from : https://www.amcharts.com/free-animated-svg-weather-icons/
put icons in folder MagicMirror/css/icons (if it’s not there create it)
edit custom.css in MagicMirror/css and add :

.MMM-darksky-hourly {
}

.MMM-darksky-hourly .big-icon {
  font-size: 70%;
  line-height: 65px;
  display: inline-block;
  -ms-transform: translate(0, -3px); /* IE 9 */
  -webkit-transform: translate(0, -3px); /* Safari */
  transform: translate(0, -3px);
  width: 140px;
}

.MMM-darksky-hourly .summary {
  width: 400px;
}

.MMM-darksky-hourly .forecast {
  text-align: left;
  min-width: 400px;
  margin-top: 0.05ex;
}

.MMM-darksky-hourly .forecast-row {
}

.MMM-darksky-hourly .forecast-row>span {
  display: table-cell;
  width: 60px;
}

.MMM-darksky-hourly .forecast-row .forecast-day {
  text-align: center;
  padding-right: 0.5em;
}

.MMM-darksky-hourly .forecast-row .forecast-hour {
  text-align: right;
  padding-right: 0.6em;
}

.MMM-darksky-hourly .forecast-row .weathericon {
  text-align: center;
  padding-right: 0.5em;
}

.MMM-darksky-hourly .forecast-bar {
  display: table;
  overflow: hidden;
}

.MMM-darksky-hourly .forecast-bar>span {
  display: table-cell;
  text-align: left;
}

.MMM-darksky-hourly .forecast-bar .bar {
  background-color: #aaa;
  line-height: 0.1em;
  border-radius: 0.1em;
  border: 0.5ex transparent solid;
  background-clip: padding-box;
  color: black;
}

.small.MMM-darksky-hourly .forecast {
  min-width: 200px;
  max-width: 300px;
}

.small.MMM-darksky-hourly .summary {
  width: 300px;
}
.MMM-darksky-hourly .wi-day-sunny {
content: url("/css/icons/day.svg");
}

.MMM-darksky-hourly .wi-day-cloudy {
content: url("/css/icons/cloudy-day-1.svg");
}

.MMM-darksky-hourly .wi-rain {
content: url("/css/icons/rainy-6.svg");
}

.MMM-darksky-hourly .wi-night-clear {
content: url("/css/icons/night.svg");
}

.MMM-darksky-hourly .wi-night-alt-cloudy {
content: url("/css/icons/cloudy-night-2.svg");
}

.MMM-darksky-hourly .wi-cloudy {
content: url("/css/icons/cloudy.svg");
}

.MMM-darksky-hourly .wi-hail {
content: url("/css/icons/rainy-7.svg");
}

.MMM-darksky-hourly .wi-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.MMM-darksky-hourly .wi-snow {
content: url("/css/icons/snowy-6.svg");
}

.MMM-darksky-hourly .wi-cloudy-gusts {
content: url("/css/icons/cloudy-day-3.svg");
}

.MMM-darksky-hourly .wi-fog {
content: url("/css/icons/cloudy.svg");
}

edit main.css change line 12, 14, 15 (this will change how far from borders other modules will be) (line 14 and 15 are 2x bigger than line 12)
if you change to 40px line 12 line 14 and 15 will be 100% - 80px

     12   margin: 30px;
     14   height: calc(100% - 60px);
     15   width: calc(100% - 60px);

restart mm (pm2 restart mm)

maybe this will help someone :)

I followed your instructions, but for some reason the module keeps loading the default white icons…
Also there’s no forecast for the next days (despite what you show in the screenshot).

Any thoughts? :thinking_face:

Cr4z33 · Nov 5, 2018, 2:39 PM

To the funny guy that marked my previous post as spam (preventing me from further edits): GTFO. :winking_face:

Back in topic… @Maros this is how it looks right now.

tbs86 · Nov 28, 2018, 4:06 AM

@cr4z33 did you figure this out? I’m having the same issue. I edited both css files and put the icons in the folder and my icons do not change.

Cr4z33 · Nov 28, 2018, 7:37 PM

@tbs86 I left this module in favour of another one.

tbs86 · Nov 28, 2018, 7:45 PM

@cr4z33 what icons did you end up using?

Maros · Oct 5, 2019, 2:09 PM

please post your changes maybe there is just mistype