3. Different looks based on browser / user-agent

Different looks based on browser / user-agent


  • I do realize that this is probably off-topic for the bulk of the users.

    I intend to run multiple mirrors off of one server instance. I will have one “complete” Magic Mirror installation (including physical mirror) but want to show the content on several other screens, not all of them mirrors!

    There is a very simple way of doing this and that is selecting showed content based on browser / user-agent strings. In my case I will use the Midori browser (and maybe Chromecast) for mirrors. All my other devices will use Chrome. So anything with Chrome in the user-agent will be shown a custom theme while the rest will show the “standard” theme.

    To accomplish this the user-agent needs to be saved so that the CSS can select theme based on it. I did a quick hack of index.html in the MagicMirror folder. I added the following right after the ****-tag:

    I can then use custom.css to define a different look based on the above. In my case I wanted to have something other than a black background, i.e. a different background image. To get this I added the following in custom.css:

    body[data-useragent*="Chrome"] {
  background-image: url("background.jpg");
}

    This works great (I had to put the background.jpg in the css folder but I am sure there is another way).

    Now I just need to figure out how to set values in config.js to customize the modules shown. Any suggestions?

    0

  • Interesting so following, as have in mind similar plans but feeding some relevant info from our Ai down to specific screens.

    Do keep me updated, as a server set up and API per config mirror may be the way forward.

    0