• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

MMM-NewsFeed multiple instances

Scheduled Pinned Locked Moved General Discussion
12 Posts 3 Posters 1.3k Views 3 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    sdetweil @Egnos
    last edited by Sep 15, 2022, 12:49 PM

    @Egnos then you would have to have to fiddle with CSS
    so would have to rename the css file and change the response to getStyles to the new name…

    THEN you could use custom.css to attempt to fix

    as I said, you could ‘try’ the rename approach… sometimes not so easy…

    Sam

    How to add modules

    learning how to use browser developers window for css changes

    E 1 Reply Last reply Sep 15, 2022, 1:38 PM Reply Quote 0
    • E Offline
      Egnos @sdetweil
      last edited by Sep 15, 2022, 1:38 PM

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

      My Mirror https://forum.magicmirror.builders/topic/17262/the-raspimirror-was-born/7

      A S 2 Replies Last reply Sep 15, 2022, 1:43 PM Reply Quote 0
      • A Offline
        Anthony Project Sponsor @Egnos
        last edited by Sep 15, 2022, 1:43 PM

        @Egnos Why don’t you try different modules?

        E 1 Reply Last reply Sep 15, 2022, 2:14 PM Reply Quote 0
        • E Offline
          Egnos @Anthony
          last edited by Sep 15, 2022, 2:14 PM

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

          My Mirror https://forum.magicmirror.builders/topic/17262/the-raspimirror-was-born/7

          A 1 Reply Last reply Sep 15, 2022, 2:39 PM Reply Quote 0
          • S Offline
            sdetweil @Egnos
            last edited by Sep 15, 2022, 2:16 PM

            @Egnos getStyles is in the MMM-Newfeed2.js

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            E 1 Reply Last reply Sep 16, 2022, 8:53 AM Reply Quote 0
            • A Offline
              Anthony Project Sponsor @Egnos
              last edited by Sep 15, 2022, 2:39 PM

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

              1 Reply Last reply Reply Quote 1
              • E Offline
                Egnos @sdetweil
                last edited by Egnos Sep 16, 2022, 8:55 AM Sep 16, 2022, 8:53 AM

                @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

                My Mirror https://forum.magicmirror.builders/topic/17262/the-raspimirror-was-born/7

                S 1 Reply Last reply Sep 16, 2022, 11:33 AM Reply Quote 1
                • S Offline
                  sdetweil @Egnos
                  last edited by Sep 16, 2022, 11:33 AM

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

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • 1
                  • 2
                  • 1 / 2
                  1 / 2
                  • First post
                    9/12
                    Last post
                  Enjoying MagicMirror? Please consider a donation!
                  MagicMirror created by Michael Teeuw.
                  Forum managed by Sam, technical setup by Karsten.
                  This forum is using NodeBB as its core | Contributors
                  Contact | Privacy Policy