Hello all, new guy here. So I’ve read lots of guides and scoured the forums and have a good working MM now. I’m trying to upload a pic but I think my work preventing it, I’ll try from my phone after I post this. I have the clock and weather both in the top bar, side by side. Then below the clock/weather, I have a calendar MMM-CalendarExt3 in the Bottom bar, which makes it take up about 80% of the page. I’m really happy with how it looks, but now I would like to add a module or two to the empty area to the right of my clock and weather.
My custom css is below. As you can see, I found some helpful information and use the relative position for weather and clock, then in the config they are both assigned top bar. When I try adding a MMM-Moon module I can’t seem to figure out how to tweak the relative position so that it is in line with the other modules. I’ve tried copying the info for weather, but changing the top and left values, but all that does is move the moon module low on the screen, and for some reason my weather module overlaps the clock (didn’t change its values).
Anyway, if someone could give me some advise on how to line up those 3 modules across the top, then my calendar below that would be great. The css below is currently working perfect. I also included my config if that helps.
body {
background-Image: url("background.jpg");
background-color: #cccccc;
background-size: 1920;
position: absolute;
margin: 0px;
height: 100%;
width: 100%;
}
.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 {
position: relative;
top: 0px;
height: 100px;
width: 300px;
}
.weather {
position: relative;
top: -125px;
left: 310px;
height: 100px;
width: 300px;
}
.MMM-CalendarExt3 {
width: 100%;
height: 575px;
}
/* MMM-CalendarExt3 */
.CX3 .cw {
display:none;
}
----------------------------------------------------------------------------------------
language: "en",
locale: "en-US",
logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
timeFormat: 12,
units: "imperial",
modules: [
{
module: "alert",
},
{
disabled: true,
module: "updatenotification",
position: "top_bar"
},
{
module: "clock",
position: "top_bar"
},
{
disabled: true,
module: 'MMM-Moon',
position: 'top_bar',
config: {
lat: 35.651,
lon: 78.833,
timezone: "America/New_York"
}
},
{
module: "weather",
position: "top_bar",
config: {
weatherProvider: "openweathermap",
type: "current",
location: "Holly Springs",
locationID: "4471641", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
}
},
{
disabled: true,
module: "weather",
position: "top_right",
header: "Weather Forecast",
config: {
weatherProvider: "openweathermap",
type: "forecast",
location: "Holly Springs",
locationID: "4471641", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
apiKey: "cbbb4aab37f038db12caadaece805ecf"
}
},
{
module: "MMM-CalendarExt3",
position: "bottom_bar",
title: "",
config: {
mode: "",
weekIndex: 0,
weeksInView: 4,
instanceId: "basicCalendar",
locale: 'en-EN',
maxEventLines: 5,
firstDayOfWeek: 0,
calendarSet: ['us_holiday','family']
}
},
{
module: "calendar",
position: "",
config: {
broadcastPastEvents: true,
calendars: [
{
url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
name: "us_holiday",
color: "red"
}
]
}
},
{
module: "calendar",
position: "",
maximumNumberOfDays: 60,
config: {
broadcastPastEvents: true,
calendars: [
{
url: "https://calendar.google.com/calendar/ical/***************/basic.ics",
name: "family",
user: '*-*',
pass: '*-*',
method: 'basic'
}
]
}
},
]
};