• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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 2.8k 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 sdetweil Dec 21, 2019, 4:43 PM Dec 21, 2019, 4:41 PM

    @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 Dec 21, 2019, 4:44 PM

      @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 Dec 21, 2019, 4:46 PM Reply Quote 0
      • S Offline
        sdetweil @ember1205
        last edited by Dec 21, 2019, 4:46 PM

        @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 Dec 21, 2019, 4:50 PM

          @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 Dec 21, 2019, 5:50 PM Reply Quote 0
          • E Offline
            ember1205 @sdetweil
            last edited by Dec 21, 2019, 5:50 PM

            @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
            2 / 2
            • First post
              16/16
              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