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

Custom prefixes with images

Discussion in 'XenForo Questions and Support' started by oman, Oct 20, 2012.

  1. oman

    oman Well-Known Member

    Is there a guide/add on in which the above can be achieved?

    Thanks
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    When adding/editing a prefix you can specify a CSS class name:

    Screen shot 2012-10-20 at 12.11.46 AM.png

    Then you can define the class in your EXTRA.css to create any custom styling you want:

    Admin CP -> Appearance -> Templates -> EXTRA.css
     
  3. oman

    oman Well-Known Member

    Sorry, I don't understand what a CSS class is. How can they be created within extra.css?
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Example CSS using a class name of "classname":

    Code:
    .classname
    {
    	background: url('path/to/background.gif');
    }
    
     
  5. oman

    oman Well-Known Member

    Ah, I see. So the background.gif is the image that backs the prefix text.

    What would be a suggested size?
     
  6. oman

    oman Well-Known Member

    Actually, that probably depends on the prefix length.
     
  7. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Exactly. You will have to play with the CSS attributes to style it like you want.
     
  8. oman

    oman Well-Known Member

    I'll probably have a go tomorrow morning.
     
  9. erich37

    erich37 Well-Known Member

Share This Page