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

Calendar Doesn't Honor custom.css for Background



  • I attempted to add the following to my custom.css:

    .module.calendar {
      background-color:rgba(32,32,32,0.6);
      border-radius:8px;
      padding:8px;
    }
    

    It did not work as expected, nor as it did for clock, currentweather, or weatherforecast. I had to insert that code into the ~/MagicMirror/modules/default/calendar/calendar.css module as:

    .calendar {
      background-color:rgba(32,32,32,0.6);
      border-radius:8px;
      padding:8px;
    }
    

    This is the only way it would provide the opaque background that I wanted.

    Thoughts?



  • @ember1205 right. Css for a module is the module name with a leading dot.

    Not the world module



  • @sdetweil

    In custom.css, this does not work:

    .module.calendar {
      background-color:rgba(32,32,32,0.6);
      border-radius:8px;
      padding:8px;
    }
    

    Also, in custom.css, this DOES work:

    .module.currentweather {
      background-color:rgba(32,32,32,0.6);
      border-radius:8px;
      padding:8px;
    }
    
    .module.weatherforecast {
      background-color:rgba(32,32,32,0.6);
      border-radius:8px;
      padding:8px;
    }
    
    .module.clock {
      background-color:rgba(32,32,32,0.6);
      border-radius:8px;
      padding:8px;
    }
    


  • @sdetweil What does “not the world module” mean? Just seeing that now, and not following…



  • @ember1205 like this custom.css

    body {
    }
    .currentweather {
      background-color:rgba(32,32,32,0.6);
      border-radius:8px;
      padding:8px;
    }
    
    .weatherforecast {
      background-color:rgba(32,32,32,0.6);
      border-radius:8px;
      padding:8px;
    }
    
    .clock {
      background-color:rgba(32,32,32,0.6);
      border-radius:8px;
      padding:8px;
    }
    

    you don’t do

    .module.clock
    


  • @ember1205 and to change the color of the DATE of the digital clock (which uses the date class)

    .clock .date {
       color: green;
    }
    


  • @sdetweil

    Ok. I will look into making those changes and see if I can get it working the way that I want.

    Why does “module.currentweather” work fine, though (along with the others that I mentioned)? CSS has always been a weak spot for me…



  • @ember1205 said in Calendar Doesn’t Honor custom.css for Background:

    Why does “module.currentweather” work fine

    no idea… css is my weakest skill



  • @sdetweil

    Calendar still does not pick up any CSS controls from the main custom.css file. Here is a snippet of what I added:

    .calendar {
      background-color:rgba(32,32,32,0.6);
      border-radius:8px;
      padding:8px;
    }
    

    I modified the other sections to look like this:

    .module.clock {
      background-color:rgba(32,32,32,0.6);
      border-radius:8px;
      padding:8px;
    }
    
    .module.currentweather {
      background-color:rgba(32,32,32,0.6);
      border-radius:8px;
      padding:8px;
    }
    
    .module.weatherforecast {
      background-color:rgba(32,32,32,0.6);
      border-radius:8px;
      padding:8px;
    }
    

    They work fine “either way”. Calendar refuses to pick up the formatting from the custom.css file it seems and I have to put the controls into the calendar.css file in the module’s directory.



  • @ember1205 hm… custom.css should override everything… it is loaded last


Log in to reply