<![CDATA[Separating text from image]]>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!

]]>https://forum.magicmirror.builders/topic/11597/separating-text-from-imageRSS for NodeWed, 12 Aug 2026 21:34:41 GMTThu, 14 Nov 2019 20:22:20 GMT60<![CDATA[Reply to Separating text from image on Thu, 14 Nov 2019 23:58:07 GMT]]>@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:

]]>https://forum.magicmirror.builders/post/64457https://forum.magicmirror.builders/post/64457Thu, 14 Nov 2019 23:58:07 GMT<![CDATA[Reply to Separating text from image on Thu, 14 Nov 2019 22:35:05 GMT]]>For clarity, the edits have to be in the custom.css file, not in the MMM-Lunartic.css file?

]]>https://forum.magicmirror.builders/post/64456https://forum.magicmirror.builders/post/64456Thu, 14 Nov 2019 22:35:05 GMT<![CDATA[Reply to Separating text from image on Thu, 14 Nov 2019 22:34:34 GMT]]>@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.

]]>https://forum.magicmirror.builders/post/64455https://forum.magicmirror.builders/post/64455Thu, 14 Nov 2019 22:34:34 GMT<![CDATA[Reply to Separating text from image on Thu, 14 Nov 2019 22:30:32 GMT]]>@Mykle1 Thank you kind sir.

]]>https://forum.magicmirror.builders/post/64454https://forum.magicmirror.builders/post/64454Thu, 14 Nov 2019 22:30:32 GMT<![CDATA[Reply to Separating text from image on Thu, 14 Nov 2019 22:26:21 GMT]]>@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

]]>https://forum.magicmirror.builders/post/64452https://forum.magicmirror.builders/post/64452Thu, 14 Nov 2019 22:26:21 GMT