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

Rolling Banner

Scheduled Pinned Locked Moved Troubleshooting
18 Posts 4 Posters 8.5k Views 4 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
    strawberry 3.141 Project Sponsor Module Developer @zkab
    last edited by strawberry 3.141 Apr 2, 2017, 12:21 PM Apr 2, 2017, 12:16 PM

    @zkab you can select all helloworld modules in region bottom with the selector .region.bottom .helloworld

    Please create a github issue if you need help, so I can keep track

    1 Reply Last reply Reply Quote 0
    • Z Offline
      zkab
      last edited by Apr 2, 2017, 12:36 PM

      How do I use .region.bottom .helloworld ?
      Can’t find any documentation …

      S 1 Reply Last reply Apr 2, 2017, 12:46 PM Reply Quote 0
      • S Offline
        strawberry 3.141 Project Sponsor Module Developer @zkab
        last edited by Apr 2, 2017, 12:46 PM

        @zkab just replace it in the css rules above where you just used .helloworld e.g.

        .region.bottom .helloworld {
          height: 125px;
          width: 600px;
          overflow: hidden;
          position: relative;
        }
        

        Please create a github issue if you need help, so I can keep track

        1 Reply Last reply Reply Quote 0
        • Z Offline
          zkab
          last edited by Apr 2, 2017, 2:22 PM

          I don’t get this right - nothing changes.
          Here is my custom.css

          pi@mirror:~/MagicMirror/css $ cat custom.css
          /*****************************************************
           * Magic Mirror                                      *
           * Custom CSS                                        *
           *                                                   *
           * By Michael Teeuw http://michaelteeuw.nl           *
           * MIT Licensed.                                     *
           *                                                   *
           * Add any custom CSS below.                         *
           * Changes to this files will be ignored by GIT. *
           *****************************************************/
          
          body {
          }
          .compliments .xlarge {
          font-size: 100px;
          color: #ff6600;
          font-family: "Roboto Condensed Bold", sans-serif;
          font-style: italic;
          }
          .helloworld {
          font-size: 75px;
          color: #660;
          font-family: "Roboto Condensed", sans-serif;
          font-style: normal;
          }
          .calendar .time {
          color: #660;
          }
          .newsfeed .dimmed {
          font-size: 20px;
          color: #a2d2f6;
          line-height: 50px;
          }
          .newsfeed .medium {
          font-size: 40px;
          color: #660;
          line-height: 60px;
          }
          .brightb {
          color: #a2d2f6;
          }
          .wi-sunrise {
          color: #ff0;
          }
          .wi-sunset {
          color: #f60;
          }
          .wi-night-showers {
          color: #a2d2f6;
          }
          .wi-degrees {
          color: #415;
          }
          .wi-rain {
          color: #a2d2f6;
          }
          .wi-showers {
          color: #a2d2f6;
          }
          .wi-night-showers {
          color: #a2d2f6;
          }
          .wi-night-alt-cloudy-windy {
          color: #aaa;
          }
          .wi-night-cloudy {
          color: #aaa;
          }
          .wi-cloudy {
          color: #aaa;
          }
          .wi-day-cloudy {
          color: #aaa;
          }
          .wi-cloudy {
          color: #aaa;
          }
          .wi-cloudy-windy {
          color: #aaa;
          }
          .wi-showers {
          color: #a2d2f6;
          }
          .wi-thunderstorm {
          color: #ff0;
          }
          .wi-snow {
          color: #fff;
          }
          .wi-fog {
          color: #999;
          }
          .wi-night-clear {
          color: #F4F8A9;
          }
          .wi-night-rain {
          color: #a2d2f6;
          }
          .wi-night-thunderstorm {
          color: #ff0;
          }
          .wi-night-snow {
          color: #fff;
          }
          .wi-day-sunny {
          color: #ff0;
          }
          
          
          
          .region.bottom .helloworld {
            height: 125px;
            width: 600px;
            overflow: hidden;
            position: relative;
          }
          
          .helloworld div {
            display: block;
            width: 100%;
            height: 130px;
          
            position: absolute;
            overflow: hidden;
          
            animation: marquee 10s linear infinite;
          }
          
          
          S 1 Reply Last reply Apr 2, 2017, 2:26 PM Reply Quote 0
          • S Offline
            strawberry 3.141 Project Sponsor Module Developer @zkab
            last edited by Apr 2, 2017, 2:26 PM

            @zkab you have to replace the second one as well

            Please create a github issue if you need help, so I can keep track

            1 Reply Last reply Reply Quote 0
            • Z Offline
              zkab
              last edited by Apr 2, 2017, 3:56 PM

              Second one ?

              S 1 Reply Last reply Apr 2, 2017, 7:47 PM Reply Quote 0
              • S Offline
                strawberry 3.141 Project Sponsor Module Developer @zkab
                last edited by Apr 2, 2017, 7:47 PM

                @zkab

                .region.bottom .helloworld div {
                  display: block;
                  width: 100%;
                  height: 130px;
                
                  position: absolute;
                  overflow: hidden;
                
                  animation: marquee 10s linear infinite;
                }
                

                Please create a github issue if you need help, so I can keep track

                1 Reply Last reply Reply Quote 0
                • Z Offline
                  zkab
                  last edited by Apr 3, 2017, 3:46 PM

                  OK - I got it more or less working …
                  There are two things I can’t figure out how to solve:

                  1. The upper-case character seem to be chopped of above and lower part of some character (like g) have the same problem.
                    I have changed ‘height: 130px’ back and forth … no effect.
                  2. The rolling text don’t flow smoothly but hacks …

                  Below is a portion of my helloworld.

                  .helloworld {
                  font-size: 75px;
                  color: #660;
                  font-family: "Roboto Condensed", sans-serif;
                  font-style: normal;
                  }
                  .region.bottom .helloworld div {
                    display: block;
                    width: 100%;
                    height: 230px;
                    position: absolute;
                    overflow: hidden;
                    animation: marquee 15s linear infinite;
                  }
                  @keyframes marquee {
                    0% { left: 50%; }
                    100% { left: -100%; }
                  }
                  
                  
                  S 1 Reply Last reply Apr 3, 2017, 7:21 PM Reply Quote 0
                  • S Offline
                    strawberry 3.141 Project Sponsor Module Developer @zkab
                    last edited by strawberry 3.141 Apr 3, 2017, 7:22 PM Apr 3, 2017, 7:21 PM

                    @zkab 2. is expected behaviour of a pi as it doesn’t have a lot of rendering power

                    Please create a github issue if you need help, so I can keep track

                    1 Reply Last reply Reply Quote 0
                    • Z Offline
                      zkab
                      last edited by Apr 4, 2017, 10:31 AM

                      Thanks for your support … sad that pi is so weak …

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 2 / 2
                      2 / 2
                      • First post
                        13/18
                        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