# Advanced Stylesheet CSS not working

**URL:** <https://forum.inductiveautomation.com/t/advanced-stylesheet-css-not-working/99591>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [December 9, 2024, 4:14pm UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-css-not-working/99591 "2024-12-09T16:14:48Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![sydney.bosworth](https://avatars.discourse-cdn.com/v4/letter/s/aca169/32.png) [@sydney.bosworth](https://forum.inductiveautomation.com/u/sydney.bosworth)\
**Post date:** [December 9, 2024, 4:14pm UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-css-not-working/99591/1 "2024-12-09T16:14:48Z")

</div>

I am at close to 0 on the experience scale for CSS. I found the code to do a marquee style label. I have the labels I want tied in and things like the white-space: nowrap, and the color working, so I know the labels are using the class. BUT, the marquee part is not working. this is what I have in my style sheet. Am I missing something besides tying the labels to the class to get it to fully work?

```python

.psc-marquee {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
/* background: rgb(161, 61, 175);*/
/* color: #fff;*/
}

.psc-marquee span {
  display: inline-block;
  min-width: 100%; /* this is to prevent shorter text animate to right */
  white-space: nowrap;
  font-size: 2.5em;
  animation: marquee 4s ease-in-out forwards;
}

@keyframes marquee {
  from {transform: translateX(0); margin-left: 0;}
  to {transform: translateX(-100%); margin-left: 100%; }
}

```

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [December 9, 2024, 4:25pm UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-css-not-working/99591/2 "2024-12-09T16:25:38Z")

</div>

> [@sydney.bosworth](#):
>
> ```python
> .psc-marquee span {
> 
> ```

This is targeting a `span` type element that also has the `marquee` style class applied to it. What actual Perspective _component_ are you trying to mimic this marquee effect on? That will determine how to author your selector correctly.

Also, before @Transistor beats me to it, at least consider whether you actually want marquee text - it's hard to read, looks extremely outdated, and is generally not a great idea per 'high performance HMI' standards.

---

<div class="post-metadata">

**Author:** ![sydney.bosworth](https://avatars.discourse-cdn.com/v4/letter/s/aca169/32.png) [@sydney.bosworth](https://forum.inductiveautomation.com/u/sydney.bosworth)\
**Post date:** [December 9, 2024, 4:31pm UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-css-not-working/99591/3 "2024-12-09T16:31:10Z")

</div>

It is for a label that shows a long string.  
I tend to agree on the aesthetics of it and wouldn't use it normally. The customer Doesn't have room to just add more lines and needs large text. They have requested this specifically, so we will let them decide if it is what they want ultimately. Even if they don't end up liking it, I would like to know for my own learning/curiosity how to get it to work.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [December 9, 2024, 6:31pm UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-css-not-working/99591/4 "2024-12-09T18:31:01Z")

</div>

What about doing a mouseover/tooltip for long text?

---

<div class="post-metadata">

**Author:** ![sydney.bosworth](https://avatars.discourse-cdn.com/v4/letter/s/aca169/32.png) [@sydney.bosworth](https://forum.inductiveautomation.com/u/sydney.bosworth)\
**Post date:** [December 9, 2024, 6:43pm UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-css-not-working/99591/5 "2024-12-09T18:43:19Z")

</div>

It's on a TV.

---

<div class="post-metadata">

**Author:** ![sydney.bosworth](https://avatars.discourse-cdn.com/v4/letter/s/aca169/32.png) [@sydney.bosworth](https://forum.inductiveautomation.com/u/sydney.bosworth)\
**Post date:** [December 10, 2024, 2:14pm UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-css-not-working/99591/6 "2024-12-10T14:14:57Z")

</div>

So I got it to work (well enough for them to get a feel for it). Just to update the thread.

```python
.psc-marquee-container{
  overflow:hidden;
  white-space: nowrap;
}
.psc-marquee{
  animation-delay: 10s; 
  min-width:100%;
  
  white-space: nowrap;
  animation-name: marquee;
  animation-duration: 12s;
  animation-delay: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.psc-marquee:hover{
  animation-play-state: paused;
}
@keyframes marquee {
  from{margin-left : 10%;}
    to{margin-left: -200%;}
}

```

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [December 10, 2024, 3:08pm UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-css-not-working/99591/7 "2024-12-10T15:08:10Z")

</div>

Show the component and class you asigned to it.  
Show the result and say what could be improved, and ill fix it for you (if you reply fast enough as im going on holidays next week xd)

---

<div class="post-metadata">

**Author:** ![sydney.bosworth](https://avatars.discourse-cdn.com/v4/letter/s/aca169/32.png) [@sydney.bosworth](https://forum.inductiveautomation.com/u/sydney.bosworth)\
**Post date:** [December 10, 2024, 5:08pm UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-css-not-working/99591/8 "2024-12-10T17:08:19Z")

</div>

[Marquee.zip](https://forum.inductiveautomation.com/uploads/short-url/u25FVG5zdChtmLZ79ypEISPtFh6.zip) (325.6 KB)  
wasn't sure how else to get a screen capture to upload.

Ideally, I'd like it to just start with the string after a set spacing so it doesn't just jump back to the start. This script also relies on me setting the  
`to{margin-left: -200%;}`  
percentage wide enough that it'll show the whole string...which isn't ideal obviously.

Any input is appreciated, thank you!

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [December 11, 2024, 7:57am UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-css-not-working/99591/9 "2024-12-11T07:57:14Z")

</div>

One generally puts the marquee in a wrapper so they can just declare a fixed 100% for any text. But seems fine otherwise.

Other than that i dont really like this, if the text is to long. You would be better off adding a tooltip with the full text that wraps. Or do both atleast.

---

<div class="post-metadata">

**Author:** ![sydney.bosworth](https://avatars.discourse-cdn.com/v4/letter/s/aca169/32.png) [@sydney.bosworth](https://forum.inductiveautomation.com/u/sydney.bosworth)\
**Post date:** [December 11, 2024, 3:57pm UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-css-not-working/99591/10 "2024-12-11T15:57:29Z")

</div>

Sounds good. I agree, as stated before. On a TV so tooltip not an option. Specifically requested by customer. I am generally a stickler about animations of any kind as well as I did our HMI standards for several years. Thank you.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [December 12, 2024, 8:33am UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-css-not-working/99591/11 "2024-12-12T08:33:35Z")

</div>

Doesnt a tv have enough space for multiline text? xd  
ahwell if they requested it 🤷‍♂️

Your setup was as good as it gets with only css,  
I saw better examples but that required a lot more setup (or js). Which is way to much work to do in perspective for only small improvement