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?
-
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.
