MMM-Lunartic

[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

[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…

[Mykle1]

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

Again, I apologize for error.