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.

    Help with a couple CSS issues

    Scheduled Pinned Locked Moved Custom CSS
    22 Posts 4 Posters 25.8k Views 7 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 @matt216
      last edited by sdetweil

      @matt216 while in the dev window,

      u can see the custom.css value is strike thru, cause the div wins

      Screenshot_20211005-101600_Chrome.jpg

      so u need to apply the style to the div

      add it to the element box above.

      if that works, you can mark/copy that top right box, and paste to custom.css, should have the right targeting syntax

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      M 1 Reply Last reply Reply Quote 0
      • M Offline
        matt216 @sdetweil
        last edited by

        @sdetweil Thanks for the help.
        How do I reference the div in custom.css not the class?
        Adjusting the value in the element box above successfully adjusts the font, but this looks to adjust the ‘dimmed’ class.

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

          @matt216 and when u copy/paste that from the top box to custom.css, what do u get?

          just swipe mark the element entry, copy

          here is my favorite cheet sheet on css selectors

          https://www.w3schools.com/cssref/css_selectors.asp

          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

            I’m guessing

            .MMM-ip  .dimmed div {
                 font-size:16px;
            }
            

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            M 1 Reply Last reply Reply Quote 0
            • M Offline
              matt216 @sdetweil
              last edited by

              @sdetweil Thank you, this works:

              .MMM-ip  .dimmed div {
                   font-size:16px;
              }
              
              S 1 Reply Last reply Reply Quote 0
              • S Offline
                sdetweil @matt216
                last edited by

                @matt216 what did the copy/paste result look like?

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • A Anthony referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S sdetweil referenced this topic on
                • S Offline
                  Shawangunk
                  last edited by

                  I’m a raspi & linux newbie (used C years ago. some Arduino experience) and this is my first post so…
                  In attempting to modify MM I’ve experienced a number of custom.css failures. I found this @sdetweil post https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1623901330356 and believe the “developer Tools” will be a big help, but I quickly got lost. The Tool’s built in help doc (kebab>Help>Documentation) appears to be a null link. I tried to find documentation for this tool online without luck. Can anyone provide a documentation link or more detailed tutorial?

                  S 2 Replies Last reply Reply Quote 0
                  • S Shawangunk referenced this topic on
                  • S Offline
                    sdetweil @Shawangunk
                    last edited by

                    @Shawangunk this would be all in the/a browser, nothing w mm.

                    I have never seen any doc

                    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 @Shawangunk
                      last edited by sdetweil

                      @Shawangunk see this
                      https://developer.chrome.com/docs/devtools/

                      but this will not teach u the DOM, css, html (and attributes)

                      only provides tool to examine and change Dom element styles

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

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

                        @sdetweil
                        All help at the bottom of the curve is appreciated. Thank you. Cheers

                        1 Reply Last reply Reply Quote 0
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • K kasperinline referenced this topic on
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • R ruff.hi referenced this topic on
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • S sdetweil referenced this topic on
                        • M movingfish referenced this topic on
                        • C com1cedric referenced this topic on
                        • 1
                        • 2
                        • 3
                        • 2 / 3
                        • 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