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 15.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.
    • 0 Offline
      00conman
      last edited by paviro

      Just wondering, where would I go to change rgb values for the colors on the screen or if the aren’t rgb values then are they hexidecimal?

      paviroP 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
        • paviroP Offline
          paviro Admin @00conman
          last edited by paviro

          @00conman what exactly do you mean? Do you want to for example change a text color?

          Another note: Please use a title for new topics that consists of more than just one word so people know what it is about! I chanced it for you this time :)

          We're all stories in the end. Just make it a good one, eh?

          – The Doctor

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

            Assuming you’re simply talking about the elements on the display, one possible way is to use a custom CSS file, where you over ride the colors of the various elements.

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

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

              I’m asking in reference to the color of the text.

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

                For custom modules that you create, you can use the getStyles method to assign a custom CSS file so you can override the colors to whatever you want. For the current, default modules, I think those are hard coded styles. I suppose you can always edit those files should you really want to.

                0_1462842891241_Colors.png

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

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

                  I’ll look into it. By the way what calendar are you using?

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