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.

    MMM-Lunartic

    Scheduled Pinned Locked Moved Education
    266 Posts 30 Posters 476.5k Views 29 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.
    • Mykle1M Offline
      Mykle1 Project Sponsor Module Developer @BD0G
      last edited by

      @BD0G

      These entries in your custom.css file should help you with that. Adjust the values to your satisfaction

      .MMM-Lunartic .xsmall.bright {
        font-size:22px;
      }
      
      .MMM-Lunartic img.photo {
      /*  display: none;              uncomment if you don't want an image */
        width: 100%;                /* adjust size of moon picture */
        margin-left: 0px;          /* Precisely align moon picture with these */
        margin-right: 0px;
        margin-top: 0px;         /* -41px for current. -21px for animation or static. */
        margin-bottom: -11px;      /* -51px for current. -21px for animation or static. */
      }
      

      Create a working config
      How to add modules

      B 1 Reply Last reply Reply Quote 0
      • B Offline
        BD0G @Mykle1
        last edited by BD0G

        @Mykle1 Thanks.

        I have currently adjusted those settings from within my Lunartic.css file and they do change where the text and moon image are positioned. I cannot find a way to remove the horizontal line over the moon image.

        I currently only have a main.css file, but I am assuming I can just create a blank custom.css file and place it in the MagicMirror/css directory and that will work?

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

          @BD0G said in MMM-Lunartic:

          I cannot find a way to removed the horizontal line over the moon image.

          Can you post a pic of the “horizontal line over the moon image?” I assume you’re not talking about the text.

          I currently only have a main.css file, but I am assuming I can just create a blank custom.css file and place it in the MagicMirror/css directory and that will work?

          You should already have a custom.css file in your css folder. Any modifications to css should be done within that file. It is not recommended that you make any changes to the main.css file.

          Create a working config
          How to add modules

          B 1 Reply Last reply Reply Quote 0
          • B Offline
            BD0G @Mykle1
            last edited by BD0G

            @Mykle1

            I have no custom.css file that was created during the install. I used the new installer script from @sdetweil when I installed my MagicMirror software.

            Here is a picture of the line I am referring to. It is below the text and above the moon image.
            https://www.dropbox.com/s/k1un0q2ofu6w02c/20191118_161043.jpg?dl=0

            I think a centered text that reads “Moon Phase” and no line would be more aesthetically pleasing.

            S cowboysdudeC Mykle1M 3 Replies Last reply Reply Quote 0
            • S Offline
              sdetweil @BD0G
              last edited by sdetweil

              @BD0G there is one in ~/MagicMirror/css, it used to contain this

              /*****************************************************
               * Magic Mirror                                      *
               * Custom CSS                                        *
               *                                                   *
               * By Michael Teeuw http://michaelteeuw.nl           *
               * MIT Licensed.                                     *
               *                                                   *
               * Add any custom CSS below.                         *
               * Changes to this files will be ignored by GIT. *
               *****************************************************/
              
               body {
               	
               }
              

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              B 1 Reply Last reply Reply Quote 0
              • B Offline
                BD0G @sdetweil
                last edited by BD0G

                @sdetweil Sam - Where is this file located . I have looked and looked.

                Here is the only file listed under MagicMirror/css

                0_1574122596527_554b7e43-1dd0-49cc-b521-ac993fbf5472-image.png

                S 2 Replies Last reply Reply Quote 0
                • S Offline
                  sdetweil @BD0G
                  last edited by

                  @BD0G

                  ~/MagicMirror/css

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

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

                    @BD0G weird… its still part of the repo, so it should have been installed

                    I just checked and did a git clone, and the file is present

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    B 1 Reply Last reply Reply Quote 0
                    • B Offline
                      BD0G @sdetweil
                      last edited by

                      @sdetweil Strangeness! I guess I will just create a file in that directory and name it custom.css and then paste in the code you posted above.

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

                        @BD0G yep… then add the lines Mykle1 gave you, inside the braces

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        1 Reply Last reply Reply Quote 0
                        • B Offline
                          BD0G
                          last edited by

                          :thumbsup

                          1 Reply Last reply Reply Quote 0
                          • cowboysdudeC Offline
                            cowboysdude Module Developer @BD0G
                            last edited by

                            This post is deleted!
                            1 Reply Last reply Reply Quote 0
                            • Mykle1M Offline
                              Mykle1 Project Sponsor Module Developer @BD0G
                              last edited by

                              @BD0G said in MMM-Lunartic:

                              I think a centered text that reads “Moon Phase” and no line would be more aesthetically pleasing.

                              Ohhhhh, the header underline!!!

                              When you do get a custom.css file, try this (outside the body)

                              body {
                              }
                              
                              MMM-Lunartic .header {
                                border-bottom: none;
                              }

                              Create a working config
                              How to add modules

                              1 Reply Last reply Reply Quote 0
                              • B Offline
                                BD0G
                                last edited by

                                I tried your suggestion (thanks) and the top header line is still showing. Here is the contents of my custom.css

                                /*****************************************************
                                 * Magic Mirror                                      *
                                 * Custom CSS                                        *
                                 *                                                   *
                                 * By Michael Teeuw http://michaelteeuw.nl           *
                                 * MIT Licensed.                                     *
                                 *                                                   *
                                 * Add any custom CSS below.                         *
                                 * Changes to this files will be ignored by GIT. *
                                 *****************************************************/
                                
                                 body {
                                 	.MMM-Lunartic .xsmall.bright {
                                  font-size:22px;
                                }
                                
                                .MMM-Lunartic img.photo {
                                /*  display: none;              uncomment if you don't want an image */
                                  width: 100%;                /* adjust size of moon picture */
                                  margin-left: 0px;          /* Precisely align moon picture with these */
                                  margin-right: 0px;
                                  margin-top: 0px;         /* -41px for current. -21px for animation or static. */
                                  margin-bottom: -11px;      /* -51px for current. -21px for animation or static. */
                                }
                                MMM-Lunartic .header {
                                  border-bottom: none;
                                }
                                
                                S 1 Reply Last reply Reply Quote 0
                                • S Offline
                                  sdetweil @BD0G
                                  last edited by

                                  @BD0G said in MMM-Lunartic:

                                  MMM-Lunartic .header {
                                  missing the dot in front of MMM-Lunartic

                                  Sam

                                  How to add modules

                                  learning how to use browser developers window for css changes

                                  B 1 Reply Last reply Reply Quote 1
                                  • B Offline
                                    BD0G @sdetweil
                                    last edited by

                                    @sdetweil Strangely the line is still there and I just copied and pasted from @Mykle1 post above and since it was missing the period thats how it landed in my custom.css.

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

                                      @BD0G

                                      My bad. Sorry about that missing dot. Thanks to @sdetweil for spotting the mistake.

                                      Create a working config
                                      How to add modules

                                      B 1 Reply Last reply Reply Quote 0
                                      • B Offline
                                        BD0G @Mykle1
                                        last edited by

                                        @Mykle1 I guess Im stuck with the line…

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

                                          @BD0G said in MMM-Lunartic:

                                          I guess Im stuck with the line…

                                          No, here it is. I just tested it. I’m sorry if I gave you bad info earlier. Forgive me? :-)

                                          Goes into your custom.css file, exactly as written. NO DOT BEFORE “header”. Guaranteed!

                                          .MMM-Lunartic header {
                                            border-bottom: none;
                                            text-align: center;
                                            color: cyan;
                                          }
                                          

                                          Proof!
                                          0_1574221010114_Screenshot from 2019-11-19 22-33-28.png

                                          Again, I apologize for error.

                                          Create a working config
                                          How to add modules

                                          B 1 Reply Last reply Reply Quote 1
                                          • B Offline
                                            BD0G @Mykle1
                                            last edited by

                                            @Mykle1 I forgive you. LOL! Actually I praise your willingness to respond with such a helpfulness! I just copied and pasted directly from your code to my custom.css and …
                                            Drumroll please…

                                            Nope! No change?

                                            Its as if the custom.css file is not being recognized.

                                            Here is the entire contents of my custom.css file

                                            /*****************************************************
                                             * Magic Mirror                                      *
                                             * Custom CSS                                        *
                                             *                                                   *
                                             * By Michael Teeuw http://michaelteeuw.nl           *
                                             * MIT Licensed.                                     *
                                             *                                                   *
                                             * Add any custom CSS below.                         *
                                             * Changes to this files will be ignored by GIT. *
                                             *****************************************************/
                                            
                                             body {
                                             	.MMM-Lunartic .xsmall.bright {
                                              font-size:28px;
                                            }
                                            
                                            .MMM-Lunartic img.photo {
                                            /*  display: none;              uncomment if you don't want an image */
                                              width: 100%;                /* adjust size of moon picture */
                                              margin-left: 0px;          /* Precisely align moon picture with these */
                                              margin-right: 0px;
                                              margin-top: 0px;         /* -41px for current. -21px for animation or static. */
                                              margin-bottom: -11px;      /* -51px for current. -21px for animation or static. */
                                            
                                              .MMM-Lunartic header {
                                              border-bottom: none;
                                              text-align: center;
                                              color: cyan;
                                            }
                                            .module.MMM-AlexaControl{
                                            .img{
                                            height: 30px;
                                            width: 30px;
                                            }
                                            }
                                            
                                            Mykle1M 2 Replies Last reply Reply Quote 0

                                            Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                                            Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                                            With your input, this post could be even better 💗

                                            Register Login
                                            • 1
                                            • 2
                                            • 7
                                            • 8
                                            • 9
                                            • 10
                                            • 11
                                            • 12
                                            • 13
                                            • 14
                                            • 9 / 14
                                            • 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