Help me fix my dashboard (see 1st comment) - Issue with duplicating method with MMM-EveryNews

Sven1894

If you want to do that with the three different Modules you have to do a little change in the MMM-EveryNews.css file of each module:

.MMM-EveryNews .header {
  color: cyan;             /* Color the title text. Default is white. */
  text-align: center;           /* Align the title text. (left, center, right) */
  /*  display: none; */         /* Uncomment if you don't want title text */
}

.MMM-EveryNews .source {
  color: cyan;             /* Color the title text. Default is white. */
  text-align: center;           /* Align the title text. (left, center, right) */
  /*  display: none; */         /* Uncomment if you don't want title text */
}

.MMM-EveryNews .title {
  color: cyan;             /* Color the title text. Default is white. */
  text-align: center;           /* Align the title text. (left, center, right) */
  /*  display: none; */         /* Uncomment if you don't want title text */
}

.MMM-EveryNews .photo {
    width: 350px;             /* Maximum width of image */
    height: 350px
    padding: 0px;             /* Nudge image */
    float: left;              /* Align the picture. (left, center, right) */
}

.MMM-EveryNews .description {
  color: cyan;             /* Color the information. Default is white. */
  text-align: center;           /* Align the information. (left, center, right) */
  font-size: 18px;
/*  display: none; */         /* Uncomment if you don't want descriptive information */
}

For the Module MMM-EveryNews2 you have to chnage .MMM-EveryNews to .MMM-EveryNews2
The same with MMM-EveryNews3 and so on.
I think the modules should have all the same size then.

j-lewis

@sven1894 Awesome I renamed the .css’s in each directory and changed the .MMM-EveryNews .header to .MMM-EveryNews1 .header etc and that did it! Thanks so much!!!

If you don’t mind, and so I can learn from this (have limited .css knowledge), I have a few questions:

Why do you think this worked? (and/or why did it not work before)
Is there another way to do this as it would be a pain to do with every update of the module

I appreciate your time

Sven1894

I’m not a css expert either, but I hope I can explain it to you in an understandable way.

Why do you think this worked? (and/or why did it not work before)

The .MMM-EveryNews is the selector, so for example

.MMM-EveryNews .header {
  color: cyan;             /* Color the title text. Default is white. */
  text-align: center;           /* Align the title text. (left, center, right) */
  /*  display: none; */         /* Uncomment if you don't want title text */
}

wanted to select the header from MMM-EveryNews and set the color to cyan and the the text-align to center.

You renamed the modules to MMM-EveryNews2 and MMM-EveryNews3 but didn’t change the selector in the css file.
So for example in your MMM-EveryNews2 module the css file still wanted to change the header from MMM-EveryNews. But there was nothing with the name MMM-EveryNews, because you changed the Name to MMM-EveryNews2.

I hope this was understandable :grinning_face_with_sweat:

Is there another way to do this as it would be a pain to do with every update of the module

You could copy and paste the css entrys of each module in the custom.css file. (/MagicMirror/css/custom.css). I think that should work.

But I also think adding three different modules is not the best solution. It should somehow be possible to do this by adding the same module three times, but I haven’t been able to figure out how until now. Maybe someone else has an idea, I am also a just MM beginner.
But as long as this works for you, this solution is fine for now.

I am glad I was able to help you. :)

j-lewis

@sven1894 Awesome thanks. So I guess you’re saying every selector has to be unique on a page.

Yip, it’s working! Thanks again!

Sven1894

@j-lewis You are welcome