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.6k 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.
    • S Offline
      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
      • S Offline
        sdetweil @sdetweil
        last edited by

        @ember1205

        hm…

        .calendar .title {
            color: blue;
        } 
        

        works for me
        from the readme

        | `titleClass`          | Add a class to the title's cell.
        | `timeClass`           | Add a class to the time's cell.
        

        one not documented is the ‘symbolClass’

        Sam

        How to add modules

        learning how to use browser developers window for css changes

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

          @ember1205 part of the other problem is calendar doesn’t have a cohesive background element… it has table rows of elements…

          but there is a tableClass setting, which you can use in config.js to force a particular class
          but you HAVE to do this, else no special class is applied

          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

            I found and fixed it (sort of). I had added content to my custom.css file to create a blurred background image as I was experimenting with some display options. I commented that content out (or so I thought) and placed all of these controls “after” that section in the custom.css file.

            Through a variety of changes that I was making to try and track this down, I noticed through viewing the Developer options with a real browser and looking at the elements that whatever section came first after my blurred background section wasn’t being picked up. As I rolled the changes down to the bottom, I was seeing different sections stop working.

            Seems to be all fixed now, and is clearly not a bug in the product but was a bug in my custom.css content. After deleting the content, all is displaying properly.

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

              @ember1205 so, this custom.css works

               body {
               	
               }
              
              
              .clock .date {
              	color: green;
              }
              .calendar .title { 
              color : blue;
              }
              
              .calendar .fribble {
                background-color:rgba(32,32,32,0.6);
                border-radius:8px;
                padding:8px;
              }
              

              with

               module: "calendar",
              config: { 
                 tableClass:"fribble"
              }
              

              Sam

              How to add modules

              learning how to use browser developers window for css changes

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

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

                the Developer options with a real browser

                electron is a real browser, so you can do this ON the mirror,
                or from your desktop if the config parms allow remote system access.

                I always forget that I can use local browser to view developer window

                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 said in Calendar Doesn't Honor custom.css for Background:

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

                  the Developer options with a real browser

                  electron is a real browser, so you can do this ON the mirror,
                  or from your desktop if the config parms allow remote system access.

                  I always forget that I can use local browser to view developer window

                  Now that you mention it, I have used the developer options directly on the appliance and should have remembered that. Thanks for the reminder!

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