Here is my bright ui for our kitchen monitor. The CSS is for the standard config of the MM.

The MagicMirror runs in an iFrame of an html page, the other pages are all written in html and css.

Here is the result for the standard config.
In the config, compliments must be set to center.

		{
			module: "compliments",
			position: "center"
		},

• custom.css

@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");

html {
  cursor: hidden;
  overflow: hidden;
  background: #e7e7e7;;
}


body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background: #e7e7e7;
  color: #8a8a8a;
  font-weight: 400;
  font-size: 2em;
  font-family: "Lato", sans-serif;
  line-height: 1.5em;
  margin-bottom: -10px;
  -webkit-font-smoothing: antialiased;
}

header {
  text-transform: uppercase;
  font-family: "Lato", sans-serif;
  text-align: center;
  font-weight: bold;
  background: #F7F7F7;
  border-bottom: none;
  color:#8a8a8a;
}

 .module.compliments,
 .module.newsfeed,
 .module.clock,
 .module.weatherforecast,
 .module.calendar,
 .module.currentweather {
  font-family: "Lato", sans-serif;
  background-color: #f7f7f7;
  color: #8a8a8a;
  border: 1px solid #c1c1c1;
  box-shadow: 0px 10px 25px -5px rgba(50, 88, 130, 0.32);
  border-radius: 15px;
  padding: 30px;
}

.dimmed {
  color: #8a8a8a;
}

.normal {
  color: #8a8a8a;
}

.bright {
  color: #8a8a8a;
}


/**
 * module.width_height
 */

 .module.compliments {
  width:800px;
}
 
/**
 * clock.
 */ 
 
.clock .time {
 text-align: center;
 font-family: "Lato", sans-serif;
 
}
.clock .date {
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  color: #8a8a8a;
  font-family: "Lato", sans-serif;
}


/**
 * weather.
 */

.currentweather .bright {
  font-family: "Lato", sans-serif;
}

.weathericon {
  color: #8a8a8a;
}

Dark Ui

html {
  cursor: none;
  overflow: hidden;
  background: #2a313b;
}


body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background: #2a313b;
  color: #aaa;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.5em;
  margin-bottom: -10px;
  -webkit-font-smoothing: antialiased;
}

header {
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: bold;
  height: 25px;
  background: #1f242c;
  line-height: 30px;
  border-bottom: none;
  color: #fffff;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.7), 1px 1px 1px rgba(255, 255, 255, 0.1)
}

/**
 * module.width_height
 */

.module.clock {
  width:300px;
  height: 150px;
}

.module.MMM-NetworkScanner {
  width:300px;
  height: 200px;
}

.module.weatherforecast {
  width:300px;
  height: 200px;
}

.module.currentweather {
  height: 150px;
  width:300px;
}

/**
 * module.color_border_shadow
 */
 
 .module.MMM-NetworkScanner,
 .module.clock,
 .module.MMM-CalendarExt2,
 .module.weatherforecast,
 .module.currentweather,
 .module.MMM-News {
  background-color:#2a313b;
  border-radius:8px;
  padding:8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
}

/**
 * clock.
 */

.clock .time {
 font-size: 80px;
 text-align: center;
 margin-top: 25px;
 padding:2px;
 
}
.clock .date {
  text-transform: uppercase;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  height: 25px;
  background: #1f242c;
  line-height: 30px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  color: #fffff;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.7), 1px 1px 1px rgba(255, 255, 255, 0.1)
}

/**
 * MMM-News.
 */

#NEWS.vertical {
  width:1200px;
}
#NEWS.vertical .content .articleImage {
  max-width:600px;
  max-height:500px;
  margin-left:auto;
  margin-right:auto;
  display:block;
  border-radius: 20px;
  padding:8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
}
#NEWS.vertical #NEWS_CONTENT {
	color: white;
  font-size: 35px;
  line-height: 40px;
  padding-bottom:40px;
}

/**
 * MMM-CalendarExt2.
 */

