[Johnny GoodParticipant]

Hi,

I would like to add marquee to the very top of the page so I can put important messages for visitors.
How can I do that in Cornerstone? CSS? I’m looking best compability across the browsers.
Looking for best the approach.

Thanks!

[Johnny GoodParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for writing in! There is no element in Cornerstone that can do the same as your example url. The marquee movement is controlled by the css. To accomplish something like it and add it at the top of you page, please do the following:
#1] Please edit your child theme’s style.css and insert this:

.marquee {
  overflow: hidden;
  text-align: left;
}
.marquee.marquee-speed-drowsy:before {
  animation-duration: 30s;
}
.marquee.marquee-speed-slow:before {
  animation-duration: 20s;
}
.marquee.marquee-speed-custom:before {
  animation-duration: inherit;
}
.marquee.marquee-speed-normal:before {
  animation-duration: 10s;
}
.marquee.marquee-speed-fast:before {
  animation-duration: 7s;
}
.marquee.marquee-speed-swift:before {
  animation-duration: 5s;
}
.marquee.marquee-speed-hyper:before {
  animation-duration: 2s;
}
@keyframes movement-smooth {
  from {
    transform: translateX(0%);
    left: 100%;
  }
  to {
    transform: translateX(-100%);
    left: 0%;
  }
}
@keyframes movement-steps20 {
  0% {
    transform: translateX(0%);
    left: 100%;
  }
  5%,
  9.99% {
    transform: translateX(-5%);
    left: 95%;
  }
  10%,
  14.99% {
    transform: translateX(-10%);
    left: 90%;
  }
  15%,
  19.99% {
    transform: translateX(-15%);
    left: 85%;
  }
  20%,
  24.99% {
    transform: translateX(-20%);
    left: 80%;
  }
  25%,
  29.99% {
    transform: translateX(-25%);
    left: 75%;
  }
  30%,
  34.99% {
    transform: translateX(-30%);
    left: 70%;
  }
  35%,
  39.99% {
    transform: translateX(-35%);
    left: 65%;
  }
  40%,
  44.99% {
    transform: translateX(-40%);
    left: 60%;
  }
  45%,
  49.99% {
    transform: translateX(-45%);
    left: 55%;
  }
  50%,
  54.99% {
    transform: translateX(-50%);
    left: 50%;
  }
  55%,
  59.99% {
    transform: translateX(-55%);
    left: 45%;
  }
  60%,
  64.99% {
    transform: translateX(-60%);
    left: 40%;
  }
  65%,
  69.99% {
    transform: translateX(-65%);
    left: 35%;
  }
  70%,
  74.99% {
    transform: translateX(-70%);
    left: 30%;
  }
  75%,
  79.99% {
    transform: translateX(-75%);
    left: 25%;
  }
  80%,
  84.99% {
    transform: translateX(-80%);
    left: 20%;
  }
  85%,
  89.99% {
    transform: translateX(-85%);
    left: 15%;
  }
  90%,
  94.99% {
    transform: translateX(-90%);
    left: 10%;
  }
  95%,
  99.99% {
    transform: translateX(-95%);
    left: 5%;
  }
  100% {
    transform: translateX(-100%);
    left: 0%;
  }
}
@keyframes movement-steps10 {
  0% {
    transform: translateX(0%);
    left: 100%;
  }
  10%,
  19.99% {
    transform: translateX(-10%);
    left: 90%;
  }
  20%,
  29.99% {
    transform: translateX(-20%);
    left: 80%;
  }
  30%,
  39.99% {
    transform: translateX(-30%);
    left: 70%;
  }
  40%,
  49.99% {
    transform: translateX(-40%);
    left: 60%;
  }
  50%,
  59.99% {
    transform: translateX(-50%);
    left: 50%;
  }
  60%,
  69.99% {
    transform: translateX(-60%);
    left: 40%;
  }
  70%,
  79.99% {
    transform: translateX(-70%);
    left: 30%;
  }
  80%,
  89.99% {
    transform: translateX(-80%);
    left: 20%;
  }
  90%,
  99.99% {
    transform: translateX(-90%);
    left: 10%;
  }
  100% {
    transform: translateX(-100%);
    left: 0%;
  }
}
@keyframes movement-steps5 {
  0%,
  19.99% {
    transform: translateX(0%);
    left: 100%;
  }
  20%,
  39.99% {
    transform: translateX(-20%);
    left: 80%;
  }
  40%,
  59.99% {
    transform: translateX(-40%);
    left: 60%;
  }
  60%,
  79.99% {
    transform: translateX(-60%);
    left: 40%;
  }
  80%,
  99.99% {
    transform: translateX(-80%);
    left: 20%;
  }
  100% {
    transform: translateX(-100%);
    left: 0%;
  }
}
.marquee.marquee-movement-smooth:before {
  animation-name: movement-smooth;
}
.marquee.marquee-movement-steps20:before {
  animation-name: movement-steps20;
}
.marquee.marquee-movement-steps10:before {
  animation-name: movement-steps10;
}
.marquee.marquee-movement-steps5:before {
  animation-name: movement-steps5;
}
.marquee.marquee-direction-left:before,
.marquee.marquee-direction-normal:before {
  animation-direction: normal;
}
.marquee.marquee-direction-alternate:before {
  animation-direction: alternate;
}
.marquee.marquee-direction-right:before,
.marquee.marquee-direction-reverse:before {
  animation-direction: reverse;
}
.marquee:before {
  content: attr(data-marquee);
  white-space: nowrap;
  position: relative;
  transform: translateX(-50%);
  display: inline-block;
  left: 50%;
  animation: linear infinite;
}
.marquee:before {
  animation-duration: 10s;
}
.marquee:before {
  animation-name: movement-smooth;
}
.marquee:before {
  animation-direction: normal;
}

#2] And then in your child theme’s function.php file, please insert the following code:

// Custom Marquee
// =============================================================================
function add_marquee() { ?>

  <div 
     class="marquee" 
     data-marquee="Large text large text large text large text large text large text large text large text"
  ></div>

<?php }
add_action('x_before_site_begin', 'add_marquee');
// =============================================================================

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thank you for your understanding.

[Johnny GoodParticipant]

Thanks for taking time to help me!
Wow, that is lot of CSS compared to good old <marquee>This is basic example of marquee</marquee> and I know that not all browsers will continue to support <marquee>.

[Rue NelModerator]

Hello There,

Have you checked this out https://github.com/muchweb/html5-marquee ? <marquee></marquee> tag has long been deprecated. For more details, please check the Github article.

Hope this explains it.

[Author]

Posts