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

Creating custom thread and resource prefix CSS

Oooh, look at the pretty colours.

Tags:
  1. Brogan

    Brogan XenForo Moderator Staff Member

    Brogan submitted a new resource:

    Creating custom thread prefix CSS (version 1.0) - Oooh, look at the pretty colours.

    Read more about this resource...
     
  2. ArnyVee

    ArnyVee Well-Known Member

    Thanks for this Brogan :)

    I haven't had a chance to install 1.1 on my test sites, but this was going to be one of my questions once I did. ;)
     
  3. HydraulicJack

    HydraulicJack Well-Known Member

    Definitely... Thanks very much for this!

    In the file structure (or is it via the ACP?), what is the path to Extra.css, please. This will be my first time editing it.
    Thanks!
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    It's a template.
     
    HydraulicJack likes this.
  5. HydraulicJack

    HydraulicJack Well-Known Member

    Thanks! I hope you're sitting down so the shock won't entirely stun you, but I didn't have to ask you for the breadcrumbs! I'm >finally< starting to get the hang of locating some of this stuff.
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    With the introduction of ACP search in 1.1, it's a lot easier to find things.

    For example:
    search.PNG
     
    HydraulicJack likes this.
  7. HydraulicJack

    HydraulicJack Well-Known Member

    Sweet! Thanks for the spiff!
    Cheers,
    HJ
     
  8. Andy.N

    Andy.N Well-Known Member

    Paul,
    How do we add the miniMe avatar in front of the prefix text so it will show [pic] Prefix
     
  9. Kainzo

    Kainzo Active Member

    Lovely - thanks
     
  10. yavuz

    yavuz Well-Known Member

    Paul how do we add images to prefixes? for example like this:

    [​IMG]

    I tried ading this:

    Code:
    background: url("styles/xenforo/icons/image.png") no-repeat left scroll #769DCE;
    padding: 0 4px 0 17px;
    
     
  11. Shelley

    Shelley Well-Known Member

    That looks like a screenshot from my site one of the prefixes I created. I slapped this into the Extra.css template although bare in mind my prefix class will differ from yours or anyone else's depending on how it's named. The following is what I put into the extra.css

    Code:
    .xenforo{
    background: url("@imagePath/xenforo/icons/xenforo-prefix.png") no-repeat left scroll #769dce;
    padding: 0 4px 0 17px; 
    border: 1px solid #5d7da5!important;
    border-radius: 3px !important;
    display: inline-block;
    color: white;
    box-shadow: 0 0 1px #c6d7eb inset;
    line-height: 18px;
    font-size: 12px;
    text-shadow: 0 0 1px #557298;
    vertical-align: middle;
    
    }
    .xenforo:hover {
    opacity: 0.35;
    }
    
     
    AzzidReign, Fuhrmann and yavuz like this.
  12. yavuz

    yavuz Well-Known Member

    Thanks Shelley, I looked up your prefixes, tried the css I got from chrome but couldn't get it right. With Paul's tutorial in mind should it be something like this?

    Code:
    .prefix.prefixCustom {
    background: url("@imagePath/xenforo/icons/xenforo-prefix.png") no-repeat left scroll #769dce;
    padding: 0 4px 0 17px;
    border: 1px solid #5d7da5!important;
    border-radius: 3px !important;
    display: inline-block;
    color: white;
    box-shadow: 0 0 1px #c6d7eb inset;
    line-height: 18px;
    font-size: 12px;
    text-shadow: 0 0 1px #557298;
    vertical-align: middle;
     
    }
     a.prefixLink:hover .prefix.prefixCustom {
    opacity: 0.35;
    }
    
     
  13. yavuz

    yavuz Well-Known Member

    It works with the code above but the image fades away:

    caps.jpg
     
  14. Shelley

    Shelley Well-Known Member

    Not sure what you mean. If you mean it fades when you hover over the prefix then you'll have to remove the following specifically the opacity property

    Code:
    a.prefixLink:hover .prefix.prefix[B][COLOR=#ff0000]Custom[/COLOR][/B] {
    opacity: 0.35;
    }
    
     
  15. yavuz

    yavuz Well-Known Member

    Bad choise of words, when I go over the prefix it resizes rather than fade away like yours. I tried removing that already didn't help.
     
  16. Shelley

    Shelley Well-Known Member

    can you link me to your forum with the prefix showing?
     
  17. yavuz

    yavuz Well-Known Member

    Send yo a PC with the link.
     
  18. Shelley

    Shelley Well-Known Member

    That should now be fixed for you.
     
    MichaelDance and yavuz like this.
  19. yavuz

    yavuz Well-Known Member

    Thank you for your help Shelley, very much appreciated. (y)

    For those wonder how to add an image to the prefix like I wanted:

    Code:
    .prefix.prefixCustom {
    background: url("styles/default/xenforo/icons/xenforo-prefix.png") no-repeat scroll left center #769DCE;
        border: 1px solid #5D7DA5 !important;
        border-radius: 3px 3px 3px 3px !important;
        box-shadow: 0 0 1px #C6D7EB inset;
        color: white;
        display: inline-block;
        font-size: 12px;
        line-height: 18px;
        padding: 0 4px 0 17px;
        text-shadow: 0 0 0 transparent, 0 0 1px #557298;
        vertical-align: middle;
    }
    .prefix.prefixCustom:hover {
    opacity: 0.35;
    background: url("styles/default/xenforo/icons/xenforo-prefix.png") no-repeat scroll left center #769DCE !important;
        border: 1px solid #5D7DA5 !important;
        border-radius: 3px 3px 3px 3px !important;
        box-shadow: 0 0 1px #C6D7EB inset;
        color: white !important;
        display: inline-block;
        font-size: 12px;
        line-height: 18px;
        padding: 0 4px 0 17px !important;
        text-shadow: 0 0 0 transparent, 0 0 1px #557298;
        vertical-align: middle;
    }
    
     
    AzzidReign, Veer and Shelley like this.
  20. AzzidReign

    AzzidReign Well-Known Member

    I just wanted to thank you 2 for offering up the code you guys used. Thanks a bunch! It got me started and was able to make my own...which I feel are 100x better than the default ones xf has. I'll probably release the code I have later since I used CSS gradients instead of solid colors but a big thanks to you 2 for making this process much easier as I don't think I could have done it to the quality we have now without you!
     
    ArnyVee, yavuz and Shelley like this.

Share This Page