Read the statement by Michael Teeuw here.
how to make just 1 module bigger?
-
hey, I was using the default weather module and I changed it to only pull up 6 things from my calendar. I was able to successfully fo that but now I want the calendar module to be a lot bigger but keep the size of everything else the same. how would I be able to do that?
-
@aarish you can reference every module as a css element using its name as class.
in this case it is.calendar
in custom.css
.calendar { width: 500px; height: xxxpx; }
But note that all other modules are automatically set with
width: 100%
so will adept their width… -
@lavolp3 Thank you so much, this helps a lot!
-
Hello, I am using Bugsonet’s MMM-Weather module and wanted to make the data bigger. I wrote the same thing as above in custom.css besides changing .calendar to .MMM-Weather. I noticed that when I changed the width it made the module move left and right. I also noticed that changing the Height value did not effect anything. Any idea how to make it bigger?
-
hello, I made it like this
/*
- MMM-Weather custom
*/
.MMM-Weather .wrapper.tiled .forecast-container .forecast-item .time,
.MMM-Weather .wrapper.tiled .forecast-container .forecast-item .day-name {
font-size: 22px !important;
}.MMM-Weather .wrapper.tiled .forecast-container .forecast-item .temperature,
.MMM-Weather .wrapper.tiled .forecast-container .forecast-item .temperature-container {
font-size: 26px !important;
}.MMM-Weather .wrapper.tiled .forecast-container .forecast-item .precipitation-container,
.MMM-Weather .wrapper.tiled .forecast-container .forecast-item .wind-container {
font-size: 22px !important;
}.MMM-Weather .wrapper.table .forecast-container {
font-size: 22px !important;
}.MMM-Weather .wrapper.table .forecast-container .forecast-item > span,
.MMM-Weather .wrapper.table .forecast-container .header-row > span {
font-size: 22px !important;
}.MMM-Weather .wrapper.table .forecast-container .header-row > span {
font-size: 17px !important;
}.MMM-Weather .wrapper.table .forecast-container .header-row .temperature-header {
font-size: 22px !important;
}.MMM-Weather .current-conditions-wrapper .icon {
width: 180px;
height: 180px;
}
.MMM-Weather .inline-icon,
.MMM-Weather .wrapper.tiled .forecast-container .forecast-item .inline-icon {
width:45px;
height: 45px;}
.MMM-Weather .extra-current-conditions-wrapper .feels-sun-container .inline-icon {
width: 26px;
height: 26px;
}
.MMM-Weather .wrapper.tiled .forecast-container .forecast-item .forecast-icon {
width: 80px;
height: 80px;
}
.MMM-Weather .wrapper.table .forecast-container .forecast-item .forecast-icon {
width: 50px;
height: 50px; - MMM-Weather custom
-
This is amazing, thank you so much!