MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Custom.css Codes appears to break MagicMirror

    Scheduled Pinned Locked Moved Utilities
    2 Posts 2 Posters 765 Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C Offline
      ComputerChip
      last edited by yawns

      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

      1 Reply Last reply Reply Quote 0
      • V Offline
        vinp Module Developer
        last edited by

        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

        1 Reply Last reply Reply Quote 0
        • 1 / 1
        • First post
          Last post
        Enjoying MagicMirror? Please consider a donation!
        MagicMirror created by Michael Teeuw.
        Forum managed by Sam, technical setup by Karsten.
        This forum is using NodeBB as its core | Contributors
        Contact | Privacy Policy