@seann Will check it out. Thanks! This is all really new to me. I read through the CSS 101 in this forum, but I could definitely use more help.

@seann Will check it out. Thanks! This is all really new to me. I read through the CSS 101 in this forum, but I could definitely use more help.

Definitely will do. :thumbs_up:

Success!
removing ‘body{}’ took care of it.
Appreciate the help!

Just had another thought. There is only one custom.css file correct? The file I am using was existing and is in MagicMirror/css . Just making sure I’m not supposed to be creating a new custom.css file in the MMM-CalendarExt2 module folder instead.

Made the following changes but no luck. After I save the file, I run pm2 restart mm correct? I can see the screen refresh with any changes. Just making sure I’m not missing a step.

 body {
	.CX2 .personal {
  	color:#ffffff;
  	background-color:#000000;
} 	
	.CX2 .personal .fullday {
  	color:#000000;
	background-color:#FFA500;
}
      }

This is my first pi project and most of it is working well, but I’m struggling to figure out how to make my custom.css file to show the changes on the MM. I created a className of “personal” in the config.js and am trying to change the appearance in custom.css. I’m simply trying to make the personal calendar items look different than the others. I’ve read the wiki and searched for examples in the forum, but I’m at a loss. Appreciate anyone that can help point me in the right direction.

Here is custom.css. I don’t really understand what the .CX2 is but I saw it on several related posts so I tried it. I also tried without it, but no luck either way. It seems like it’s just not applying anything in this file so I’m hoping it’s just something basic that I’m missing.

custom.css

 body {
	.CX2 .event .personal {
  	color:#ffffff;
  	background-color:#000000;
} 	
	.CX2 .event .personal .fullday {
  	color:#000000;
	background-color:#FFA500;
}
      }

Config.js

var config = {
	address: "localhost", // Address to listen on, can be:
	                      // - "localhost", "127.0.0.1", "::1" to listen on loopback interface
	                      // - another specific IPv4/6 to listen on a specific interface
	                      // - "", "0.0.0.0", "::" to listen on any interface
	                      // Default, when address config is left out, is "localhost"
	port: 8080,
	ipWhitelist: [], // Set [] to allow all IP addresses
	                                                       // or add a specific IPv4 of 192.168.1.5 :
	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
	                                                       // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

	language: "en",
	timeFormat: 12,
	units: "imperial",

	modules: [
		{
  module: 'MMM-CalendarExt2',
  config: {
    calendars : [
      {
	name: "Personal",
	url: "https://calendar.google.com/calendar/ical/***********************/basic.ics",
	icon: "noto-ice-hockey",
	className: "personal",
	scanInterval: 5*60*1000,
      },
      {
	name: "Ducks Schedule",
        url: "http://ducks.ice.nhl.com/schedule/full.ics",
      },
      {
	name: "Sharks Schedule",
	url: "http://sharks.ice.nhl.com/schedule/full.ics",
	classname: "sharks",
      },
    ],
    views: [
      {
        mode: "daily",
      },
      {
   	mode: "month",
    	position: "fullscreen_below",
    	calendars: [],
  },
    ],
    scenes: [
      {
        name: "DEFAULT",
      },
    ],
  },
},
	
	]

};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}