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