• 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 688 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 Mar 23, 2025, 7:47 PM

    #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 Mar 23, 2025, 8:00 PM

      @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 Mar 23, 2025, 8:11 PM Reply Quote 1
      • S Away
        sdetweil @sdetweil
        last edited by sdetweil Mar 23, 2025, 8:28 PM Mar 23, 2025, 8:11 PM

        @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 Mar 23, 2025, 8:27 PM Reply Quote 0
        • S Away
          sdetweil @sdetweil
          last edited by Mar 23, 2025, 8:27 PM

          @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 Mar 24, 2025, 8:17 AM Reply Quote 0
          • R Offline
            rkorell @sdetweil
            last edited by Mar 24, 2025, 8:05 AM

            @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 Mar 24, 2025, 1:00 PM Mar 24, 2025, 8:17 AM

              @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 Mar 24, 2025, 1:44 PM Reply Quote 0
              • S Away
                sdetweil @rkorell
                last edited by sdetweil Mar 24, 2025, 1:55 PM Mar 24, 2025, 1:44 PM

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

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

                SO close… the color is NOT in quotes (in css)
                sorry I missed that before

                .MB-Wetter-Wind .module-content div {
                  color: blue;
                }
                

                Snip20250324_1.png

                here I am using the dev window to override the blue to red… see the top right of the right column , note that the one from custom.css (just below), is strikethru to say it is overridden by something higher up
                if you uncheck the checkbox in front of the color:red; it will disable that value and the strikethru will go away and the text will be blue

                Screenshot 2025-03-24 at 6.48.28 AM.png

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                R 2 Replies Last reply Mar 24, 2025, 2:42 PM Reply Quote 1
                • R Offline
                  rkorell @sdetweil
                  last edited by Mar 24, 2025, 2:42 PM

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

                  dev window to override the blue to red

                  I guess your own CSS modification has enabled this…
                  Without this the entry #text doesn’t have any opportunity to change anything…

                  S 1 Reply Last reply Mar 24, 2025, 2:47 PM Reply Quote 0
                  • R Offline
                    rkorell @sdetweil
                    last edited by Mar 24, 2025, 2:43 PM

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

                    SO close…

                    :-)

                    You’ve made my day!
                    THANKS a LOT!!!

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

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

                      Without this the entry #text doesn’t have any opportunity to change anything…

                      you are not styling the TEXT, you are styling the DIV that HOLDS the text
                      (my css entry commented out, and the div selected)
                      you cannot target the ‘text’ itself… only whatever holds it (p, div, span, table data…)

                      Snip20250324_4.png

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      R 1 Reply Last reply Mar 24, 2025, 3:13 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 3 / 3
                      3 / 3
                      • First post
                        16/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