.CX2 .slot .event{
	background: #1f242c;
}
.CX2 .agenda .eventSub {
	display:none;
}
.CX2 .slot .slotHeader{
  background: #1f242c;
  border: 1px solid black;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
	color: grey;
}
.CX2 .today .slotHeader * {
	color: white;
}
 .CX2 .event.fullday {
  background: #1f242c;
  border-radius:0px;
}

.CX2 .event[data-calendar-name="Google"] {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
  color: white;
}
.CX2 .event[data-calendar-name="Karate"] {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
  color: white;
}
.CX2 .event[data-calendar-name="Abfall"] {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
  color: white;
}
.CX2 .event[data-calendar-name="Arbeit"] {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
  color: white;
}
.CX2 .event[data-calendar-name="Feiertage"] {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
  color: white;
}

/**
 * Iconsize.
 */

.CX2 .event .eventIcon {
  min-width: calc(var(--font-size) * 2,5);
  min-height: calc(var(--font-size) * 2,5);
  margin-right:5px;
  float:left;
}
.CX2 .period .eventIcon {
  min-width: calc(var(--font-size) * 2,5);
  min-height: calc(var(--font-size) * 2,5);
  margin-right:5px;
  float:left;
}
.CX2 .weekSlot .eventIcon {
  min-width: var(--font-size);
  min-height: var(--font-size);
  margin-right:3px;
  display:block;
  padding-bottom:3px;
}

/**
 * weather.
 */
 
.currentweather .bright {
  position: absolute;
  left: 140px;
  margin-top: 25px;
}
.weathericon {
  position: absolute;
  left: 115px;
  z-index: 1;
  margin-top: -15px;
  height: 35px;
  -webkit-svg-shadow: 0 0 7px #53BE12;
}
.currentweather .weathericon {
  position: absolute;
  left: 40px;
  margin-top: 20px;
  font-size: 75px;
}

Small work accident. The result is a BG animation with CSS only.

Video on You Tube

body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin-bottom: -10px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: #606060;
  background: url("bg/bg7.jpg");
  background-blend-mode: hard-light;
  -webkit-animation: hue-rotate 10s linear infinite;
          animation: hue-rotate 10s linear infinite;
  
}

html {
  cursor: default;
  overflow: hidden;
  background: linear-gradient(233deg, #e56420, #c22525, #3d9c31, #37bbde);
}

header {
  text-align: center;
  font-size: 20px;
  padding:8px;
  border-radius: 5px;
  outline: none;
  border: none;
  background-image: linear-gradient(#28D2DE 0%, #1A878F 100%);
  color: #FFF;
  text-transform: uppercase;
  text-shadow: #000 0px 1px 5px;
  border: 1px solid #000;
  opacity: 0.7;
  box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.8) !important;

}
.dimmed {
  color: #FFF;
}

.normal {
  color: #FFF;
}

.bright {
  color: #FFF;
}
 .module {
  font-size: 20px; 
  padding:8px;
  font-weight: 400;
  border-radius: 5px;
  box-shadow: inset 4px 6px 10px -4px rgba(0, 0, 0, 0.3), 0 1px 1px -1px rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.2);
  outline: none;
  border: none;
  border: 1px solid black;
  color: #6E6E6E;
  text-shadow: #000 0px 1px 5px;

}

