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

MMM-network-signal - make the message text larger

Scheduled Pinned Locked Moved Custom CSS
18 Posts 3 Posters 3.8k Views 3 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.
  • D Offline
    DarrenHill @DarrenHill
    last edited by DarrenHill Apr 3, 2022, 11:37 AM Apr 3, 2022, 11:25 AM

    @sdetweil So looks like the element is p as you correctly surmised before, but for some reason the custom.css entry is getting overwritten or somehow blocked (you can see it’s there in the inspector, but struck through)?

    Here now I have no idea, aside from breaking rule 1 and just editing the js file directly…

    The config.js setting for the module is:

            {
                module: "MMM-network-signal",
                position: "bottom_right",
                config: {
                    server: "8.8.8.8",
                    showMessage: true,
                    flexDirection: "row-reverse",
                    scale: 0.35
                }
            },
    
    

    And the custom.css entry is :

    .MMM-network-signal p {
      font-size: 1.5em;
    }
    
    

    I also tried fontSize: as per your original suggestion, but that didn’t work either.

    S 1 Reply Last reply Apr 3, 2022, 12:00 PM Reply Quote 0
    • S Offline
      sdetweil @DarrenHill
      last edited by sdetweil Apr 3, 2022, 12:03 PM Apr 3, 2022, 12:00 PM

      @DarrenHill said in MMM-network-signal - make the message text larger

      .MMM-network-signal p {
          font-size: 1.5em;
       }
      

      yeh, override is tricky sometimes… the ‘nearest’ specified (to the targeted thing) style wins…
      in this case the style= specified ON the element itself

      UNLESS

      you add !important

      this works

      .MMM-network-signal p {
          font-size: 1.5em !important;
       }
      

      https://www.w3schools.com/css/css_important.asp

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      D 1 Reply Last reply Apr 3, 2022, 12:10 PM Reply Quote 1
      • D Offline
        DarrenHill @sdetweil
        last edited by DarrenHill Apr 3, 2022, 12:13 PM Apr 3, 2022, 12:10 PM

        @sdetweil And we have a winner :D

        That one worked as you say, thanks Sam!

        So yesterday’s learning was GitHub, today’s is CSS ;)

        M S 2 Replies Last reply Apr 3, 2022, 12:15 PM Reply Quote 0
        • M Offline
          mumblebaj Module Developer @DarrenHill
          last edited by Apr 3, 2022, 12:15 PM

          @DarrenHill this worked for me. note the , before the p

          .MMM-network-signal ,p {
          font-size: 1.5em;
          color: yellow;
          }
          

          Check out my modules at: https://github.com/mumblebaj?tab=repositories
          Check my blog-post: https://mumblebaj.xyz/

          S 1 Reply Last reply Apr 3, 2022, 12:25 PM Reply Quote 0
          • S Offline
            sdetweil @mumblebaj
            last edited by Apr 3, 2022, 12:25 PM

            @mumblebaj where do you see the leading comma in the css selector definition, except for allowing the same style to apply to multiple selectors

            .class element1, element2, element3 { 
               styles
            }
            

            vs having three separate definitions…

            .class element1{ 
               styles
            }
            .class element2 { 
               styles
            }
            .class element3 { 
               styles
            }
            

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            M 1 Reply Last reply Apr 3, 2022, 12:29 PM Reply Quote 0
            • S Offline
              sdetweil @DarrenHill
              last edited by Apr 3, 2022, 12:26 PM

              @DarrenHill said in MMM-network-signal - make the message text larger:

              So yesterday’s learning was GitHub, today’s is CSS
              also see the ways you can select elements

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

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • M Offline
                mumblebaj Module Developer @sdetweil
                last edited by Apr 3, 2022, 12:29 PM

                @sdetweil Try it. It works. I tested it.

                Check out my modules at: https://github.com/mumblebaj?tab=repositories
                Check my blog-post: https://mumblebaj.xyz/

                D S 2 Replies Last reply Apr 3, 2022, 12:41 PM Reply Quote 0
                • D Offline
                  DarrenHill @mumblebaj
                  last edited by Apr 3, 2022, 12:41 PM

                  @mumblebaj Just tried it (copy/paste from your code above) and whilst the yellow works, the font-size didn’t for me.

                  1 Reply Last reply Reply Quote 0
                  • S Offline
                    sdetweil @mumblebaj
                    last edited by Apr 3, 2022, 1:06 PM

                    @mumblebaj well, it made the font bigger, but NOT 1.5em…

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    1 Reply Last reply Reply Quote 0
                    • 1
                    • 2
                    • 2 / 2
                    2 / 2
                    • First post
                      14/18
                      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