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

Discussion in 'Styling and Customization Questions' started by thenashy, Jun 16, 2016.

  1. thenashy

    thenashy 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!
     
  2. Dadparvar

    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
     

    Attached Files:

  3. thenashy

    thenashy 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
     
  4. Dadparvar

    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
     
    Snog and thenashy like this.
  5. thenashy

    thenashy Member

    Oh fantastic, I can work with that. Thanks so much!
     
    Last edited: Jun 16, 2016
    Dadparvar likes this.

Share This Page