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.

    Custom.css

    Scheduled Pinned Locked Moved Troubleshooting
    10 Posts 4 Posters 6.1k Views 3 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.
    • A Offline
      amanzimdwini
      last edited by

      I’m not getting something - and now am tired of banging my head against this:

      custom.css

      /* this is how you make EVERYTHING    .bright   red  - Makes sense and works 
       * .bright {
       *  color: #ff0000;
       * } */
      
      /* this is how you make ONLY     calendar .bright    red  - again, makes sense and works
       * .module.calendar .bright {
       * color: #ff0000;
       * } */
      
      /* but how do you make EVERYTHING in the    calendar module    red?  This does not work for me:  */
       .module.calendar {
       color: #ff0000;
       }
      

      I must be missing something…
      Thanks

      1 Reply Last reply Reply Quote 0
      • KirAsh4K Offline
        KirAsh4 Moderator
        last edited by

        Because the various styles have an explicit color (white), you can’t simply set a color on the main class. However what you can do is set it on one of the elements, like 'TD':

        .calendar td {
          color: #ff0000;
        }
        

        A Life? Cool! Where can I download one of those from?

        A 1 Reply Last reply Reply Quote 1
        • A Offline
          amanzimdwini @KirAsh4
          last edited by

          @KirAsh4
          Was actually trying to set the FONT SIZE (didn’t realize that that has its own special problems). I like the idea of take a “dummy” element like TD & will see if that works. Thanks for the hint!

          1 Reply Last reply Reply Quote 0
          • KirAsh4K Offline
            KirAsh4 Moderator
            last edited by

            It helps to look at the HTML generated when the mirror is running. You should be able to pull it up in your browser’s console facility. Then you can figure out which (repeating) element can be used.

            A Life? Cool! Where can I download one of those from?

            A 1 Reply Last reply Reply Quote 0
            • A Offline
              amanzimdwini @KirAsh4
              last edited by

              @KirAsh4
              I am having trouble with that, since I run my pi headless & inspect the output from somewhere else (mirror is in workshop).
              I am having trouble interpreting the Chrome output. But I solved the problem the way I always do: brute hack. I like the idea of TD better, though.

              1 Reply Last reply Reply Quote 0
              • KirAsh4K Offline
                KirAsh4 Moderator
                last edited by

                You don’t need a monitor on the pi to see the console. Any browser, anywhere, that can access the pi, can see the HTML output. In Chrome, hit 'F12' to open the console. At the top, make sure 'Elements' is selected. Now twiddle down the little arrows on the left, starting with the BODY tag. As you hover over the ones that just popped up, it highlights in the browser. 'region top bar' is where the calendar lives, twiddle that open. Hover over the 'region top left, center, right' and you can figure out where to go from there …

                A Life? Cool! Where can I download one of those from?

                1 Reply Last reply Reply Quote 0
                • bscaranoB Offline
                  bscarano
                  last edited by

                  Not to Hijack the thread, but is there a way to change the color on just specific calendars if I have more than one in the module?

                  MichMichM 1 Reply Last reply Reply Quote 0
                  • MichMichM Offline
                    MichMich Admin @bscarano
                    last edited by

                    @bscarano It’s not officially supported, but every module instance get’s it’s own id. If you take a look at the generated html, you’s see something like: id="module_2_calendar". This means you can use the following css:

                    #module_2_calendar td {
                      color: #ff0000;
                    }
                    

                    But please note: since this isn’t an official feature, I can’t give any support on this, nor do I promise it will keep working in the future.

                    1 Reply Last reply Reply Quote 0
                    • bscaranoB Offline
                      bscarano
                      last edited by

                      Maybe what’s I’m asking isn’t possible.

                      I have the calendar module that pulls from 2 different calendars (main and FB birthdays. Both display together. What I’d like to do is show one calendar in one color and the other in another one.

                      Is this possible to do or am I asking too much?

                      Brendon

                      1 Reply Last reply Reply Quote 0
                      • MichMichM Offline
                        MichMich Admin
                        last edited by

                        I have two calendars in one calendar module as well. I use different icons for both calendar.

                        With this in mind, you could do some fancy css like:

                        tr:has(.fa-icon1) td .bright{
                           color: red;
                        }
                        tr:has(.fa-icon2) td .bright{
                           color: green;
                        }
                        

                        I did not try it out, but It might work.

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