XF 1.4 How to add trophy images?
- Thread starter Diverse
- Start date
Okay for an example when someone posts one post they get a star rank ill post examples!
Okay once a member joins the site they get this rank right here.
Example for being a member
Now example two is going to show when a member has hit 20 post
This is what I am wanting sorry!
I want my members to get more stars as they rank up as these examples.
This simplest way to accomplish this is with a template edit, or two.
As you know at what trophy point value a new star will be shown, try the following. I'm using the message_user_info template as an example, as you may want it displayed elsewhere. Replace the numbers I used with the actual trophy points required (-1).
Find: <xen:require css="message_user_info.css" /> and below that add:
Depending where you want the stars to show, add this (in this example below the h3 that contains the user title)
<div class="trophyPointStars {$starWidth}"></div>
Add to your EXTRA.css template, something like this:
I never tested the above, but it should work.
BTW: from your first message it is clear that you were talking about trophy points, and not user banners. Just to let you know,
As you know at what trophy point value a new star will be shown, try the following. I'm using the message_user_info template as an example, as you may want it displayed elsewhere. Replace the numbers I used with the actual trophy points required (-1).
Find: <xen:require css="message_user_info.css" /> and below that add:
HTML:
<xen:set var="$starWidth">
<xen:if is="{$user.trophy_points} > 19">
oneStar
<xen:elseif is={$user.trophy_points} > 49" />
twoStars
<xen:elseif is={$user.trophy_points} > 99" />
threeStars
<xen:elseif is={$user.trophy_points} > 149" />
fourStars
<xen:else />
fiveStars
</xen:if>
</xen:set>Depending where you want the stars to show, add this (in this example below the h3 that contains the user title)
<div class="trophyPointStars {$starWidth}"></div>
Add to your EXTRA.css template, something like this:
HTML:
.trophyPointStars
{
background: url('@imagePath/to_your/stars_pic.png') no-repeat;
height: 24px; // replace with actual height of the pic
}
.oneStar
{
width: 24px; // actual width of a star
}
.twoStars
{
width: 48px;
}
.threeStars
{
// you get the idea, :)
}I never tested the above, but it should work.
BTW: from your first message it is clear that you were talking about trophy points, and not user banners. Just to let you know,
This simplest way to accomplish this is with a template edit, or two.
As you know at what trophy point value a new star will be shown, try the following. I'm using the message_user_info template as an example, as you may want it displayed elsewhere. Replace the numbers I used with the actual trophy points required (-1).
Find: <xen:require css="message_user_info.css" /> and below that add:
HTML:<xen:set var="$starWidth"> <xen:if is="{$user.trophy_points} > 19"> oneStar <xen:elseif is={$user.trophy_points} > 49" /> twoStars <xen:elseif is={$user.trophy_points} > 99" /> threeStars <xen:elseif is={$user.trophy_points} > 149" /> fourStars <xen:else /> fiveStars </xen:if> </xen:set>
Depending where you want the stars to show, add this (in this example below the h3 that contains the user title)
<div class="trophyPointStars {$starWidth}"></div>
Add to your EXTRA.css template, something like this:
HTML:.trophyPointStars { background: url('@imagePath/to_your/stars_pic.png') no-repeat; height: 24px; // replace with actual height of the pic } .oneStar { width: 24px; // actual width of a star } .twoStars { width: 48px; } .threeStars { // you get the idea, :) }
I never tested the above, but it should work.
BTW: from your first message it is clear that you were talking about trophy points, and not user banners. Just to let you know,
These are images I am wanting to upload not code! So do you know I can insert the images?
Martok
Well-known member
Lawrence's post explains this. You need code to do this as well as images (which are referred to in the EXTRA.css code) - see the background url bit.
As Martok pointed out, to achieve what you want is going to involve adding some code to the templates. This is really pretty simple to do, and XF's template merge won't over-write those changes when you upgrade,
If you are using more than one image, I suggest you combine them into one sprite sheet, to save on loading multiple images. The above css will need to be changed, but it won't take too much effort to do so.
Similar threads
