CSS & Styling

Styling MANAWAVE should be the same experience styling HTML regularly.

Styling the marquee

You can style the marquee in any way you’re familiar with it. Just make sure you apply any relevant attributes (class, id, or style) to the marquee element itself. If you use web components, you can style the marquee by using manawave-marquee as the selector.

Here are some basic examples of things you could do to style the marquee container.

Styling the content

Like styling the marquee container, you don’t have to adjust how you regularly apply CSS to elements on a page. Also, content that would be responsive without the marquee is still responsive. You can think of anything that appears inside a marquee, even if content wraps, to repeat across that space.

It’s easier to show by example, so here is one. All of what CSS would normally do still applies.

Caveats

One thing you’ll have to consider is that margin collapsing between repeated content doesn’t happen. This is by design to give you more control while balancing with technical limitations.

Also, MANAWAVE measures content by its explicit dimensions (box) including padding and margin. Because of this, display: block won’t have the rest of its width if there’s extra. Content will, however, still break onto the next line. To see how MANAWAVE does this more specifically, you should read on MANAWAVE’s behavior.