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

CSS modifications on a module which has no own css styles?

Scheduled Pinned Locked Moved Custom CSS
30 Posts 2 Posters 2.7k Views 2 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 Away
    sdetweil @sdetweil
    last edited by sdetweil Mar 24, 2025, 3:41 PM Mar 24, 2025, 3:41 PM

    @rkorell I think your div has the class margin-block-end added (maybe thru custom.css)

    Sam

    How to add modules

    learning how to use browser developers window for css changes

    1 Reply Last reply Reply Quote 0
    • R Offline
      rkorell @sdetweil
      last edited by rkorell Mar 24, 2025, 3:48 PM Mar 24, 2025, 3:45 PM

      @sdetweil

      <div id="module_11_MMM-JsonValue" class="module MMM-JsonValue MB-Wetter-Wind" style="opacity: 1; position: static;">
      <header class="module-header" style="display: none;"></header>
      <div class="module-content">
      <div style="margin-block-end: -30px;">
      <span class="fa-solid fa-wind"></span>  Wind:  &nbsp;&nbsp;4 m/s
      </div>
      </div>
      </div>
      
      

      Is my complete HTML block for this…
      Interesting enough YOU do not have this

      "margin-block-end: -30px;"
      

      in your HTML …
      THIS style is hard coded in the *.js file of module…

      I give up.
      Problem solved…

      THANK you SO much!

      Ralf

      S 1 Reply Last reply Mar 24, 2025, 3:48 PM Reply Quote 0
      • S Away
        sdetweil @rkorell
        last edited by sdetweil Mar 24, 2025, 3:49 PM Mar 24, 2025, 3:48 PM

        @rkorell said in CSS modifications on a module which has no own css styles?:

        I give up.

        but its the SAME result… you need to target the div INSIDE the module-content div

        .module-content div {
        color: …
        }

        this means
        find the element(s) with class module-content
        AND THEN
        the div(s) inside that

        selector is ALWAYS ALL that match

        as the color style is not inherited down

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        R 1 Reply Last reply Mar 24, 2025, 3:58 PM Reply Quote 0
        • R Offline
          rkorell @sdetweil
          last edited by Mar 24, 2025, 3:58 PM

          @sdetweil You are - as always - right.
          For some reasons NOW it works - tried again.
          (And I already HAD tried exactly THIS dozens of times …).

          THANKS!

          Ralf

          S 1 Reply Last reply Mar 24, 2025, 4:01 PM Reply Quote 0
          • S Away
            sdetweil @rkorell
            last edited by Mar 24, 2025, 4:01 PM

            @rkorell said in CSS modifications on a module which has no own css styles?:

            (And I already HAD tried exactly THIS dozens of times …).

            I think it failed on the previous because of the quotes around the color name

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            R 1 Reply Last reply Mar 24, 2025, 4:04 PM Reply Quote 0
            • R Offline
              rkorell @sdetweil
              last edited by Mar 24, 2025, 4:04 PM

              @sdetweil said in CSS modifications on a module which has no own css styles?:

              I think it failed on the previous because of the quotes around the color name

              No.
              I’ve tried this (see screenshot) with already working colors on these items …
              May something buffering wrong…
              (I’ve pressed ctrl-R several times so reloading has happened …)

              S 1 Reply Last reply Mar 24, 2025, 4:07 PM Reply Quote 0
              • S Away
                sdetweil @rkorell
                last edited by Mar 24, 2025, 4:07 PM

                @rkorell hm… only other thing is MM is case sensitive… css class names too

                you got it tho

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 1
                • S sdetweil referenced this topic on Mar 25, 2025, 2:55 PM
                • 1
                • 2
                • 3
                • 3 / 3
                3 / 3
                • First post
                  28/30
                  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