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.

    Change default interface colors

    Scheduled Pinned Locked Moved Solved Troubleshooting
    16 Posts 6 Posters 16.4k 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.
    • KirAsh4K Offline
      KirAsh4 Moderator
      last edited by KirAsh4

      A modified one that I haven’t checked into the base code yet. :)

      A Life? Cool! Where can I download one of those from?

      1 Reply Last reply Reply Quote 0
      • 0 Offline
        00conman
        last edited by

        Whatever it is it’s awesome. Good on you man.

        1 Reply Last reply Reply Quote 0
        • KirAsh4K Offline
          KirAsh4 Moderator
          last edited by

          Once I figure out why git(hub) is pulling in all of the erroneous stuff and fix that, I’ll create a pull request so it gets merged.

          A Life? Cool! Where can I download one of those from?

          1 Reply Last reply Reply Quote 0
          • KirAsh4K Offline
            KirAsh4 Moderator
            last edited by

            By the way, that colorful screen capture was simply demonstrating that if you want to edit the default modules, you can, and you can then color them any way you want. In this case, I opened calendar.js and in the 'getStyles' section, I added another file:

                    // Define required scripts.
                    getStyles: function() {
                            return ["calendar.css", "font-awesome.css", "mystyles.css"];
                    },
            

            In this instance, 'mystyles.css' is my custom one, which I then created and added my own colors to the various elements:

            #module_1_clock .time, #module_1_clock .date {
                    color: #99F;
            }
            
            #module_1_clock .dimmed {
                    color: #449;
            }
            
            #module_2_calendar header {
                    color: #F00;
                    border-bottom: 2px solid #600;
            }
            
            #module_2_calendar .title {
                    color: #F99;
            }
            
            #module_2_calendar .time {
                    color: #FBB;
            }
            
            #module_2_calendar .symbol {
                    color: #FF0;
            }

            A Life? Cool! Where can I download one of those from?

            1 Reply Last reply Reply Quote 0
            • KirAsh4K Offline
              KirAsh4 Moderator
              last edited by

              The same approach applies when you’re creating your own custom modules. Keep in mind that if you edit the default files, a future update can overwrite them and you lose your changes.

              A Life? Cool! Where can I download one of those from?

              1 Reply Last reply Reply Quote 0
              • KirAsh4K Offline
                KirAsh4 Moderator
                last edited by

                Also note the warning as stated on the wiki page:
                Note: If a file can not be loaded, the boot up of the mirror will stall.

                Meaning, if you tell getStyles to look for a file called 'myStyles.css' but in reality it’s called 'mystyles.css' (case matters) or 'coolcolor.css', the mirror will stall and not load. So be careful.

                A Life? Cool! Where can I download one of those from?

                1 Reply Last reply Reply Quote 0
                • MichMichM Offline
                  MichMich Admin
                  last edited by

                  you can use the /css/custom.css to overwrite all styles. This file is embedded after all other css files, so you should be able to overwrite what you want. Is just a matter of creative CSS usage.

                  1 Reply Last reply Reply Quote 0
                  • 0 Offline
                    00conman
                    last edited by

                    Okay thank you guys I’ll have to look into it.

                    1 Reply Last reply Reply Quote 0
                    • D Offline
                      dyard @KirAsh4
                      last edited by

                      @KirAsh4 Hi I am setting up my first magic mirror, is this old post still valid? This look is great, I tried to follow and add a custom mystyles.css and added to the same calendar module. But I didn’t see it make a change. Thanks for your help

                      S 1 Reply Last reply Reply Quote 0
                      • S Offline
                        sdetweil @dyard
                        last edited by sdetweil

                        @dyard please, just edit the css/custom.css, don’t change the module code unless u are fixing a bug or adding function (and then don’t tell anyone about it, release a new updated module)

                        https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works?_=1597692865011

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 2 / 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