• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.5 Flashing Prefixes

#1
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.

Code:
@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

Well-known member
#2
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
 

Attachments

#3
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
Code:
}
@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
Code:
.prefix.livethread
 

Dadparvar

Well-known member
#4
Let's use this to see if you like it or not.
Add this to your EXTRA.css:
Code:
.livethreadprefix {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    background-color: #9400D3;
  }
  100% {
    background-color: #F00;
  }
}
and use this add custom css in prefix field:
Code:
livethreadprefix
GIF.gif