• 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 Dec 21, 2019, 4:39 PM

    @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 Dec 21, 2019, 4:41 PM Reply Quote 0
    • 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
                13/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