• 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.9k 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 Radnor Apr 27, 2020, 8:54 PM Apr 27, 2020, 8:53 PM

    There’s 3 (wx forecast) is forecast. Not weather AND forecast.

    No error because in forecast was disabled because of small screen.
    I copied your 2 lines (newsfeed & disabled) and get error when starting it. Complains about my config file…

    Any way of letting it load up and do a display:none in the CSS file for small screen?

    S 1 Reply Last reply Apr 27, 2020, 9:11 PM Reply Quote 0
    • S Offline
      sdetweil @Radnor
      last edited by Apr 27, 2020, 9:11 PM

      @Radnor notice my variable names (small_screen) are not the same as yours… (small_size)

      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 27, 2020, 11:56 PM

        Initially, I did NOT see the different variable name.

        Cannot get the Ternary op to work at all. I copy/paste (and change var name) your code without luck.
        A straight “disabled: true” works.

        S 1 Reply Last reply Apr 27, 2020, 11:58 PM Reply Quote 0
        • S Offline
          sdetweil @Radnor
          last edited by Apr 27, 2020, 11:58 PM

          @Radnor its a (if) ? when_true : when_false

          show me your code now

          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:05 AM

            var small_size = 800;
            var width = 0;
            try {
            width=outerWidth
            }
            catch(error){
            }

            var config = …

            	{
            		module: "newsfeed",
            

            disabled: width < small_size ? true:false,
            position: “bottom_bar”,
            config: {

            I had it WITH and WITHOUT the comma after false. I had parens around the logical test too.

            S 1 Reply Last reply Apr 28, 2020, 12:50 AM Reply Quote 0
            • 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
                      • 1
                      • 2
                      • 3
                      • 4
                      • 3 / 4
                      3 / 4
                      • First post
                        26/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