<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Help with CSS not showing changes on MMM-CalendarExt2]]></title><description><![CDATA[<p dir="auto">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.</p>
<p dir="auto">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.</p>
<p dir="auto">custom.css</p>
<pre><code> body {
	.CX2 .event .personal {
  	color:#ffffff;
  	background-color:#000000;
} 	
	.CX2 .event .personal .fullday {
  	color:#000000;
	background-color:#FFA500;
}
      }
</code></pre>
<p dir="auto">Config.js</p>
<pre><code>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 --&gt; 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;}
</code></pre>
]]></description><link>https://forum.magicmirror.builders/topic/9738/help-with-css-not-showing-changes-on-mmm-calendarext2</link><generator>RSS for Node</generator><lastBuildDate>Wed, 13 May 2026 00:40:51 GMT</lastBuildDate><atom:link href="https://forum.magicmirror.builders/topic/9738.rss" rel="self" type="application/rss+xml"/><pubDate>Fri, 08 Feb 2019 20:26:16 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to Help with CSS not showing changes on MMM-CalendarExt2 on Fri, 08 Feb 2019 22:28:22 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/44mc44" aria-label="Profile: 44mc44">@<bdi>44mc44</bdi></a><br />
No space between ‘personal’ and ‘fullday’<br />
And don’t put in ‘body{}’</p>
]]></description><link>https://forum.magicmirror.builders/post/51895</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/51895</guid><dc:creator><![CDATA[[[global:former-user]]]]></dc:creator><pubDate>Fri, 08 Feb 2019 22:28:22 GMT</pubDate></item><item><title><![CDATA[Reply to Help with CSS not showing changes on MMM-CalendarExt2 on Sun, 10 Feb 2019 18:17:55 GMT]]></title><description><![CDATA[<p dir="auto">For a bit of background on this, nesting CSS as <a class="plugin-mentions-user plugin-mentions-a" href="/user/44mc44" aria-label="Profile: 44mc44">@<bdi>44mc44</bdi></a> has tried to do (known as “CSS scoping”) was proposed for the CSS spec, but browsers were slow to support it, and eventually dropped it altogether.</p>
<p dir="auto">The idea was you could just limit your CSS to a certain selector like follows:</p>
<pre><code>.some-class {
  h1 {
    font-size: 24px;
    color: #ACACAC;
  }

  p {
    font-size: 18px;
  }
}
</code></pre>
<p dir="auto">This would mean that <code>h1</code> and <code>p</code> elements inside an element with the class <code>some-class</code> would have the styles applied, while <code>h1</code> and <code>p</code> elements that are not contained in that class would not.  This would be a safer way to write your CSS to ensure it doesn’t accidentally get applied to unintended elements.</p>
<p dir="auto">Unfortunately, this doesn’t work in any browser, so you have to write out the rules individually to achieve the same thing:</p>
<pre><code>.some-class h1 {
  font-size: 24px;
  color: #ACACAC;
}