@keyframes hue-rotate {
  from {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }
  to {
    -webkit-filter: hue-rotate(360deg);
    -moz-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}
@-webkit-keyframes hue-rotate {
  from {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }
  to {
    -webkit-filter: hue-rotate(360deg);
    -moz-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

Since I use my mirror on a monitor in the kitchen, I wrote a module that changes the entries in the Custom.css according

Entry in the config

	{
		module: "cssswitch",
		    config: {
                         evening_start: 21,        
                         evening_stop: 6,
              }  
	},

Example for the custom.css

/**
 * morning style
 */
 
.morning {
  background: #d4d4d4;
}

.morning .dimmed  {
  color: #2c3e50;
}
.morning .normal {
  color: #2c3e50;
}
.morning .bright  {
  color: #2c3e50;
}
/**
 * So that all modules have the same style
 * insert new modules with.module.Modulname
 * module.background-color_border_shadow
 */
 
 .morning .module.clock,
 .morning .module.calendar,
 .morning .module.weatherforecast,
 .morning .module.currentweather {
  font-family: "Lato", sans-serif;
  border: 1px solid #fff;
  background-color: #f6f5f0;
  padding: 1.5rem 2rem;
  border-radius: 10px;
  box-shadow: inset 10px 10px 15px -10px #c3c3c3, inset -10px -10px 15px -10px #ffffff;
}

.morning .clock .time {
 color: #fffff;
 font-size: 100px;
 text-align: center;
 margin-top: 30px;
 font-family: "Lato", sans-serif;
}
.morning .clock .date  {
  font-weight: bold;
  color:#2c3e50;
  font-size: 20px;
  text-transform: uppercase;
  font-family: "Lato", sans-serif;
  text-align: center;
  background-color:#d4d4d4;
  box-shadow: inset 1px 1px 2.5px rgba(0, 0, 0, 0.25), inset -2.5px -2.5px 5px rgba(255, 255, 255, 0.3);
  transition: all 0.2s ease-in-out;
  padding: 0.25rem 0.25rem;
  border-radius: 8px;
}


 /**
 * evening style
 */

.evening {
  background: #151515;
}

.evening .dimmed  {
  color:#d4d4d4;
}
.evening .normal  {
  color:#d4d4d4;
}
.evening .bright  {
  color:#d4d4d4;
}
/**
 * So that all modules have the same style
 * insert new modules with.module.Modulname
 * module.background-color_border_shadow
 */
 .evening .module.clock,
 .evening .module.calendar,
 .evening .module.weatherforecast,
 .evening .module.currentweather {
  padding:8px;
  background: #111;
  background: linear-gradient(#1b1b1b, #111);
  border: 1px solid #000;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #272727;
  z-index: 1;
  font-family: "Lato", sans-serif;
}

Please use the search function. At the moment questions are being asked time and again that have probably already been answered a hundred times by the search at the top right. The problem is that there are 50 solutions to a problem and newcomers are getting more and more confused.

Here are some templates for all newbies.

1.Black boxes

CSS

html {
  cursor: default;
  overflow: hidden;
  background: #2c2c2d;
}


body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin-bottom: -10px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: #dbdcdf;
  background: transparent;
}

header {
  background: transparent;
  padding: 0.5rem;
  text-align: center;
  border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
  color: #dbdcdf;
  font-size: 20px;
}
.dimmed {
  color: #dbdcdf;
}

.normal {
  color: #dbdcdf;
}

.bright {
  color: #dbdcdf;
}

/**
 * module.color_border_shadow
 */ 
 .module.clock,
 .module.calendar,
 .module.newsfeed,
 .module.weatherforecast,
 .module.currentweather,
 .module.compliments {
  padding:8px;
  border-radius: 10px;
  box-shadow: 0 2em 6em #000;
  background: transparent;
}

.clock .time {
 font-size: 80px;
 text-align: center;
 margin-top: 25px;
 color: #dbdcdf;
 padding: 15px;
}
.clock .date {
  background: transparent;
  padding: 5px;
  text-align: center;
  border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
  color: #dbdcdf;
  font-size: 20px;
}


/**
 * module.width_height
 */
.module.calendar {
  width:450px;
  height: 320px;
}
.module.weatherforecast {
  width:400px;
  height: 220px;
}
.module.currentweather {
  height: 180px;
  width:400px;
  text-align: center;
}

2.Material Design

CSS

html {
  cursor: default;
  overflow: hidden;
  background: #e9e9e9;
}


body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin-bottom: -10px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: #666666;
  background: transparent;
}

header {
  background: transparent;
  padding: 0.5rem;
  text-align: center;
  font-size: 20px;
  color: #ed2553;
  border-bottom: 2px solid #e3e3e3;
}
.dimmed {
  color: #666666;
}

.normal {
  color: #666666;
}

.bright {
  color: #666666;
}

/**
 * module.color_border_shadow
 */ 
 .module.clock,
 .module.calendar,
 .module.newsfeed,
 .module.weatherforecast,
 .module.currentweather,
 .module.compliments {
  padding:8px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  background: #f2f2f2;
}

.clock .time {
 font-size: 80px;
 text-align: center;
 margin-top: 25px;
 color: #666666;
 padding: 15px;
}
.clock .date {
  background: transparent;
  padding: 5px;
  text-align: center;
  font-size: 20px;
  color: #ed2553;
  border-bottom: 2px solid #e3e3e3;
}


/**
 * module.width_height
 */
.module.calendar {
  width:450px;
  height: 320px;
}
.module.weatherforecast {
  width:400px;
  height: 220px;
}
.module.currentweather {
  height: 180px;
  width:400px;
  text-align: center;
}

3.Neumorphism

CSS

html {
  cursor: default;
  overflow: hidden;
  background: #545454;
}


body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin-bottom: -10px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: #FFFFFF;
  background: transparent;
}

header {
  background: transparent;
  padding: 10px;
  text-align: center;
  font-size: 20px;
  color: #FFFFFF;
  border-radius: 23px;
  box-shadow: inset 11px 11px 16px #3e3e3e, 
            inset -11px -11px 16px #6a6a6a;
}
.dimmed {
  color: #FFFFFF;
}

.normal {
  color: #FFFFFF;
}

.bright {
  color: #FFFFFF;
}

/**
 * module.color_border_shadow
 */ 
 .module.clock,
 .module.calendar,
 .module.newsfeed,
 .module.weatherforecast,
 .module.currentweather,
 .module.compliments {
  padding:8px;
  border-radius: 23px;
  background: #545454;
  box-shadow:  11px 11px 16px #3e3e3e, 
             -11px -11px 16px #6a6a6a;
}

.clock .time {
 font-size: 80px;
 text-align: center;
 margin-top: 25px;
 color: #FFFFFF;
 padding: 15px;
}
.clock .date {
  background: transparent;
  padding: 2px;
  text-align: center;
  font-size: 20px;
  color: #FFFFFF;
  border-radius: 23px;
  box-shadow: inset 11px 11px 16px #3e3e3e, 
            inset -11px -11px 16px #6a6a6a;
}


/**
 * module.width_height
 */
.module.calendar {
  width:450px;
  height: 320px;
}
.module.weatherforecast {
  width:400px;
  height: 220px;
}
.module.currentweather {
  height: 180px;
  width:400px;
  text-align: center;
}

4.Trending

CSS

html {
  cursor: default;
  overflow: hidden;
  background: #7e94d8;
}


body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin-bottom: -10px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: #666666;
  background: transparent;
}

