Rolling Banner

zkab

Thanks for the css code - I will be away for a couple of days but will test it when I am back … I keep you posted

zkab

I tried the code and it works … but in my case I call ‘helloworld’ twice in ‘config.js’ - one text in ‘upper_third’ and one in ‘bottom bar’.
Is there away to make only the text in ‘bottom bar’ to scroll ?

strawberry 3.141

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

zkab

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

strawberry 3.141

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

zkab

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

strawberry 3.141

@zkab you have to replace the second one as well

zkab

Second one ?

strawberry 3.141

@zkab

.region.bottom .helloworld div {
  display: block;
  width: 100%;
  height: 130px;

  position: absolute;
  overflow: hidden;

  animation: marquee 10s linear infinite;
}

zkab

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

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.
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%; }
}