MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

Custom.css Codes appears to break MagicMirror



  • Re: Changing icons of the modules Current Weather and Weather Forecast

    I am beating myself up over this, i am hoping someone can Help
    If i load the custom.css with the following code it break MagicMirror after 5 - 12 hours - goes blank screen, can use the remote to relaunch, but, i am trying to fix the animated icons.
    If i load the a blank or generic custom.css Mirror will run for a 7days(or longer) with no issues.
    Can you tell me what i did in my config that is breaking my Mirror? PS. I have disabled power mgmt and have a Screensaver set to disabled to make sure that wasn’t"the blank issue reported in early setup days

    /*****************************************************
     * Magic Mirror                                      *
     * Custom CSS                                        *
     *                                                   *
     * By Michael Teeuw http://michaelteeuw.nl           *
     * MIT Licensed.                                     *
     *                                                   *
     * Add any custom CSS below.                         *
     * Changes to this files will be ignored by GIT. *
     *****************************************************/
    
    /* Aenderungen Wetter Icon */
    /* Aenderungen aktuelles Wetter */
    
    .currentweather .weathericon {
      position: absolute;
      z-index: 0;
      height: 200px;
      right: 100px;
      margin-top: -65px;
    }
    
    .currentweather .wi-day-sunny {
    content: url("/css/icons/day.svg");
    }
    
    .currentweather .wi-day-cloudy {
    content: url("/css/icons/cloudy-day-1.svg");
    }
    
    .currentweather .wi-rain {
    content: url("/css/icons/rainy-6.svg");
    }
    
    .currentweather .wi-night-clear {
    content: url("/css/icons/night.svg");
    }
    
    .currentweather .wi-night-cloudy {
    content: url("/css/icons/cloudy-night-2.svg");
    padding-right: 15px;
    padding-top: 10px;
    }
    
    .currentweather .wi-cloudy {
    content: url("/css/icons/cloudy.svg");
    }
    
    .currentweather .wi-showers {
    content: url("/css/icons/rainy-7.svg");
    }
    
    .currentweather .wi-thunderstorm {
    content: url("/css/icons/thunder.svg");
    }
    
    .currentweather .wi-snow {
    content: url("/css/icons/snowy-6.svg");
    }
    
    .currentweather .wi-cloudy-windy {
    content: url("/css/icons/cloudy-day-3.svg");
    }
    
    .currentweather .wi-night-rain {
    content: url("/css/icons/rainy-6.svg");
    }
    
    .currentweather .wi-night-snow {
    content: url("/css/icons/snowy-6.svg");
    }
    
    .currentweather .wi-night-thunderstorm {
    content: url("/css/icons/thunder.svg");
    }
    
    .currentweather .wi-night-showers {
    content: url("/css/icons/rainy-7.svg");
    }
    
    .currentweather .wi-fog {
    content: url("/css/icons/cloudy.svg");
    }
    
    .currentweather .wi-night-alt-cloudy-windy {
    content: url("/css/icons/cloudy-night-1.svg");
    }
    
    /* Aenderungen Wettervorhersage */
    
    .weatherforecast .weathericon {
      position: absolute;
      left: 35px;
      z-index: 1;
      margin-top: -30px;
      height: 60px;
    }
    
    .weatherforecast .wi-day-sunny {
      content: url("/css/icons/day.svg");
      padding-left: 35px; 
     }
    
    
    .weatherforecast .wi-day-cloudy {
      content: url("/css/icons/cloudy-day-1.svg");
      padding-left: 35px;
    }
    
    .weatherforecast .wi-rain {
      content: url("/css/icons/rainy-6.svg");
      padding-left: 35px;
    }
    
    .weatherforecast .wi-night-clear {
      content: url("/css/icons/night.svg");
      padding-left: 35px;
    }
    
    .weatherforecast .wi-night-cloudy {
      content: url("/css/icons/cloudy-night-2.svg");
      padding-left: 35px;
    }
    
    .weatherforecast .wi-cloudy {
      content: url("/css/icons/cloudy.svg");
      padding-left: 35px;
    }
    
    .weatherforecast .wi-showers {
      content: url("/css/icons/rainy-7.svg");
      padding-left: 35px;
    }
    
    .weatherforecast .wi-thunderstorm {
      content: url("/css/icons/thunder.svg");
      padding-left: 35px;
    }
    
    .weatherforecast .wi-snow {
      content: url("/css/icons/snowy-6.svg");
      padding-left: 35px;
    }
    
    .weatherforecast .wi-cloudy-windy {
      content: url("/css/icons/cloudy-day-3.svg");
      padding-left: 35px;
    }
    
    .weatherforecast .wi-night-rain {
      content: url("/css/icons/rainy-6.svg");
      padding-left: 35px;
    }
    
    .weatherforecast .wi-night-snow {
      content: url("/css/icons/snowy-6.svg");
      padding-left: 35px;
    }
    
    .weatherforecast .wi-night-thunderstorm {
      content: url("/css/icons/thunder.svg");
      padding-left: 35px;
    }
    
    .weatherforecast .wi-night-showers {
      content: url("/css/icons/rainy-7.svg");
      padding-left: 35px;
    }
    
    .weatherforecast .wi-fog {
      content: url("/css/icons/cloudy.svg");
      padding-left: 35px;
    }
    
    .weatherforecast .wi-night-alt-cloudy-windy {
      content: url("/css/icons/cloudy-night-1.svg");
      padding-left: 35px;
    }
    

    Here is how it looks before it crashes (anywhere from 4 hours to overnight)…

    alt text


  • Module Developer

    It’s the animated icons and Electron that ramps the CPU usage really high. https://forum.magicmirror.builders/topic/7227/changing-icons-of-the-modules-current-weather-and-weather-forecast/42


Log in to reply