XF 1.5 Flashing Prefixes

thenashy

Active member
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
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

  • 2016-06-16_15-46-16.png
    2016-06-16_15-46-16.png
    60.2 KB · Views: 16

thenashy

Active member
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
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
 
Top