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.

    CalendarExt3 inline-block and colors

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    7 Posts 2 Posters 530 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 @sankum
      last edited by sdetweil

      @sankum for the today box

      defined from MMM-CalendarExt3.css

      .CX3 .cell.today {
        border: 1px solid #fff;
      }
      

      and in the dev window elements tab

      Screenshot at 2025-05-10 12-14-08.png

      Sam

      How to add modules

      learning how to use browser developers window for css changes

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

        Hi Sam,
        Thanks. I was able to figure out the element and change the background color. I a first time user of the developer tool and so a little confused.

        The background color was not declared in custom.css, is that why they are crossed out in the web developed element? See the image at the end.
        Also is there a default setting in web developer which I can resort to, after I have changed things around and clicked on several things not knowing what I am doing!!?? Thanks.
        2dd40e5b-ac5f-48c4-8d71-9f59120576c6-image.png

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

          @sankum strikethru means that style is overridden by some other declaration and typically that is shown higher up (closer to the top) in the right hand column

          css has the concept of specificity

          a more specific style will override a more general one

          so if you had a text color on a dic and a text color on a span inside the div, the text color of the span would be chosen as its more specific

          sometimes you have to force it by adding !important after the style

          the condition needing this would be a lower style overriding an upper one

          if a style is unchecked, then it is not applied at all. like commented out

          Sam

          How to add modules

          learning how to use browser developers window for css changes

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

            Thanks for the explanation. Although it is a little bit over my head. I think I get the general idea. Will work through it. Thanks.

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

              @sankum just for discussion on a couple points from your image above
              1746897279242-screenshot-at-2025-05-10-12-14-08-resized.png

              in the css stack pane on the right, you see

              .CX3 .weekend
              

              has a couple styles, specified in MMM-CalendarExt3.css, line 385

              and one of those styles has a strikethru, color

              an item higher up in the stack list, also shows a DIFFERENT class

              .CX3 .weekend_1
              

              that ALSO specifies the same style, from the same file but line 394 (further down is processed later, so it overrides stuff set ABOVE this line…(cascading)

              so you can see the style(and where its set) , see it is overridden(and from where)

              and the element selected (left side of element view) shows BOTH classes applied

              NOW , this second style setting/weekend_1 demonstrates a problem, as you MODIFIED the module shipped file of css settings… and next time the module wants to update, it will FAIL as you changed one of ITS files…

              MM is designed to avoid this problem, you place ALL ‘custom’ (local to you) css in the file

              MagicMirror/css/custom.css
              

              we load this file LAST, so it overrides ANYTHING set before it was loaded…
              base, module, or anything higher in custom.css too…

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              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