Navigation

    MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    UNSOLVED Blackscreen after changing custom.css

    Troubleshooting
    2
    3
    887
    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.
    • J
      Juju last edited by Juju

      Hi,

      I just started to customise my MagicMirror. Everything I did so far was setting it up and entering my location in the config.js. Everything was fine, the mirror worked.
      Then I found this custom.css code in this forum, so I copy pasted it and replaced mine.

      html {
        cursor: none;
        overflow: hidden;
      }
      
      ::-webkit-scrollbar {
        display: none;
      }
      
      body {
        margin: 5px;
        position: absolute;
        height: calc(100% - 10px);
        width: calc(100% - 10px);
        background: #000;
        color: #fff;
        font-family: "Roboto Condensed", sans-serif;
        font-weight: 400;
        font-size: 2em;
        line-height: 1.5em;
        -webkit-font-smoothing: antialiased;
      }
      
      /**
       * Default styles.
       */
      
      .dimmed {
        color: #666;
      }
      
      .normal {
        color: #fff;
      }
      
      .bright {
        color: #fff;
      }
      
      .xsmall {
        font-size: 10px;
        line-height: 15px;
      }
      
      .small {
        font-size: 15px;
        line-height: 20px;
      }
      
      .medium {
        font-size: 25px;
        line-height: 30px;
      }
      
      .large {
        font-size: 60px;
        line-height: 60px;
      }
      
      .xlarge {
        font-size: 70px;
        line-height: 70px;
        letter-spacing: -3px;
      }
      
      .thin {
        font-family: Roboto, sans-serif;
        font-weight: 100;
      }
      
      .light {
        font-family: "Roboto Condensed", sans-serif;
        font-weight: 300;
      }
      
      .regular {
        font-family: "Roboto Condensed", sans-serif;
        font-weight: 400;
      }
      
      .bold {
        font-family: "Roboto Condensed", sans-serif;
        font-weight: 700;
      }
      
      .align-right {
        text-align: right;
      }
      
      .align-left {
        text-align: left;
      }
      
      header {
        text-transform: uppercase;
        font-size: 15px;
        font-family: "Roboto Condensed";
        font-weight: 400;
        border-bottom: 1px solid #666;
        line-height: 10px;
        padding-bottom: 5px;
        margin-bottom: 10px;
        color: #999;
      }
      
      sup {
        font-size: 50%;
        line-height: 50%;
      }
      
      /**
       * Module styles.
       */
      
      .module {
        margin-bottom: 20px;
      }
      
      .region.bottom .module {
        margin-top: 20px;
        margin-bottom: 0;
      }
      
      /**
       * Region Definitions.
       */
      
      .region {
        position: absolute;
      }
      
      .region.fullscreen {
        position: absolute;
        top: -50px;
        left: -50px;
        right: -50px;
        bottom: -50px;
      }
      
      .region.right {
        right: 0;
      }
      
      .region.top {
        top: 0;
      }
      
      .region.top .container {
        margin-bottom: 15px;
      }
      
      .region.top .container:empty {
        margin-bottom: 0;
      }
      
      .region.top.center,
      .region.bottom.center {
        left: 50%;
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
      }
      
      .region.top.right,
      .region.top.left,
      .region.top.center {
        top: 100%;
      }
      
      .region.bottom {
        bottom: 0;
      }
      
      .region.bottom .container {
        margin-top: 15px;
      }
      
      .region.bottom .container:empty {
        margin-top: 0;
      }
      
      .region.bottom.right,
      .region.bottom.center,
      .region.bottom.left {
        bottom: 100%;
      }
      
      .region.bar {
        width: 100%;
        text-align: center;
      }
      
      .region.third,
      .region.middle.center {
        width: 100%;
        text-align: center;
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
      }
      
      .region.upper.third {
        top: 33%;
      }
      
      .region.middle.center {
        top: 50%;
      }
      
      .region.lower.third {
        top: 66%;
      }
      
      .region.left {
        text-align: left;
      }
      
      .region.right {
        text-align: right;
      }
      
      .region table {
        width: 100%;
        border-spacing: 0;
        border-collapse: separate;
      }
      
      /*
       * CALENDAR SPECIFIC
       */
      
      .fa.fa-calendar {
        color: #ff0000; /* Red */
      }
      .fa.fa-birthday-cake {
        color: #ff0000; /* Red */
      }
      .fa.fa-calendar-check-o {
        color: #ffff00; /* Yellow */
      }
      
      /*
       * WUFORECAST SPECIFIC
       */
      
      .wuforecast .max-temp {
        font-size: 15px;
        line-height: 15px;
        color: #f66;
      }
      
      .wuforecast .min-temp {
        font-size: 15px;
        line-height: 15px;
        color: #0ff;
      }
      
      .wuforecast .weather-icon {
        font-size: 15px;
        line-height: 15px;
        color: #f93;
      }
      
      .wuforecast .day {
        font-size: 15px;
        line-height: 15px;
        color: #6f6;
      }
      
      /*
       * FORECAST
       */
      
      .brightb {
      color: #55acee;
      }
      .currentweather .wi-sunrise {
      color: #ffd700;
      }
      .currentweather .wi-sunset {
      color: #ffa500;
      }
      .currentweather .wi-day-sunny {
      color: #ffff00;
      }
      .currentweather .wi-night-showers {
      color: #55acee;
      }
      .currentweather .wi-degrees {
      color: #415;
      }
      .currentweather .wi-rain {
      color: #55acee;
      }
      .currentweather .wi-showers {
      color: #55acee;
      }
      .currentweather .wi-night-showers {
      color: #55acee;
      }
      .currentweather .wi-night-alt-cloudy-windy {
      color: #aaa;
      }
      .currentweather .wi-night-cloudy {
      color: #aaa;
      }
      .currentweather .wi-cloudy {
      color: #aaa;
      }
      .currentweather .wi-day-cloudy {
      color: #aaa;
      }
      .currentweather .wi-cloudy {
      color: #aaa;
      }
      .currentweather .wi-cloudy-windy {
      color: #aaa;
      }
      .currentweather .wi-showers {
      color: #55acee;
      }
      .currentweather .wi-thunderstorm {
      color: #ff00ff;
      }
      .currentweather .wi-snow {
      color: #fff;
      }
      .currentweather .wi-fog {
      color: #999;
      }
      .currentweather .wi-night-clear {
      color: #fff;
      }
      .currentweather .wi-night-rain {
      color: #55acee;
      }
      .currentweather .wi-night-thunderstorm {
      color: #ff00ff;
      }
      .currentweather .wi-night-snow {
      color: #fff;
      }
      
      .weatherforecast .wi-sunrise {
      color: #ffd700;
      }
      .weatherforecast .wi-sunset {
      color: #ffa500;
      }
      .weatherforecast .wi-day-sunny {
      color: #ffff00;
      }
      .weatherforecast .wi-night-showers {
      color: #55acee;
      }
      .weatherforecast .wi-degrees {
      color: #415;
      }
      .weatherforecast .wi-rain {
      color: #55acee;
      }
      .weatherforecast .wi-showers {
      color: #55acee;
      }
      .weatherforecast .wi-night-showers {
      color: #55acee;
      }
      .weatherforecast .wi-night-alt-cloudy-windy {
      color: #aaa;
      }
      .weatherforecast .wi-night-cloudy {
      color: #aaa;
      }
      .weatherforecast .wi-cloudy {
      color: #aaa;
      }
      .weatherforecast .wi-day-cloudy {
      color: #aaa;
      }
      .weatherforecast .wi-cloudy {
      color: #aaa;
      }
      .weatherforecast .wi-cloudy-windy {
      color: #aaa;
      }
      .weatherforecast .wi-showers {
      color: #55acee;
      }
      .weatherforecast .wi-thunderstorm {
      color: #ff00ff;
      }
      .weatherforecast .wi-snow {
      color: #fff;
      }
      .weatherforecast .wi-fog {
      color: #999;
      }
      .weatherforecast .wi-night-clear {
      color: #fff;
      }
      .weatherforecast .wi-night-rain {
      color: #55acee;
      }
      .weatherforecast .wi-night-thunderstorm {
      color: #ff00ff;
      }
      .currentweather .wi-night-snow {
      color: #fff;
      }
      

      After starting the mirror I had a black screen. So I deleted the code in the custom.css file and wrote body {} . As I remembered this was the code it was written in before.
      But I still get a black screen, even deleting the code or deleting the file doesn’t help. Restarting didn’t help, too.

      Any idea what I can do. Does someone has the old original custom.css code? Probably it wasn’t body {}.

      N 1 Reply Last reply Reply Quote 0
      • N
        ninjabreadman @Juju last edited by

        @juju Yep, just body {}: custom.css at GitHub

        1 Reply Last reply Reply Quote 1
        • J
          Juju last edited by

          ty for the code. Sadly it didn’t help. It’s so weird, I set the whole css and config folder back to master-version and I still get a black screen. That are the only two folders I touched so far.
          I think the only way I can fix this is to reinstall everything.

          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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
          This forum is using NodeBB as its core | Contributors
          Contact | Privacy Policy