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

[Rum Runner Entertainment]

I was looking to achieve something like this:


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

 

[Paul B]

The background position denotes which part of the sprite is shown.

 

[Rum Runner Entertainment]

The background position denotes which part of the sprite is shown.

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

 

[Rum Runner Entertainment]

@Brogan, Is there a way to specify them? How exactly does that work?

 

[Rum Runner Entertainment]

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.

 

[Paul B]

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.

 

[Rum Runner Entertainment]

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.

 

[Paul B]

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?

 

[Rum Runner Entertainment]

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.

 

[Paul B]

So that CSS will work then.

 

[Rum Runner Entertainment]

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

 

[Paul B]

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

 

[Rum Runner Entertainment]

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

 

[Paul B]

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

 

[Rum Runner Entertainment]

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

 

[Rum Runner Entertainment]

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:View attachment 81411 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.

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