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.
    • 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
            • R Offline
              rkorell @rkorell
              last edited by

              #module_10_MMM-JsonValue > div:nth-child(2) {
                 color: "fuchsia";
              }
              
              

              Doesn’t work, either :-(

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

                @rkorell prototype

                IMG_0885.jpeg

                Sam

                How to add modules

                learning how to use browser developers window for css changes

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

                  @rkorell maybe that will work

                  if you change it in the input area, does change

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

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

                    @rkorell

                    .module-content div {
                    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 Ahhhh…
                      THIS “bottom” …
                      Sorry for misinterpreting this.
                      Will try your suggestion.

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

                        @sdetweil
                        Unfortunately

                        
                        .MB-Wetter-Temp .module-content div {
                        color: "fuchsia";
                        }
                        
                        
                        

                        doesn’t work :-(

                        May you are much faster than me?
                        If you mind to try MMM-JsonValue with this

                        		{   /// WIND
                        			module: "MMM-JsonValue",
                        			position: "top_right",
                        			classes: "MB-Wetter-Wind",
                        			disabled: false,
                        			config: {
                        				apiBase: 'https://api.weather.com/v2/pws/observations/current?stationId=IGEROL23&format=json&units=m&numericPrecision=decimal&apiKey=e0658025e8d74a2da58025e8d70a2ddf',
                        				method: "GET",
                        				title: "", // Widget Title, set to null if not needed
                        				icon: "fa-solid fa-wind", // Font Awesome icon, displayed before any text, set to null if not needed
                        				prefix: "  Wind:  ", //   "Quote: \"" ---  Text displayed before the value, can be a blank String ""
                        				suffix: " m/s", // "\" (from https://api.quotable.io/random)" ----- Text displayed after the value, can be a blank String ""
                        				jsonPath: "$.observations[:1].metric.windSpeed", // value in the json to display, the module use https://github.com/dchester/jsonpath for parsing. Note: if $ is not the first character in your path, it will be added for backward-compatibility reason.
                        
                        				refreshInterval: 5 * 1000 * 60, // refresh every 5 minutes
                        				debug: false,
                        				skipPadding: false, // yo can un-comment this line if you want to display a related value below; using a second instance.
                        			}
                        		 },		 
                        

                        code snippet in config.js …
                        Gives you the windspeed on my weather station monitored by wunderground …

                        Thanks again !
                        Ralf

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