MMM-Lunartic

Stoffbeuteluwe

@Mykle1 Thanks for helping and your nice modules

BD0G

I am using the current view of the moon. I have the module working. I just need to remove the line over the moon image and center the text that states “Moon Phase” to line it up in the center over the moon image.

Mykle1

@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. */
}

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?

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.

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.

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 {
 	
 }

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

sdetweil

@BD0G

~/MagicMirror/css

sdetweil

@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

BD0G

@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.

sdetweil

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

BD0G

:thumbsup

cowboysdude

This post is deleted!

Mykle1

@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;
}

BD0G

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;
}

sdetweil

@BD0G said in MMM-Lunartic:

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

BD0G

@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.

Mykle1

@BD0G

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

BD0G

@Mykle1 I guess Im stuck with the line…