Looking for some help with positioning modules

[bobbylx]

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'
			}
				]
			}
	},
]

};

[BKeyport]

@bobbylx Here’s an example of the base to do it, put in your custom.css, with the modules you’d like to display, then use the module’s own CSS as a template in custom.css to work it further.

/* adjust modules to display side by side */
.MMM-ValuesByNotification, .MMM-OpenWeatherForecast {
	display: inline-flex;
	margin-right: 5px;
	margin-left: 5px;
}

[bobbylx]

@BKeyport said in Looking for some help with positioning modules:

@bobbylx Here’s an example of the base to do it, put in your custom.css, with the modules you’d like to display, then use the module’s own CSS as a template in custom.css to work it further.

/* adjust modules to display side by side */
.MMM-ValuesByNotification, .MMM-OpenWeatherForecast {
	display: inline-flex;
	margin-right: 5px;
	margin-left: 5px;
}

Awesome! This was exactly what I needed, appreciate the help.

[BKeyport]

@bobbylx just a FYI - you’ll need to refer to the modules in the order they’re loaded everywhere if you rearrange, you might be in trouble. ;)