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

XF 1.3 How to create the titles as 'background images'

Discussion in 'XenForo Questions and Support' started by Rum Runner Entertainment, Aug 19, 2014.

  1. Rum Runner Entertainment

    Rum Runner Entertainment Active Member

    I was looking to achieve something like this:
    Screen Shot 2014-08-19 at 2.11.06 AM.png

    But I really don't understand how I could achieve something like this with one image.
     

    Attached Files:

  2. Brogan

    Brogan XenForo Moderator Staff Member

    The background position denotes which part of the sprite is shown.
     
  3. Rum Runner Entertainment

    Rum Runner Entertainment Active Member

    Alright, and what about the image sprite itself. If the titles are all in one image, how are they specified?
     
  4. Rum Runner Entertainment

    Rum Runner Entertainment Active Member

    @Brogan, Is there a way to specify them? How exactly does that work?
     
    Last edited: Aug 20, 2014
  5. Rum Runner Entertainment

    Rum Runner Entertainment Active Member

    Nevermind, I now understand, but where would this be placed though? The sprite code? In the Extra.CSS? I'm still confused about the exact location.
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    I'm not sure what it is you're trying to do or asking.

    The code you have posted above can be placed in EXTRA.css.

    However, the concept of ranks doesn't exist in XenForo so you will need some accompanying HTML in the templates to utilise it.
     
  7. Rum Runner Entertainment

    Rum Runner Entertainment Active Member

    Alright, I see thank you. Is there an area in the EXTRA.CSS where I need to place the code? I do have a "Fusion" style installed from Xenfocus, and the EXTRA.CSS template is filled. Also, regarding the ranks, is it needed to add in HTML templates for the CSS? Because I only see the CSS regarding the code above.
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    You can add the CSS anywhere in EXTRA.css.

    With regards to the templates, you will need to edit those accordingly, depending on what it is you are trying to do.

    If you don't know how to implement this, where did you get the CSS?
     
  9. Rum Runner Entertainment

    Rum Runner Entertainment Active Member

    Alright. The EXTRA.CSS that is already filled is because of the current style that I currently have. It is mostly in the EXTRA.CSS template.

    That CSS is something that I want to implement on my site using a similar code. In regard to those ranks. Instead of having 6 or 7 separate images loading on the site, I would only have one.
     
  10. Brogan

    Brogan XenForo Moderator Staff Member

    So that CSS will work then.
     
  11. Rum Runner Entertainment

    Rum Runner Entertainment Active Member

    Alright. Do I still need to alter the HTML templates as well?
     
  12. Brogan

    Brogan XenForo Moderator Staff Member

     
  13. Rum Runner Entertainment

    Rum Runner Entertainment Active Member

    Alright. Can you give me specific HTML templates just as an example.
     
  14. Brogan

    Brogan XenForo Moderator Staff Member

    I still have no idea what it is you are trying to do, or where you got the CSS from.
     
  15. Rum Runner Entertainment

    Rum Runner Entertainment Active Member

    What I was trying to explain was that I'm trying to add in a similar CSS code to my site. What this is, are title ranks such as these: POR-Rank_Sprites.png These images would go in the HTML section of the specific user group that corresponds with the rank. Now, instead of having 7 different rank images separately loading on the site, I combined them into one.

    What the code above was showing, was just an example of the CSS sprite code of these ranks, that I was hoping to achieve.
     
  16. Rum Runner Entertainment

    Rum Runner Entertainment Active Member

    In order to do that^, which templates exactly would I need to alter. I'm just curious.
     

Share This Page