• 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-NewsFeedTicker

Scheduled Pinned Locked Moved Utilities
94 Posts 15 Posters 67.9k Views 14 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.
  • E Offline
    electros Project Sponsor @justjim1220
    last edited by Oct 26, 2018, 5:24 PM

    @justjim1220
    Hi, this is what I add to custom.css

    MMM-NewsFeedTicker {
        height: 40px;
        background-color: black;
        margin-left: 20%;
    }
    .MMM-NewsFeedTicker .tickerbody {
        position: absolute;
        bottom: 7px;
      
    }
    .MMM-NewsFeedTicker .image {
      position: absolute;
      margin-left: 20%;
      bottom: 7px;
      height: 40px;
    }  
    

    but i find what the problem is:
    When i change the color of background to black just i hide background but that is not in same line like writing, is upper for that reason the writing is not hidden when go over the buttons. i change back the background to maroon and you can see the difference0_1540574544136_4.png

    J 1 Reply Last reply Oct 26, 2018, 7:44 PM Reply Quote 0
    • J Offline
      justjim1220 Module Developer @electros
      last edited by Oct 26, 2018, 7:44 PM

      @electros

      ok,

      change background-color to background: none;
      and,
      change position back to relative under the image section

      should work for you…
      0_1540583047363_Screenshot (411).png

      "Life's Too Short To Dance With Ugly People"
      Jim Hallock - 1995

      E C 2 Replies Last reply Oct 26, 2018, 8:19 PM Reply Quote 0
      • E Offline
        electros Project Sponsor @justjim1220
        last edited by Oct 26, 2018, 8:19 PM

        @justjim1220
        I tried but it does not work. Now in custom.css it looks like this:

        .MMM-NewsFeedTicker {
            height: 40px;
            background-color: none;
            margin-left: 20%;
        }
        .MMM-NewsFeedTicker .tickerbody {
            position: absolute;
            bottom: 7px;
          
        }
        .MMM-NewsFeedTicker .image {
          position: relative;
          margin-left: 20%;
          bottom: 7px;
          height: 40px;
        }  
        

        And the screen is like that:
        0_1540585163271_5.png

        1 Reply Last reply Reply Quote 0
        • E Offline
          electros Project Sponsor
          last edited by Oct 26, 2018, 8:49 PM

          The problem is just to move that red line to bottom under the writing line and after that everything it’s fine. Thanks

          J 2 Replies Last reply Oct 26, 2018, 9:25 PM Reply Quote 0
          • J Offline
            justjim1220 Module Developer @electros
            last edited by Oct 26, 2018, 9:25 PM

            @electros

            Apologies!

            Looks like I did tell you wrong about the position…
            Here is the css that makes it work for me, try them and let me know…

            @keyframes marquee {
                0% {left: 100%;}
                100% {left: -100%;}
            }
            
            .MMM-NewsFeedTicker {
                width: 100%;
                height: 100px;
                line-height: 100%;
                overflow: hidden;
                background: none;
                margin-left: 20%;
            }
            
            .MMM-NewsFeedTicker .tickerbody {
                position: relative;
                bottom: 0;
                left: 0;
                vertical-align: middle;
                white-space: nowrap;
                text-align: left;
                animation: marquee 31s linear;
              }
            
            .MMM-NewsFeedTicker .headline {
                padding-top: 15px;
                margin: 0 auto;
                white-space: nowrap;
            }
            
            .MMM-NewsFeedTicker .image {
              position: absolute;
              display: inline-block;
              vertical-align: middle;
              bottom: 10;
              margin-left: 0;
              height: 100px;
              z-index: 10;
              background-color: #FFF;
            }
            

            "Life's Too Short To Dance With Ugly People"
            Jim Hallock - 1995

            1 Reply Last reply Reply Quote 0
            • J Offline
              justjim1220 Module Developer @electros
              last edited by Oct 26, 2018, 9:37 PM

              @electros

              what is the name of the module for the buttons?

              "Life's Too Short To Dance With Ugly People"
              Jim Hallock - 1995

              E 1 Reply Last reply Oct 26, 2018, 10:02 PM Reply Quote 0
              • E Offline
                electros Project Sponsor @justjim1220
                last edited by Oct 26, 2018, 10:02 PM

                @justjim1220
                Sorry but it’s not working. I copied the css you put above in MMM-NewsFeedTicker.css but it still does not work. Now it looks like that
                0_1540591080827_6.png
                Buttons are created with the module “MMM-TouchNavigation”

                J 2 Replies Last reply Oct 26, 2018, 10:50 PM Reply Quote 0
                • J Offline
                  justjim1220 Module Developer @electros
                  last edited by Oct 26, 2018, 10:50 PM

                  @electros

                  do you still have the entries you put into the custom.css?

                  "Life's Too Short To Dance With Ugly People"
                  Jim Hallock - 1995

                  1 Reply Last reply Reply Quote 0
                  • J Offline
                    justjim1220 Module Developer @electros
                    last edited by Oct 26, 2018, 11:14 PM

                    @electros

                    OK, you need to add the following to your custom.css file:

                    .navigation-menu {
                        display: flex;
                        align-items: stretch;
                        position: absolute;
                    }
                    

                    With the code I posted and this addition to the custom.css file, I was able to get this…
                    0_1540595500237_Screenshot (412).png
                    0_1540595512137_Screenshot (413).png 0_1540595520896_Screenshot (414).png

                    If you added any NewsFeedTicker code to your custom.css file, you need to remove it.

                    If you want the background color back to maroon, change the background: none; to background-color: maroon;

                    "Life's Too Short To Dance With Ugly People"
                    Jim Hallock - 1995

                    E 1 Reply Last reply Oct 27, 2018, 11:36 AM Reply Quote 0
                    • E Offline
                      electros Project Sponsor @justjim1220
                      last edited by Oct 27, 2018, 11:36 AM

                      @justjim1220
                      Finally it’s working now. Thank you very much:thumbs_up:

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 9
                      • 10
                      • 2 / 10
                      2 / 10
                      • First post
                        11/94
                        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