Hi!

Just thought I would share how I put the date below the time for the default Clock module using only CSS - no need to modify or create your own clock module!

custom.css

/* 
    CLOCK
*/

#module_2_clock > div > div {
    display: flex;
    flex-direction: column;
}

/* Date */
#module_2_clock > div > div > div.date {
    order: 2;
}

/* Time */
#module_2_clock > div > div > div.time {
    order: 1;

    font-family: Roboto, sans-serif;
    font-weight: 300;
    font-size: 80px;
    line-height: 75px;
    letter-spacing: -3px;
    color: #fff;    
}

Also, to show the week on a separate line and make it a little bit smaller, use HTML tags within brackets when setting the date format, like this:

config.js

{
  module: "clock",
  position: "top_right",
  config: {
    displaySeconds: false,
    dateFormat: "dddd D MMMM[< br/ >< small >vecka] W[< /small >]",
  }
},

NOTE: Since the forum is sanitising HTML, remove all the spaces from the tags above in < small >, < /small > and < br/ > to make it work.

Hope this can inspire and help someone!

@sdetweil I’m running Magic Mirror in server mode and I’ve tried what @joshwilsonvu suggested but can’t get that to work neither in Chrome latest version on my MacBook Pro or in Fully Kiosk Browser on my Android tablet behind my mirror as Chrome then complains require is not defined.

Do you have any ideas on how to get that working when not running Magic Mirror as an electron app?

@joshwilsonvu It would be awesome if it was that simple but I’ve tried and it doesn’t. I believe this is due to how the config file is loaded into the browser/client as a JavaScript include so then when the browser tries to require it’s not defined and the config breaks.

But on the other hand, there seems to be someone who wants to improve on that and if that happens then your suggestion would likely work
https://github.com/MichMich/MagicMirror/pull/1947

Hi!

Ever since I first found out about this project I’ve wanted to version control my config.js so I can share it with others and easily make backups. I’ve looked but haven’t found any easy way to do this while still keeping all my API keys secret since I’m running Magic Mirror server only in a docker container (with an Android tablet with Fully Kiosk Browser as the client).

However, I’ve found a way using the query parameters of the URL which works in my scenario, please let me know if you get it to work for you as well.

In the top of your config.js, add:

const urlParams = new URLSearchParams(location.search);
const secrets = Object.fromEntries(urlParams);

Then further down where the secret is to be used, just add:

modules: [
  {
	module: "currentweather",
	position: "top_right",
	config: {
		location: "Amsterdam,Netherlands",
		appid: secrets.weatherApiKey
	}
   }
]

Then, wherever you start your Magic Mirror, change the URL so it’s something like:
http://192.168.1.10:8123/?weatherApiKey=abcdefg123456&otheKey=secretkey123

Now if you only have a few secrets then managing the URL shouldn’t be that hard. However if you do have plenty of keys and if you are able to run PHP then try out this PHP script to make managing the keys more easily:

< ?php // Remove space 
  $ip = '192.168.1.10';
  $port = 8123;

  $secrets = array(
    'weatherApiKey' => '123456',
    'calendarApiKey' => 'abcdefg'
    'metroApiKey' => 'abc123',
  );

  $url = "http://$ip:$port/?" . http_build_query($secrets);
  header("Location: $url");
  exit();
?>

Don’t forget to point whatever client you’re using to this PHP script instead.

Let me know what you think or if you have any suggestions on improvements!

Hi!

Just thought I would share how I put the date below the time for the default Clock module using only CSS - no need to modify or create your own clock module!

custom.css

/* 
    CLOCK
*/

#module_2_clock > div > div {
    display: flex;
    flex-direction: column;
}

/* Date */
#module_2_clock > div > div > div.date {
    order: 2;
}

/* Time */
#module_2_clock > div > div > div.time {
    order: 1;

    font-family: Roboto, sans-serif;
    font-weight: 300;
    font-size: 80px;
    line-height: 75px;
    letter-spacing: -3px;
    color: #fff;    
}

Also, to show the week on a separate line and make it a little bit smaller, use HTML tags within brackets when setting the date format, like this:

config.js

{
  module: "clock",
  position: "top_right",
  config: {
    displaySeconds: false,
    dateFormat: "dddd D MMMM[< br/ >< small >vecka] W[< /small >]",
  }
},

NOTE: Since the forum is sanitising HTML, remove all the spaces from the tags above in < small >, < /small > and < br/ > to make it work.

Hope this can inspire and help someone!