MMM-Calendar Position

rastaa

Hey guys,
i want to chnge the position of my calendar.
I changed the position of the clock and it works fine, but the calendar keeps loading at the same place.

How can i fix this?

sdetweil

@rastaa tell us more… show us the config setting

rastaa

i edited the custom.css file:

.clock{
position: relative;
left: 100px;
top: 20px;
}

.calendar{
position: relative;
left: 100px;
top: 100px;
}

I changed the pixlenumbers often and nothing changed. The clock works perfectly

sdetweil

@rastaa so, there are 2 position settings…

in config.js is the gross position

in custom .css is smaller adjustments from there…

also, not every module has a BIG definition… calendar has 4

from readme

symbolClass	Add a class to the cell of symbol.
titleClass	Add a class to the title's cell.
timeClass	Add a class to the time's cell.
tableClass

this last one YOU need to name in the config.js
and then USE in the custom.css

you can also use the module position

as shown in index.html

	< div class="region fullscreen below">< div class="container">< /div>< /div>
	< div class="region top bar">
		< div class="container">< /div>
		< div class="region top left">< div class="container">< /div>< /div>
		< div class="region top center">< /div>< /div>
		< div class="region top right">< div class="container">< /div>< /div>
	< /div>
	< div class="region upper third"><div>< /div>< /div>
	< div class="region middle center"><div>< /div>< /div>
	< div class="region lower third"><div>< br/>< /div>< /div>
	< div class="region bottom bar">
		< div class="container">< /div>
		< div class="region bottom left">< div class="container">< /div>< /div>
		< div class="region bottom center"><  div class="container">< /div>< /div>
		< div class="region bottom right">< div class="container">< /div>< /div>
	< /div>
	< div class="region fullscreen above">< div class="container">< /div>< /div>

the space in the names is replaced by an underscore when u use it in config.js
bottom center = bottom_center

rastaa

thank you very much

I am a newbie, sorry for that.

So i have to add all 4 classes in the custom.css and add some pixles ?

I just want the whole calendar to be 100px more to the right.

Mykle1

@rastaa

I just want the whole calendar to be 100px more to the right.

In that case, assuming you mean the default “calendar” module, these values should move the entire module. Adjust to your liking in the custom.css file.

.calendar {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}