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 9.4k 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.
    • S Offline
      sdetweil @sdetweil
      last edited by

      @sdetweil better

      var width	= 801
      try {
        	width=outerWidth
      }
      catch(error){
      
      }
      var small_screen=800
      

      and module disabled

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

      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

        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

          @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

            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 Reply Quote 0
            • S Offline
              sdetweil @Radnor
              last edited by

              @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

                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 Reply Quote 0
                • S Offline
                  sdetweil @Radnor
                  last edited by

                  @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

                    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 Reply Quote 0
                    • R Offline
                      Radnor
                      last edited by

                      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

                        @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
                        • 1
                        • 2
                        • 3
                        • 4
                        • 3 / 4
                        • 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