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

[j-lewis]

I’m trying to create an apple news like feed by having multiple instances of MMM-EveryNews at the bottom of my screen.
Here is what I did

1. I duplicated the module folder in the \module folder to create \MMM_EveryNews1, \MMM_EveryNews2, …3
2. I renamed the .js file in each directory
3. I edited the .js file to register different module name
   I tried to call the module three times at three different locations (bottom_left, bottom_right…) with the same identical parameters, but unfortunately, after the first module (no matter what source I put in it) anything after the first module is magnified. (same parameters etc).
   I didn’t change or rename the .css
   If I call the same module 3 times (i.e. just call the original module) then the sizing is ok.
   How can I debug???
   Also, if you’ve built a good news/stock dashboard, please send me a screenshot
   Thanks!

[Sven1894]

Why don’t you jsut call the same module 3 times?

[j-lewis]

@sven1894 When I call the same module 3 times with different news sources, it displays 3 copies the content of just one of sources (usually the first one). I guess it wasn’t designed to be called three times with the same source. The formatting however doesn’t get screwed up.

Making copies of it and renaming the copies gets it to display the three different news sources fine but is screws up the formatting (even when I configure them all to display the same source)

[Sven1894]

@j-lewis can you show me your config file when you try to add the same module 3 times?

[j-lewis]

@sven1894 sure. basically it’s this without the numbers (so just MMM_EveryNews)

basically I’ve tried every permutation

• called MMM_EveryNews three times with three different news sources (displays correctly formatted, but displays same news source)
• called three copies of MMM_EveryNews with three different news sources (displays incorrectly formatted, and displays 3 news sources)
• called MMM_EveryNews three times with same news source (displays correctly formatted, and displays same news source)
• called three copies of MMM_EveryNews with same news source
  (displays incorrectly formatted, and displays same news source) SCREENSHOT AND CODE

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

1. Why do you think this worked? (and/or why did it not work before)
2. 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.

1. 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:

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