Changing Module Display Width

selym

Hi all-

I found a “today in history” type news feed, but the entries are a tad longer than what is displaying. How would I adjust the viewing area for a module? FYI, not a coder/developer/programmer…just a DIY hobbyist that thought this looked like something fun to try. Thanks!

broberg

@selym

in the custom.css

add

.MMM-modulename {
    width : 200px;
}

Be shure to get the module name exactly right (case sensitive and all).
Do experiment with the width, 200px might be to small, it’s just an example to get you started.

johnnyboy

@broberg

… so this will work for any module? Such as clock, calendar etc? Will this keep aspect, or is there another addition for height?

Im not sure how custom css actually works, so excuse if this sounds dumb… but when entering the code in there do i jist hit save and thats it? Is a reboot needed before the alteration shows?

, before or after… just exactly as you put it here?

Tvmia

cowboysdude

If it’s the one I made then it’s this:

In the config.js it’s a config option:

 {
    module: 'MMM-History',
    position: 'top_right',
         config: {
	 maxWidth: "325px"
		}
          },

johnnyboy

@cowboysdude

Perfect thanks

cowboysdude

@johnnyboy said in Changing Module Display Width:

@cowboysdude

Perfect thanks

You’re welcome!

You can also do this:

 {
    module: 'MMM-History',
    position: 'top_right',
         config: {
	 maxWidth: "33%"
		}
          },

broberg

@johnnyboy It will change the height/width of the module “container”, it will not affect the size of objects, images or fonts. Normally the module “container” will adapt to the size of it’s content. but with the width/height specified you force it to be a set width/height.

johnnyboy

@broberg

Ahhhhhhhhh… Gotcha ;-)… reduce the % of the container also reduces it’s contents in relation. Thanks.

broberg

@johnnyboy well, not entirely, the content (text etc.) don’t change in size, all you do is changing the surface that the content can take up.

like moving from a big garage to a small, you still have the same amount of stuff but less area to put it in, so the stuff that doesn’t fit spills over and out on to the yard.

johnnyboy

@broberg
Oh, ok… Well I will play about with it anyway just to see what that does to it… just so I will know for experience as its another learning curve i’ve learned

broberg

@johnnyboy You can do a lot to the Magicmirror and it’s module just by editing the css,

Here is a good reference for CSS : https://www.w3schools.com/css/

And css for beginners : http://www.htmldog.com/guides/css/beginner/

johnnyboy

@cowboysdude said in Changing Module Display Width:

 {
    module: 'MMM-History',
    position: 'top_right',
         config: {
	 maxWidth: "33%"
		}
          },

Oooooo MM didn’t like that :-) So I musta entered something wrong or didn’t enter something I should have? Can you please guide me to what part I did wrong here?

 {
    module: 'MMM-WunderGround',
    position: 'top_left',
         config: {
	 maxWidth: "33%"
		}
          }, 
apikey: 'pws: mydetailshere',
hourly: '1',
fctext: '1'

broberg

@johnnyboy maxWidth isn’t specified for the WunderGround module. So you can’t use the same config option there as you could with MMM-History.

Confusing I know, but most modules don’t use size settings in the config since it’s better to set that with css code.

Custom css-code is put in the file custom.css that can be found in the css folder.

johnnyboy

@broberg

Ah, ok… I was jumping ahead of myself there… so I will try

.MMM-WunderGround {
    width : 200px;
}

200px; or whatever looks good.
Thanks again.

johnnyboy

I changed mines to 250px as that was about maxed out or else it would move the large Moon icon onto top bar and would become 1/3 of its original size and not look right, or look good… so I’m pretty happy at that.

However, I thought to do the same thing to the calendar that’s directly opposite, on the top right…to keep the aspect look… Nope! It wont budge for some reason?
Side effect now is a slight 5 - 7 second load time to WunderGround, Calendar, and News feed on bottom bar… No idea if this is linked or no?No effect at all on Compliments or SimpleLogo.
.Module_calendar {
width : 250px;
}

No idea if this is relevant, but should I have included the calendar header Uk Holidays? My calendar is also linked to Google Calendar so no idea if that could be a reason either why it wont allow width to be adjusted, but thought to mention

broberg

@johnnyboy I think it should be just .calendar not .Module_calendar

johnnyboy

@broberg
ok will try that now… Yes that did it… I didn’t know not to include .Module there… Thought they all had the same command, apart from MMM

deadherring

Hi,

I have my MM configured vertically and a lot of the calendar entries get cut off. I’m trying to widen the calendar.

This is what I’ve added to custom.css but I’m not seeing any change. (sorry, I’m not sure how to make the code show up in a special way the way others do)

body {
.MMM-calendar {
width : 350px;
}
}

Can someone point me in the right direction in terms of what I’m doing wrong?

Thanks,

Nathan

broberg

@deadherring

.calendar {
width : 350px;
}

It’s not supposed to be inside the body{} and since it is a default/stock module it doesn’t use the MMM prefix like other modules does so the class name of the module is just .calendar

deadherring

Thanks @broberg, that worked, I can see that changes I make are taking effect now.

I set the calendar to 450px. However, as you can see from this
picture, the date text just shifted over to the right and is now covering the weather forecast, rather than the text from the calendar entry expanding. What I’m trying to accomplish is to get the full calendar item text to show. Is there a way to do that?

Thanks,

Nathan