.some-class p {
  font-size: 18px;
}
</code></pre>
<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/seann" aria-label="Profile: Seann">@<bdi>Seann</bdi></a> is correct in that if we were using a preprocessor such as SASS or SCSS, then scoping would indeed be supported.  You would write your rules scoped, and then the preprocessor would take care of converting your rules to the long form.  Using a preprocessor helps to make authoring your CSS easier and less verbose.  Alas, Magic Mirror does not appear to use a CSS preprocessor, so we’re stuck with writing it out the long way.</p>
]]></description><link>https://forum.magicmirror.builders/post/52033</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/52033</guid><dc:creator><![CDATA[j.e.f.f]]></dc:creator><pubDate>Sun, 10 Feb 2019 18:17:55 GMT</pubDate></item><item><title><![CDATA[Reply to Help with CSS not showing changes on MMM-CalendarExt2 on Sat, 09 Feb 2019 01:14:51 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/seann" aria-label="Profile: seann">@<bdi>seann</bdi></a> 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.</p>
]]></description><link>https://forum.magicmirror.builders/post/51929</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/51929</guid><dc:creator><![CDATA[44mc44]]></dc:creator><pubDate>Sat, 09 Feb 2019 01:14:51 GMT</pubDate></item><item><title><![CDATA[Reply to Help with CSS not showing changes on MMM-CalendarExt2 on Sat, 09 Feb 2019 00:32:10 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/44mc44" aria-label="Profile: 44mc44">@<bdi>44mc44</bdi></a> Just a suggestion, but you may want to do some research on css using w3 schools or something. The way you attempted to create your css would only work using scss. In standard css you can’t nest the declaration of styles inside of each other. (Not sure how to word it, although i’m pretty certain declaration of styles is wrong.)</p>
]]></description><link>https://forum.magicmirror.builders/post/51909</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/51909</guid><dc:creator><![CDATA[Seann]]></dc:creator><pubDate>Sat, 09 Feb 2019 00:32:10 GMT</pubDate></item><item><title><![CDATA[Reply to Help with CSS not showing changes on MMM-CalendarExt2 on Sat, 09 Feb 2019 00:03:00 GMT]]></title><description><![CDATA[<p dir="auto">Definitely will do. :thumbs_up:</p>
]]></description><link>https://forum.magicmirror.builders/post/51905</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/51905</guid><dc:creator><![CDATA[44mc44]]></dc:creator><pubDate>Sat, 09 Feb 2019 00:03:00 GMT</pubDate></item><item><title><![CDATA[Reply to Help with CSS not showing changes on MMM-CalendarExt2 on Fri, 08 Feb 2019 23:55:52 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/44mc44" aria-label="Profile: 44mc44">@<bdi>44mc44</bdi></a> said in <a href="/post/51896">Help with CSS not showing changes on MMM-CalendarExt2</a>:</p>
<blockquote>
<p dir="auto">There is only one custom.css file correct?</p>
</blockquote>
<p dir="auto">That is correct. It might not be a bad idea to make a backup as you add to it. You never know. :-)</p>
]]></description><link>https://forum.magicmirror.builders/post/51904</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/51904</guid><dc:creator><![CDATA[Mykle1]]></dc:creator><pubDate>Fri, 08 Feb 2019 23:55:52 GMT</pubDate></item><item><title><![CDATA[Reply to Help with CSS not showing changes on MMM-CalendarExt2 on Fri, 08 Feb 2019 23:44:06 GMT]]></title><description><![CDATA[<p dir="auto">Success!<br />
removing ‘body{}’ took care of it.<br />
Appreciate the help!</p>
]]></description><link>https://forum.magicmirror.builders/post/51901</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/51901</guid><dc:creator><![CDATA[44mc44]]></dc:creator><pubDate>Fri, 08 Feb 2019 23:44:06 GMT</pubDate></item><item><title><![CDATA[Reply to Help with CSS not showing changes on MMM-CalendarExt2 on Fri, 08 Feb 2019 22:42:48 GMT]]></title><description><![CDATA[<p dir="auto">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.</p>
]]></description><link>https://forum.magicmirror.builders/post/51896</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/51896</guid><dc:creator><![CDATA[44mc44]]></dc:creator><pubDate>Fri, 08 Feb 2019 22:42:48 GMT</pubDate></item><item><title><![CDATA[Reply to Help with CSS not showing changes on MMM-CalendarExt2 on Fri, 08 Feb 2019 22:28:22 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/44mc44" aria-label="Profile: 44mc44">@<bdi>44mc44</bdi></a><br />
No space between ‘personal’ and ‘fullday’<br />
And don’t put in ‘body{}’</p>
]]></description><link>https://forum.magicmirror.builders/post/51895</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/51895</guid><dc:creator><![CDATA[[[global:former-user]]]]></dc:creator><pubDate>Fri, 08 Feb 2019 22:28:22 GMT</pubDate></item><item><title><![CDATA[Reply to Help with CSS not showing changes on MMM-CalendarExt2 on Fri, 08 Feb 2019 20:58:52 GMT]]></title><description><![CDATA[<p dir="auto">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.</p>
<pre><code>
 body {
	.CX2 .personal {
  	color:#ffffff;
  	background-color:#000000;
} 	
	.CX2 .personal .fullday {
  	color:#000000;
	background-color:#FFA500;
}
      }

</code></pre>
]]></description><link>https://forum.magicmirror.builders/post/51891</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/51891</guid><dc:creator><![CDATA[44mc44]]></dc:creator><pubDate>Fri, 08 Feb 2019 20:58:52 GMT</pubDate></item><item><title><![CDATA[Reply to Help with CSS not showing changes on MMM-CalendarExt2 on Fri, 08 Feb 2019 20:45:44 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/44mc44" aria-label="Profile: 44mc44">@<bdi>44mc44</bdi></a></p>
<p dir="auto">try this.</p>
<pre><code>.CX2 .personal {
...
}

.CX2 .personal.fullday {
...
}
</code></pre>
]]></description><link>https://forum.magicmirror.builders/post/51889</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/51889</guid><dc:creator><![CDATA[[[global:former-user]]]]></dc:creator><pubDate>Fri, 08 Feb 2019 20:45:44 GMT</pubDate></item></channel></rss>