• 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.

Help with a couple CSS issues

Scheduled Pinned Locked Moved Custom CSS
22 Posts 4 Posters 18.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 Apr 1, 2021, 11:38 PM

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

    1 Reply Last reply Reply Quote 0
    • M Offline
      matt216
      last edited by Oct 5, 2021, 3:10 PM

      @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 Oct 5, 2021, 3:18 PM Reply Quote 0
      • S Offline
        sdetweil @matt216
        last edited by sdetweil Oct 5, 2021, 3:30 PM Oct 5, 2021, 3:18 PM

        @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 Oct 5, 2021, 3:33 PM Reply Quote 0
        • M Offline
          matt216 @sdetweil
          last edited by Oct 5, 2021, 3:33 PM

          @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 Oct 5, 2021, 3:45 PM Reply Quote 0
          • S Offline
            sdetweil @matt216
            last edited by sdetweil Oct 5, 2021, 3:46 PM Oct 5, 2021, 3:45 PM

            @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 Oct 5, 2021, 3:50 PM Reply Quote 0
            • S Offline
              sdetweil @sdetweil
              last edited by Oct 5, 2021, 3:50 PM

              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 Oct 5, 2021, 3:54 PM Reply Quote 0
              • M Offline
                matt216 @sdetweil
                last edited by Oct 5, 2021, 3:54 PM

                @sdetweil Thank you, this works:

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

                  @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 Mar 20, 2022, 8:14 PM
                  • S sdetweil referenced this topic on Apr 2, 2022, 8:07 PM
                  • S sdetweil referenced this topic on Apr 8, 2022, 2:26 PM
                  • S sdetweil referenced this topic on Apr 9, 2022, 3:54 PM
                  • S sdetweil referenced this topic on Apr 9, 2022, 6:06 PM
                  • S sdetweil referenced this topic on Apr 17, 2022, 11:29 PM
                  • S sdetweil referenced this topic on Apr 22, 2022, 1:35 PM
                  • S sdetweil referenced this topic on Apr 24, 2022, 1:00 AM
                  • S sdetweil referenced this topic on May 16, 2022, 5:42 PM
                  • S sdetweil referenced this topic on Jul 19, 2022, 6:47 PM
                  • S sdetweil referenced this topic on Jul 19, 2022, 6:47 PM
                  • A Anthony referenced this topic on Aug 4, 2022, 7:42 AM
                  • S sdetweil referenced this topic on Aug 23, 2022, 2:57 AM
                  • S sdetweil referenced this topic on Sep 6, 2022, 6:13 PM
                  • S sdetweil referenced this topic on Sep 12, 2022, 5:30 PM
                  • S sdetweil referenced this topic on Sep 19, 2022, 10:14 PM
                  • S sdetweil referenced this topic on Sep 19, 2022, 10:15 PM
                  • S sdetweil referenced this topic on Oct 3, 2022, 2:00 AM
                  • S sdetweil referenced this topic on Oct 6, 2022, 2:03 PM
                  • S sdetweil referenced this topic on Oct 9, 2022, 1:42 AM
                  • S sdetweil referenced this topic on Oct 10, 2022, 1:26 PM
                  • S sdetweil referenced this topic on Oct 23, 2022, 6:53 PM
                  • S sdetweil referenced this topic on Oct 27, 2022, 2:49 PM
                  • S sdetweil referenced this topic on Oct 31, 2022, 1:24 PM
                  • S sdetweil referenced this topic on Nov 16, 2022, 9:56 PM
                  • S sdetweil referenced this topic on Nov 16, 2022, 10:15 PM
                  • S sdetweil referenced this topic on Jan 8, 2023, 9:45 PM
                  • S sdetweil referenced this topic on Feb 11, 2023, 3:14 PM
                  • S sdetweil referenced this topic on Feb 23, 2023, 4:01 AM
                  • S Offline
                    Shawangunk
                    last edited by Mar 7, 2023, 12:02 AM

                    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 Mar 7, 2023, 1:18 AM Reply Quote 0
                    • S Shawangunk referenced this topic on Mar 7, 2023, 1:17 AM
                    • S Offline
                      sdetweil @Shawangunk
                      last edited by Mar 7, 2023, 1:18 AM

                      @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