XF 1.5 Flashing Prefixes

[thenashy]

We have the following code setup on our current vBulletin site. I'm wondering how I would go about implementing this in XF. I've tried a few different ways, and it doesn't seem to work.

@keyframes livethread {
    from {background-color: #9400D3;}
    to {background-color: Red;}
.prefix.prefixLive {
    background: none repeat scroll 0% 0% #9400D3;
}

Basically, I want the prefix to fade in and out between red and green.

Thanks!

 

[Dadparvar]

You mean the thread prefix?
Then just when you create or edit a prefix, choose "Other, using custom CSS class name" in "Display Styling". And set any class name that you want. And then easily control that class name with any code or animation your want in your EXTRA.css

 

[thenashy]

Hmm. The issue is likely my lack of CSS skills. This isn't working for me. Is anyone able to take a look?

I have this in Extra.css

}
@keyframes livethread{
   from {background-color: #9400D3;}
   to {background-color: Red;}
   
.prefix.livethread {
    background: none repeat scroll 0% 0% #9400D3;
    display: inline-block;
        height: 15px;
        line-height: 15px;
    font-size: 9px;
        font-weight: bold;
       padding: 0px 2px;
        margin: 0px;
       letter-spacing:0.4px;
        color: #fff;
        border-radius: 4px;
    border:1px dashed black;
        vertical-align: middle;
    cursor:default;
}

This is what I have set in the custom prefix

.prefix.livethread

 

[Dadparvar]

Let's use this to see if you like it or not.
Add this to your EXTRA.css:

.livethreadprefix {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    background-color: #9400D3;
  }
  100% {
    background-color: #F00;
  }
}

and use this add custom css in prefix field:

livethreadprefix

 

[thenashy]

Oh fantastic, I can work with that. Thanks so much!