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.

    Calendar Doesn't Honor custom.css for Background

    Scheduled Pinned Locked Moved Bug Hunt
    16 Posts 2 Posters 3.1k 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.
    • E Offline
      ember1205
      last edited by

      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?

      S 1 Reply Last reply Reply Quote 0
      • S Away
        sdetweil @ember1205
        last edited by

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

        Not the world module

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        E 2 Replies Last reply Reply Quote 0
        • E Offline
          ember1205 @sdetweil
          last edited by

          @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;
          }
          
          1 Reply Last reply Reply Quote 0
          • E Offline
            ember1205 @sdetweil
            last edited by

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

            S 1 Reply Last reply Reply Quote 0
            • S Away
              sdetweil @ember1205
              last edited by

              @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
              

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              S E 2 Replies Last reply Reply Quote 0
              • S Away
                sdetweil @sdetweil
                last edited by

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

                .clock .date {
                   color: green;
                }
                

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • E Offline
                  ember1205 @sdetweil
                  last edited by

                  @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…

                  S 1 Reply Last reply Reply Quote 0
                  • S Away
                    sdetweil @ember1205
                    last edited by

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

                    Why does “module.currentweather” work fine

                    no idea… css is my weakest skill

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    E 1 Reply Last reply Reply Quote 0
                    • E Offline
                      ember1205 @sdetweil
                      last edited by

                      @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.

                      S 1 Reply Last reply Reply Quote 0
                      • S Away
                        sdetweil @ember1205
                        last edited by

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

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        S E 2 Replies Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • 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