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

Is it possible to have CSS for normal screens and a custom CSS for 7in screen?

Scheduled Pinned Locked Moved Custom CSS
32 Posts 3 Posters 8.7k Views 3 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
    Radnor
    last edited by Apr 28, 2020, 12:20 AM

    Event tried:

    if (small_size>width) {
    disabled: true,
    }

    this generates error in config with lots of red text on loading up

    1 Reply Last reply Reply Quote 0
    • S Offline
      sdetweil @Radnor
      last edited by sdetweil Apr 28, 2020, 12:54 AM Apr 28, 2020, 12:50 AM

      @Radnor gotta have the comma after, cause there is more to this module definition… (, comma means more info following this line)

      so, u want news feed ON for laptop (disabled:false), OFF for small display (disabled:true)

      so, newsfeed has two parts… the node_helper, and the browser part (modulename.js)

      so, we WANT the node_helper to load (disabled:false), but don’t know anything about the screen size yet, so it must be ALWAYS disable:false

      var small_size = 800;
      var width = 801;   // notice 1 larger than expected size of small screen
      try {
          width=outerWidth        // get the actual screen width (only works in browser usage)
      }
      catch(error){                       // this catches the fatal error in node_helper loading
      }
      

      config info

      {
      		module: "newsfeed",
                      disabled: width > small_size ?        // on startup, this will be true, so we want disabled:false
                                                            // when the browser on laptop pulls in modulename, this will be true
                                                            //              so disabled: false                  
                                                            false:                    
                                                            // when the small device is used, this will be false (800 is NOT greater than 800)
                                                            // so we want disabled: true 
                                                            true
                                                      ,     // more stuff coming on next line
                      position: “bottom_bar”,
                      config: {             
      
                      }
      

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • R Offline
        Radnor
        last edited by Apr 28, 2020, 12:56 AM

        Thank you.

        I’ve had it with and without the ending comma. Your changes, I’ve put in config.js only (node helper???) I did not put it in the modulename.js

        S 1 Reply Last reply Apr 28, 2020, 12:57 AM Reply Quote 0
        • S Offline
          sdetweil @Radnor
          last edited by sdetweil Apr 28, 2020, 12:59 AM Apr 28, 2020, 12:57 AM

          @Radnor said in Is it possible to have CSS for normal screens and a custom CSS for 7in screen?:

          I did not put it in the modulename.js

          you do NOT put it into anything other than config.js,

          the system (MM) will load config.js

          once for loading node_helpers
          once for each browser that connects to MM (including one that is included when npm start is done)

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • R Offline
            Radnor
            last edited by Radnor Apr 28, 2020, 1:12 AM Apr 28, 2020, 1:11 AM

            Thats good. Did not mess that up…

            I did a copy and paste of your code into my config file.

            On the laptop I want the newsfeed. It just says “Loading …” (BEFORE changing width to 801)
            On my phone, I do not want the newsfeed and it is NOT there. So that works great.

            THANK YOU!!!

            Changed width to 801 seems to be working now!
            The short code works not too (without all the comments)

            Thank you again! Be safe!

            S 1 Reply Last reply Apr 28, 2020, 1:19 AM Reply Quote 0
            • S Offline
              sdetweil @Radnor
              last edited by Apr 28, 2020, 1:19 AM

              @Radnor said in Is it possible to have CSS for normal screens and a custom CSS for 7in screen?:

              ” (BEFORE changing width to 801)

              right, the node_helper was not loaded, so the UI will just sit and wait for data that will never come
              if you opened the dev window, console tabe, you would see an error from the module trying to send a message to the node_helper, which is not loaded…oops…

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • 1
              • 2
              • 3
              • 4
              • 4 / 4
              4 / 4
              • First post
                31/32
                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