• 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:29 PM Apr 27, 2020, 8:27 PM

    OK, I think the disabled has something to do with the newsfeed.

    I have several config files. config_WORKING has modules alert, notify, clock, wx, wx forecast, calendar, and newsfeed.

    I have config_CLOCK with modules clock, wx, and wx forecast. In this config I told it via disable: width > small ? false:true. On my laptop get all 3. on phone no forecast (which should not be there).

    In the newsfeed module the disable test is messing it up.

    I rename either WORKING or CLOCK to just config.js to test.

    1 Reply Last reply Reply Quote 0
    • S Offline
      sdetweil
      last edited by Apr 27, 2020, 8:37 PM

      @Radnor said

      I have config_CLOCK with modules clock, wx, and wx forecast. In this config I told it via disable: width > small ? false:true. On my laptop get all 3. on phone no forecast (which should not be there).

      I see 4 things in the list

      on phone, no forecast, which is not an error?

      i set my newsfeed to

      		{
      			module: "newsfeed",
      			disabled: width>small_screen?false:true,
      

      see on desktop, not on phone, as expected

      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 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
                      • 1
                      • 2
                      • 3
                      • 4
                      • 3 / 4
                      3 / 4
                      • First post
                        24/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