MagicMirror² v2.14.0 is available! For more information about this release, check out this topic.

Show date below time and date info on several lines

  • 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!

    0_1564610343042_Screenshot 2019-07-31 at 23.56.53.png


    #module_2_clock > div > div {
        display: flex;
        flex-direction: column;
    /* Date */
    #module_2_clock > div > div > {
        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:


      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! 🙂

Log in to reply