MMM-CalendarExt2

Turtle

This weekend I’m going to be working some more on the MM especially the CSS to get the calendars the way I want. So, I’m going to be making the “custom.css” file. Which of the current “.css” file am I going to us to fill the “custom.css” file? Also, on the next updating of MM am I going to lose the “custom.css” file?

Turtle

sdetweil

@Turtle no. Custom.css is no longer tracked, so u won’t lose it. The updater script also saves it.

Custom.css starts out empty, so u add whatever u need.

BKeyport

@Turtle find what you want to modify in the existing css files, then copy them over to custom.css - example:


/* Bottom Bar Adjustments */
.region.bottom.bar {
	background-color:rgba(0,0,0,.90);
}

/* Left adjustments */
.region.left {
	text-align: center;
}

Turtle

Thank you @sdetweil and @BKeyport for the information.

BKeyport

@Sean Is there a way to center the title for “daily” view? Normally, I’d just use .css for the region, but that doesn’t work with your module.

Thanks!

A Former User

@BKeyport
@BKeyport
what kind of title? event title like this?

.CX2 .daily .eventTitle {
  text-align:center;
}

Marcel1803

Hi,
i’m looking for a daily view with 5 days in one row/line. The default for the daily-view seems to be one day per row.
Is there a possibility to show the days in one row?

I also tried the week-vie

Thanks,
Marcel

A Former User

@Marcel1803

views: [
  {
    mode: "daily",
    type: "row",
    position:"bottom_bar",
    slotCount: 5,
    ...

Maybe some additional CSS adjusting might be needed for your environment, but basic concept is that.

BKeyport

@Sean No… I can’t post screen shots, but the overall title at the top of the view referenced here:

views: [
		{
			mode: "daily",
			**title: "Upcoming Events",**
			...

A Former User

@BKeyport

As you can see in the bottom region, module header will respect the region align itself by default.
Usually, if you want to override the align of module header of a specific module, you can just do like this;

.MMM-CalendarExt2 header.module-header {
  text-align:center;
}

This CalendarExt2 is using a trick of fake-module for each view, so above CSS rule would make module header of all views to text-align:center;

If you want to specify the view in some region, Check this. (See the red titled view on the top right corner)

.region.top.right .MMM-CalendarExt2 header.module-header {
  text-align:left;
  color:#F00;
  font-weight:bold;
}

Be careful about white-space between CSS selectors.