[BBCODE] Ticker BBCode

[Stoker]

Ticker BBCode

The Ticker BBCode let you insert at ticker in your posts.

Demo:

Det er i dag, jeg skal af sted, min ven
Jeg glæder mig til vi skal ses igen
For det er her hos dig, jeg har det bedst
Ja, det er dig, jeg elsker allermest
Når jeg sådan må forlade dig
Ved du så, at jeg...
Altid tænker på dig?
At du er lyset for mig, der altid viser vej
Jeg ved, du drømmer om
At vi en dag ka' hygge os og bare slappe af
At vi ka' leve, li'som andre gør
At vi ka' få det, som vi havde før
Det er svært at lave om på mig
Ka' det trøste lidt, at jeg...
Altid tænker på dig?
At du er lyset for mig, der altid viser vej
Min ven, jeg håber på, at du trods alt
Vil holde ud, vi har jo sammen valgt
Det liv, der holder mig så længe væk
Til tider op til flere døgn i træk
Når jeg nu har sagt farvel til dig
Håber jeg, du ved, at jeg...
Altid tænker på dig
At du er lyset for mig, der altid viser vej
Jeg tænker altid på dig
For du er lyset for mig, der altid viser vej

BBCode:

Code: Select all

[ticker]{TEXT}[/ticker]

HTML:

Code: Select all

<aside class="ticker">
<div class="ticker__inner">
<p>{TEXT}</p>
</div>
</aside>

Helpline:

Code: Select all

Ticker: [ticker]Put Your text here[/ticker]

Example:

Code: Select all

[ticker]Lorem ipsum dolor sit amet, consectetuer adipiscing elit.[/ticker]

Now, to make this work we need some css.
You can add it to the bottom of your styles colours.css

Code: Select all

/** Ticker **/
.ticker {
  --ticker-duration: 20s;
  z-index: 10;
  overflow: hidden;
  padding: 0.5rem;
}

.ticker__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: ticker;
  animation-duration: var(--ticker-duration);
  text-align: center;
  width: max-content;
  padding-left: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .ticker__inner {
    flex-wrap: wrap;
    white-space: inherit;
    padding-left: 0;
    width: auto;
  }
}

.ticker__inner p {
  margin: 0 2rem;
}

@keyframes ticker {
  0% {
    transform: translate3d(0%, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

This piece controls the speed:

Code: Select all

  --ticker-duration: 20s;

Save, upload and refresh

Need a stylesheet for adding extra styling? No need to edit phpBB core!
You can use the Add CSS EXT

[Steve]

Can't you add the CSS via the style tag in html?

[Stoker]

Can't you add the CSS via the style tag in html?

And if you use the BBCodes more than once per page?

[Steve]

The Ticker BBCode let you insert at ticker in your posts.

Demo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

The Ticker BBCode let you insert at ticker in your posts.

Demo:

:p
: Lorem ipsum dolor sit amet, consectetuer adipiscing elit :booobs:

[Stoker]

Can't you add the CSS via the style tag in html?

And if you use the BBCodes more than once per page?

Then the html would be added in style several times. We dont want that Stoker