MMM-CalendarExt3 formatting tweaks

bobbylx

Hello all, just have 2 questions that have me stumped.

I would like to have the modules across the top lined up, and preferably same sized backgrounds. I’ve tried adjusting the margins, but for some reason cannot make the Moon phase and Lesson plan module move up. Any suggestions?
Can someone tell me where to add padding or what margin to adjust to add space between my individual events? thanks in advance.

bobbylx

By the way, here is my custom.css so you can see what changes I’ve tried.

body {
        background-Image: url("background.jpg");
        background-size: cover;
        position: absolute;
        margin: 0px;
        height: 100%;
        width: 100%;
}
header {
  border-bottom: none;
  color: #616161;
}
.wi.dimmed.wi-sunset {
color: orange;
}
.wi.dimmed.wi-sunrise {
color: yellow;
}
.wi-day-sunny {
color: yellow;
}
.wi-day-cloudy {
color: yellow;
}
.wi-rain {
color: grey;
}
.wi-thunderstorm {
color: grey;
}
.wi-snow {
color: white;
}
.wi-fog {
color: white;
}
.wi-night-clear {
color: white;
}
.wi-night-cloudy {
color: grey;
}
.wi-night-showers {
color: blue;
}
.wi-night-rain {
color: blue;
}
.wi-thunderstorm {
color: yelow;
}
.wi-night-snow {
color: white;
}
.wi-night-alt-cloudy-windy {
color: grey;
}
.clock, .weather, .MMM-MoonPhase, .MMM-WeeklySchedule {
	display: inline-flex;
	margin-right: 25px;
	margin-left: 25px;
	margin-top: 0;
}
.lessontime {
     text-align: right;
     white-space: nowrap;
     padding-right: 2em;
     width: 1ex;
     font-size: 27px;
     color: #616161;   
 }

 .lesson{
     text-align: left;
     font-size: 27px;
     color: #616161;
 }

.MMM-CalendarExt3, .clock, .weather, .MMM-MoonPhase, .MMM-WeeklySchedule {
      background-color:rgba(255, 255, 255,0.6);
      border-radius:20px;
      padding: 8px;
      color: #616161;
      margin-top: 0;	
 } 
.CX3 .cell {
  border: 1px solid var(--celllinecolor);
  background-color: var(--cellbgcolor);
  height: calc(
    var(--cellheaderheight) + var(--cellfooterheight) +
      calc(var(--eventheight) * var(--maxeventlines))
  );
}
.CX3 .weekGrid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(7, [cell-start] 1fr [cell-end]);
  grid-auto-columns: 0fr;
  margin-top: 5px; /* ADD THIS*/
}

.CX3 .cw {
	display:none;
}
.CX3 .cellContainer .cell:nth-child(1) .cw {
  display: none;
}
.CX3 .cw::before {
        display: none;
}
.CX3 .event.singleday .headline:not(.useSymbol)::before {
  display: none;
}
.CX3 .event.singleday:not(.useSymbol)::before {
  content: '';
}
.CX3 .event.singleday {
  border-left:6px solid var(--calendarColor);
  color: #616161;
}
.CX3 .cell.today {
  border: 2px solid #fff; /* default was 1px, so you can change to 2px or whatever */
}
.CX3 .thisMonth {
  background-color: rgb(255 255 255 / 10%);
}

sdetweil

@bobbylx i cannot help w specifics, only tools

use the developers window, elements tab to examine and test css style changes you can then put in custom.css.

you can examine the styles set for each and decide how to
make one set for all

see the second link in my signature below

on the ext3

there is lineheight and eventheight
see the readme