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