Different looks based on browser / user-agent

[Alvinger]

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:

<script>
  var b = document.body;
  b.setAttribute("data-useragent"), navigator.userAgent);
  b.setAttribute("data-platform"), navigator.platform);
</script>

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?

[A Former User]

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.