MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.24.0 is available! For more information about this release, check out this topic.

    Separating text from image

    Custom CSS
    2
    6
    719
    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.
    • F
      ForeverBrewing last edited by

      Hi,

      I’m using MMM-Lunartic and it’s great. The only minor issue is that the text goes through the image of the moon, making it difficult to read. I’d like to move the text down (and maybe increase the size too) but have zero understanding of CSS editing. I’ve looked through the .CSS files in the module but cannot find any options that define text position or size.
      Apologies if this is a really silly question!

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

        @ForeverBrewing

        Add these to your custom.css file. Play with 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. */
        }
        

        This pic shows the result of the above

        0_1573770372715_yes.png

        Create a working config
        How to add modules

        F 1 Reply Last reply Reply Quote 1
        • F
          ForeverBrewing @Mykle1 last edited by

          @Mykle1 Thank you kind sir.

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

            @ForeverBrewing

            Forgot something. The maxWidth: "300px", in the config entry will likely have to be increased to accommodate the larger text, unless you want the text to wrap.

            Create a working config
            How to add modules

            1 Reply Last reply Reply Quote 0
            • F
              ForeverBrewing last edited by

              For clarity, the edits have to be in the custom.css file, not in the MMM-Lunartic.css file?

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

                @ForeverBrewing said in Separating text from image:

                For clarity, the edits have to be in the custom.css file, not in the MMM-Lunartic.css file?

                Yes, that’s right. Look at the very first line of that post again. 😆

                Create a working config
                How to add modules

                1 Reply Last reply Reply Quote 0
                • 1 / 1
                • First post
                  Last post
                Enjoying MagicMirror? Please consider a donation!
                MagicMirror created by Michael Teeuw.
                Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                This forum is using NodeBB as its core | Contributors
                Contact | Privacy Policy