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 853 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

        Hello! It looks like you're interested in this conversation, but you don't have an account yet.

        Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

        With your input, this post could be even better 💗

        Register Login
        • 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