MMM-NewsFeed multiple instances

[Egnos]

@sdetweil said in MMM-NewsFeed multiple instances:

so would have to rename the css file and change the response to getStyles to the new name…

Below the “MMM-NewsFeed2.css” file contained in the module but I can’t find "getStyles ":

/* Magic Mirror
 * Module: NewsFeed
 *
 * By @bugsounet -- Dupont Cédric <bugsounet@bugsounet.fr>
 * MIT Licensed.
 */

#NEWSFEED_CONTENER {
  line-height:1.1em;
  width: 100%;
}

#NEWSFEED_CONTENER.showArticle {
  opacity: 1;
  transition: opacity 1s linear;
}

#NEWSFEED_CONTENER.hideArticle {
  opacity: 0;
  transition: opacity 1s linear;
}

#NEWSFEED_TITLE {
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#NEWSFEED_ARTICLE {
  font-size: 90%;
  display: flex;
}

#NEWSFEED_CONTENT {
  padding: 10px;
  margin-top: 1px;
  font-size: 70%;
  text-align: left;
  height: 80px;
  display: flex;
}

#NEWSFEED_IMAGE {
  margin-right: 10px;
  float: left;
  max-width: 10vw;
  max-height: 10vh;
  text-align: left;
}

#NEWSFEED_DESCRIPTION {
  opacity: 0;
  line-height: 25px;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

#NEWSFEED_DESCRIPTION.showArticle {
  animation: 3s ease 0s normal forwards 1 fadein;
}

@keyframes fadein{
  0%   { opacity:0; }
  66%  { opacity:0; }
  100% { opacity:1; }
}

#NEWSFEED_DESCRIPTION.hideArticle {
  opacity: 1;
  animation: none;
}

#NEWSFEED_FOOTER {
  text-align:right;
}

#NEWSFEED_LOGO {
  font-size: 100%;
  font-weight: bold;
  display: flex;
}

#NEWSFEED_LOGO_PARTA {
  margin-left: 10px;
}

#NEWSFEED_LOGO_PARTB {
  margin-right: 10px;
}

#NEWSFEED_SOURCE {
  margin-right: 8px;
  font-weight: bold;
  margin-top: -9px;
  margin-bottom: 5px;
  text-align: left;
}

#NEWSFEED_SOURCE.start {
  animation-duration: .8s;
  animation-name: clignoter;
  animation-iteration-count: 2;
  transition: none;
  animation-delay: 1s;
}

#NEWSFEED_SOURCE.stop {
  animation-name: stopclignoter;
  animation-iteration-count: 1;

}

@keyframes clignoter {
  0%   { opacity:1; }
  40%  { opacity:0; }
  100% { opacity:1; }
}

@keyframes stopclignoter {
  0%   { opacity:1; }
}

#NEWSFEED_TIME {
  font-size: 50%;
  text-align: right;
  display: inline-block;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: -5px;
}

#NEWSFEED_INFO {
  width: 100%;
  height: 110px;
}

#NEWSFEED_QRCODE {
  height: 120px;
  width: 120px;
  margin-top: 0px;
  margin-right: -10px;
  margin-left: 5px;
}

/** Vertical **/

#NEWSFEED_TITLE.vertical {
  display: none;
}

#NEWSFEED_CONTENT.vertical {
  font-size: 80%;
  display: inline-block;
}

#NEWSFEED_IMAGE.vertical {
  float: unset;
  display: block;
  margin-left: auto;
  margin-right: auto;
  /*
  max-width: 20vw;
  max-height: 20vh;
  */
}

#NEWSFEED_SOURCE.vertical {
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
  line-height: 22px;
}

#NEWSFEED_QRCODE.vertical {
  height: 100px;
  width: 100px;
  min-width: 100px;
  min-height: 100px;
  /* display: inline-block; */
  margin-right: 0px;
  margin-top: 3px;
  margin-left: 0px;
}

#NEWSFEED_CONTENER_TITLE {
  display: flex;
}

#NEWSFEED_DESCRIPTION.vertical {
  line-height: 20px;
  margin-top: 5px;
  -webkit-line-clamp: 10;
}

#NEWSFEED_TIME.vertical {
  font-size: 60%;
  margin-top: 0px;
}

[Anthony]

@Egnos Why don’t you try different modules?

[Egnos]

@Anthony said in MMM-NewsFeed multiple instances:

Why don’t you try different modules?

Hi @Anthony, I have not found any RSS Feed modules that show the image of the article.
Do you have something to advise me?

Thanks.

[sdetweil]

@Egnos getStyles is in the MMM-Newfeed2.js

[Anthony]

@Egnos I didn’t know you want a picture too. Although this, this and this seem to have a picture of the article but better is to check them yourself to see if they fit your needs.

[Egnos]

@sdetweil said in MMM-NewsFeed multiple instances:

getStyles is in the MMM-Newfeed2.js

yes yes, I already did. I tried to move it with the “custom.css” but I could not move it (probably due to my lack of knowledge of css …).
Can you recommend a few lines of CSS code to move MMM-Newsfeed2?

@Anthony said in MMM-NewsFeed multiple instances:

@Egnos I didn’t know you want a picture too. Although this, this and this seem to have a picture of the article but better is to check them yourself to see if they fit your needs.

Now I take a look at it, I typically avoid modules with API to get from registration. But if it’s the only solution …

Thank you all

[sdetweil]

@Egnos sorry, this one looks more difficult to move around