MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Help with CSS not showing changes on MMM-CalendarExt2

    Scheduled Pinned Locked Moved Solved Development
    11 Posts 5 Posters 3.7k Views 5 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • 4 Offline
      44mc44
      last edited by

      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;}
      
      ? S 2 Replies Last reply Reply Quote 0
      • ? Offline
        A Former User
        last edited by A Former User

        @44mc44
        No space between ‘personal’ and ‘fullday’
        And don’t put in ‘body{}’

        1 Reply Last reply Reply Quote 0
        • ? Offline
          A Former User @44mc44
          last edited by

          @44mc44

          try this.

          .CX2 .personal {
          ...
          }
          
          .CX2 .personal.fullday {
          ...
          }
          
          1 Reply Last reply Reply Quote 0
          • 4 Offline
            44mc44
            last edited by

            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;
            }
                  }
            
            
            1 Reply Last reply Reply Quote 0
            • ? Offline
              A Former User
              last edited by A Former User

              @44mc44
              No space between ‘personal’ and ‘fullday’
              And don’t put in ‘body{}’

              1 Reply Last reply Reply Quote 0
              • 4 Offline
                44mc44
                last edited by

                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.

                Mykle1M 1 Reply Last reply Reply Quote 0
                • 4 Offline
                  44mc44
                  last edited by

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

                  1 Reply Last reply Reply Quote 0
                  • Mykle1M Offline
                    Mykle1 Project Sponsor Module Developer @44mc44
                    last edited by

                    @44mc44 said in Help with CSS not showing changes on MMM-CalendarExt2:

                    There is only one custom.css file correct?

                    That is correct. It might not be a bad idea to make a backup as you add to it. You never know. :-)

                    Create a working config
                    How to add modules

                    1 Reply Last reply Reply Quote 0
                    • 4 Offline
                      44mc44
                      last edited by

                      Definitely will do. :thumbs_up:

                      1 Reply Last reply Reply Quote 0
                      • S Offline
                        Seann Module Developer @44mc44
                        last edited by

                        @44mc44 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.)

                        4 1 Reply Last reply Reply Quote 0
                        • 4 Offline
                          44mc44 @Seann
                          last edited by

                          @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.

                          1 Reply Last reply Reply Quote 1
                          • 1
                          • 2
                          • 1 / 2
                          • First post
                            Last post
                          Enjoying MagicMirror? Please consider a donation!
                          MagicMirror created by Michael Teeuw.
                          Forum managed by Sam, technical setup by Karsten.
                          This forum is using NodeBB as its core | Contributors
                          Contact | Privacy Policy