header {
  background: #9DD5FF;
  padding: 8px;
  text-align: center;
  font-size: 20px;
  color: #FFFFFF;
  text-shadow: 0px 10px 20px #000000;
  box-shadow: 0px 16px 30px 0px rgba(0, 0, 0, 0.53);
  border-radius: 10px;
}
.dimmed {
  color: #FFFFFF;
}

.normal {
  color: #FFFFFF;
}

.bright {
  color: #FFFFFF;
}

/**
 * module.color_border_shadow
 */ 
 .module.clock,
 .module.calendar,
 .module.newsfeed,
 .module.weatherforecast,
 .module.currentweather,
 .module.compliments {
  padding:8px;
  border-radius: 10px;
  box-shadow: 0px 31px 35px 0px rgba(0, 0, 0, 0.38);
  background: linear-gradient(159deg, #47455d 0%, #323045 97%);
}

.clock .time {
 font-size: 80px;
 text-align: center;
 margin-top: 25px;
 color: #FFFFFF;
 padding: 15px;
}
.clock .date {
  background: #9DD5FF;
  padding: 2px;
  text-align: center;
  font-size: 20px;
  color: #FFFFFF;
  text-shadow: 0px 10px 20px #000000;
  box-shadow: 0px 16px 30px 0px rgba(0, 0, 0, 0.53);
  border-radius: 10px;
}


/**
 * module.width_height
 */
.module.calendar {
  width:450px;
  height: 320px;
}
.module.weatherforecast {
  width:400px;
  height: 220px;
}
.module.currentweather {
  height: 180px;
  width:400px;
  text-align: center;
}

5.Tron

CSS

html {
  cursor: default;
  overflow: hidden;
  background: #000;
}


body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin-bottom: -10px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: rgba( 0, 150, 254, 1 );
  background: transparent;
}

