• 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 23.2k 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.
  • 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 Away
      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 Away
          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 Away
            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 Away
                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 Away
                    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
                    • S Away
                      sdetweil @Shawangunk
                      last edited by sdetweil Mar 7, 2023, 2:50 AM Mar 7, 2023, 2:45 AM

                      @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
                      • 1
                      • 2
                      • 3
                      • 2 / 3
                      2 / 3
                      • First post
                        16/22
                        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