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.

    Separating text from image

    Scheduled Pinned Locked Moved Custom CSS
    6 Posts 2 Posters 1.2k Views 2 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.
    • F Offline
      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!

      Mykle1M 1 Reply Last reply Reply Quote 0
      • Mykle1M Offline
        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 Offline
          ForeverBrewing @Mykle1
          last edited by

          @Mykle1 Thank you kind sir.

          Mykle1M 1 Reply Last reply Reply Quote 0
          • Mykle1M Offline
            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 Offline
              ForeverBrewing
              last edited by

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

              Mykle1M 1 Reply Last reply Reply Quote 0
              • Mykle1M Offline
                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. :laughing:

                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 Sam, technical setup by Karsten.
                This forum is using NodeBB as its core | Contributors
                Contact | Privacy Policy