header {
  background: transparent;
  padding: 0.5rem;
  text-align: center;
  font-size: 20px;
  color: rgba( 0, 150, 254, 1 );
  text-shadow: 0 0 30px rgba( 0, 150, 254, .7 ), 0 0 50px rgba( 0, 150, 254, 1 );
  border-bottom: 0.7px solid rgba( 0, 150, 254, 1 );
}
.dimmed {
  color: rgba( 0, 150, 254, 1 );
}

.normal {
  color: rgba( 0, 150, 254, 1 );
}

.bright {
  color: rgba( 0, 150, 254, 1 );
}

/**
 * module.color_border_shadow
 */ 
 .module.clock,
 .module.calendar,
 .module.newsfeed,
 .module.weatherforecast,
 .module.currentweather,
 .module.compliments {
  padding:8px;
  border-radius: 10px;
  border-color: rgba( 0, 150, 254, 1 );
  box-shadow: 0 0 25px 2.5px rgba( 0, 150, 254, .4 );
  background: #000;
}

.clock .time {
 font-size: 80px;
 text-align: center;
 margin-top: 25px;
 color: rgba( 0, 150, 254, 1 );
 padding: 15px;
}
.clock .date {
  background: transparent;
  padding: 5px;
  text-align: center;
  border-bottom: 0.7px solid rgba( 0, 150, 254, 1 );
  color: rgba( 0, 150, 254, 1 );
  text-shadow: 0 0 30px rgba( 0, 150, 254, .7 ), 0 0 50px rgba( 0, 150, 254, 1 );
  font-size: 20px;
}


/**
 * module.width_height
 */
.module.calendar {
  width:450px;
  height: 320px;
}
.module.weatherforecast {
  width:400px;
  height: 220px;
}
.module.currentweather {
  height: 180px;
  width:400px;
  text-align: center;
}

6.White Boxes

CSS

html {
  cursor: default;
  overflow: hidden;
  background: #c4c4c4;
}


body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin-bottom: -10px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: black;
  background: transparent;
}

header {
  background: transparent;
  padding: 0.5rem;
  text-align: center;
  border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
  color: black;
  font-size: 20px;
}
.dimmed {
  color: black;
}

.normal {
  color: black;
}

.bright {
  color: black;
}

/**
 * module.color_border_shadow
 */ 
 .module.clock,
 .module.calendar,
 .module.newsfeed,
 .module.weatherforecast,
 .module.currentweather,
 .module.compliments {
  padding:8px;
  border-radius: 10px;
  box-shadow: 0 15px 20px -15px rgba(0, 0, 0, 0.3), 0 55px 50px -35px rgba(0, 0, 0, 0.3), 0 85px 60px -25px rgba(0, 0, 0, 0.1);
  background: white;
}

.clock .time {
 font-size: 80px;
 text-align: center;
 margin-top: 25px;
 color: black;
 padding: 15px;
}
.clock .date {
  background: transparent;
  padding: 5px;
  text-align: center;
  border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
  color: black;
  font-size: 20px;
}


/**
 * module.width_height
 */
.module.calendar {
  width:450px;
  height: 320px;
}
.module.weatherforecast {
  width:400px;
  height: 220px;
}
.module.currentweather {
  height: 180px;
  width:400px;
  text-align: center;
}

Here is an example .css to change the regions positions. You can move and position the regions freely.

/**
 * Region Definitions.
 */

.region.bottom.bar {
background : gray;
position: absolute;
width: 50%;
}

.region.top.bar {
background : gray;
position: absolute;
width: 50%;
}

.region.top.right {
background : green;
margin-right: 100px;
margin-top: 100px;
}

