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.
    • N Offline
      Nneuland @sdetweil
      last edited by

      @sdetweil
      That’s great. Can’t thank you enough.

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

        @sdetweil I wonder if I can ask for some help? I have MMM-ip module that I’d like the change the font size. Following your instructions with dev tools I can see:
        mmm-ip font.png

        So I have put in my custom.css:

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

        But it doesn’t seem to take effect. Any advice?
        Thanks in advance.
        Matt

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