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 605 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 @rkorell
      last edited by

      @rkorell the part of the css before the { is called the
      selector clause.

      it ‘selects’ the elements that the stuff between {} will be applied to

      they can be quite complex, like here in my mmm-config to change an element in a generated form

      .possibly-hidden-tab div:nth-child(2)  > div > div >div >ul >li:only-child >a[rel*="Item%201"] {
        display: none;
      }
      

      so you just have to describe how to target those elements

      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 ,
        Dear Sam,
        yes, I know and the selector clause is exactly what I’m struggling to find.
        I’ve managed to see several clauses like your example with “nth-child” and several wild namings in other cases.
        But in th given case I cannot “pick” the clause.

        If I select the text in developer console (see image) “Kein Element ausgewählt” which tranlates to “no element selected”.
        Consecutively it is not possible to extract the “inner HTML” or even the “CSS Path” - which in other circumstances is offered via right mouse context-menu…

        So how can I figure out the selector clause?

        Thanks!
        Ralf

        S 1 Reply Last reply Reply Quote 0
        • S Away
          sdetweil @rkorell
          last edited by

          @rkorell

          .module-name     div.module-block-end {
             color:....;
          }
          

          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 would this work with the classes name as well?

            S 1 Reply Last reply Reply Quote 0
            • S Away
              sdetweil @rkorell
              last edited by

              @rkorell yes. as a replacement for module_name

              when you select the element in the dev window
              down at the bottom is the selector clause prototype

              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 rkorell

                @sdetweil unfortunately your suggestion doesn’t work…
                And I cannot see anything “at the button” ?

                Defnitely no “selector clause prototype”

                R 1 Reply Last reply Reply Quote 0
                • R Offline
                  rkorell @rkorell
                  last edited by

                  Screenshot 2025-03-23 203204.png
                  This is complete view in Firefox Browser

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

                    @rkorell there is an extra close div after the span

                    where does it open

                    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 @rkorell
                      last edited by

                      @rkorell Screenshot 2025-03-23 203408.png
                      This same in Chrome

                      S 1 Reply Last reply Reply Quote 0
                      • R Offline
                        rkorell @sdetweil
                        last edited by rkorell

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

                        where does it open

                        <div module>
                        <div class "module content">
                        <div Style "margin-block-end">
                          <span class> font-awesome-picture
                        " HERE THE TEXT"
                        </div>
                        </div>
                        </div>
                        

                        Screenshot 2025-03-23 203611.png
                        The " <div class “module content”> " is identified by
                        "#module_10_MMM-JsonValue > div:nth-child(2) " (for the first instance of module)
                        second and following instances are counted up consecutively
                        "#module_11_MMM-JsonValue > div:nth-child(2) "
                        "#module_12_MMM-JsonValue > div:nth-child(2) "
                        "#module_13_MMM-JsonValue > div:nth-child(2) "

                        R 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 1 / 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