.region.top.left{
background : red;
margin-left: 100px;
margin-top: 100px;
}

.region.top.center {
background : blue;
*margin-left: 100px;
*margin-top: 100px;
}

.region.bottom.right {
background : green;
margin-right: 100px;
margin-bottom: 100px;
}

.region.bottom.center {
background : blue;
margin-bottom: 100px;
}

.region.bottom.left {
background : red;
margin-left: 100px;
margin-bottom: 100px;
}

.region.third {
background : cyan;
}

.region.middle.center {
background : cyan;
margin-bottom: 100px;
text-align: center;
position: absolute;
width: 45%;
height: 33%;
left: 1100px;
}

.region.upper.third {
background : yellow;
margin-bottom: 100px;
text-align: center;
position: absolute;
width: 45%;
height: 33%;
left: 1100px;
}

.region.lower.third {
background : magenta;
text-align: center;
position: absolute;
width: 45%;
height: 33%;
left: 1100px;
}

I hope this help.

https://github.com/Piranha1605/MMM-CSSswitch

@cyberphox it is MMM-News

A small module with various clocks.

github Link

  {
  	module: "MMM-Watchstore",
  	position: "top_center",
  		config: {
  			url: "modules/MMM-Watchstore/clocks/clock1/index.html",
  			width: "500px",
  			height: "120px",
  	}
  },

To change the clock, change the entry clock1 / clock2 …

I hope this help.

https://github.com/Piranha1605/MMM-CSSswitch

Some time ago I built a module that included the flip clock. MMM-Watchstore

@radioman Versuche mal dein Modul zu verschieben und nicht die ganze Region.

.module.calendar {
background : black;
margin-left: 10px;
margin-top: 130px;
}

@potts-mike yes

@potts-mike
I got it with the calendar, you just have to adjust the CSS.

Here is an example with which entries you can customize it.

}
.CX2 .agenda .eventSub {
	display:none;
}
.CX2 .daily .fullday .eventTime {
	display:none;
	font-size: 18px;
}
.CX2 .slot .event{
	background: inherit;
	font-size: 18px;
}
.CX2 .slot .slotHeader{
	background-color:Transparent;
	text-transform: uppercase;
	font-size: 20px;
	font-weight: 400;
	border-bottom: 1px solid #1ed760;
	line-height: 15px;
	padding-bottom: 5px;
	margin-bottom: 10px;
	color: #999;
}
.CX2 .today .slotHeader * {
	text-transform: uppercase;
	color: #999;
	font-size: 20px;
}
.CX2 .event.fullday {
	color: inherit;
}
.CX2 .slot .slotFooter {
	display: none;
}
.CX2 .event[data-calendar-name="Die Fischers"] {
	border-left: 2px #ce4138 solid;
	border-bottom: 1px solid #424242;
}
.CX2 .event[data-calendar-name="Karate"] {
	border-left: 2px #3288ff solid;
	border-bottom: 1px solid #424242;
}
.CX2 .event[data-calendar-name="Abfall"] {
	border-left: 2px #6bff32 solid;
	border-bottom: 1px solid #424242;
}
.CX2 .slot > .slotContent{
  position:relative;
  width:100%;
  background-image:inherit;
}
.CX2 .event.fullday {
  border-radius:0px;
}

@robertybob
You will need to adjust the size of the modules.

@potts-mike

At first glance, I think that these are the entries attached below.

.sonos ul .art img {
  height: 400px;
}

.MMM-PaprikaMenu .menu .today .meal {
  color: #8a8a8a; 
  font-size: 24px;
}

But it may also be that something is written about the .js or .njk, so have a look

Please post me all three CSS, from the paprika menu, from Sonos and your custom.css, and I’ll get you ready

What you mean is called responsive web design. for example, you could use the tablet in portrait or landscape format and thus adjust the position of the modules.You have to change the index.html for this with the meta name viewport, but with an update the index.html will probably be overwritten.

https://www.w3schools.com/css/css_rwd_intro.asp

@sdetweil
As often as I have to put on my MM right now, your skips are part of life like eating.