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.0k 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 Offline
      sdetweil @rkorell
      last edited by sdetweil

      @rkorell yes you do
      the full html of that section

      <div id="module_26_MMM-JsonValue" class="module MMM-JsonValue MB-Wetter-Wind MMM-JsonValue">
           <header class="module-header" style="display: none;"></header>
           <div class="module-content" style="color: red;">   // you are trying THIS div
                  <div>  // but it needs to be THIS div -------------
                     <span class="fa-solid fa-wind"></span>  Wind:  3.5 m/s
                  </div>
           </div>
      </div>
      

      .MB-Wetter-Wind // the class name on the div id=
      .module-content // then the div with the module content class
      div // then the div that HOLDS the text value

      ..MB-Wetter-Wind  .module-content (means whatever element has this defined) div 
      

      could also do

      ..MB-Wetter-Wind  div.module-content (means ONLY A DIV with class, a span with the same class would not match)  div 
      

      many styles are NOT inherited DOWN the tree

      because the span holds the icon, you can remove it for css design consideration of the text

      <div id="module_26_MMM-JsonValue" class="module MMM-JsonValue MB-Wetter-Wind MMM-JsonValue">
           <header class="module-header" style="display: none;"></header>
           <div class="module-content" style="color: red;">   // you are trying THIS div
                 <div>  // but it needs to be THIS div -------------
                       Wind:  3.5 m/s
                 </div>
           </div>
      </div>
      

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      S R 2 Replies Last reply Reply Quote 0
      • S Offline
        sdetweil @sdetweil
        last edited by sdetweil

        @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

          @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 Reply Quote 0
          • S Offline
            sdetweil @rkorell
            last edited by sdetweil

            @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 Reply Quote 0
            • R Offline
              rkorell @sdetweil
              last edited by

              @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 Reply Quote 0
              • S Offline
                sdetweil @rkorell
                last edited by

                @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 Reply Quote 0
                • R Offline
                  rkorell @sdetweil
                  last edited by

                  @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 Reply Quote 0
                  • S Offline
                    sdetweil @rkorell
                    last edited by

                    @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
                    • 1
                    • 2
                    • 3
                    • 3 / 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