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

XF 1.4 How to add trophy images?

Discussion in 'XenForo Questions and Support' started by Diverse, Aug 11, 2015.

  1. Diverse

    Diverse New Member

    Hey everyone I am wondering how can I add a Trophy image for my users?

    So if a member hits up to 100 post they get a new badge/trophy which will say Rated Awesome.

    Example:

    [​IMG]
     
  2. Jeremy

    Jeremy XenForo Moderator Staff Member

    You want to use the underground promotions &a banners under the user groups.
     
    Diverse likes this.
  3. Diverse

    Diverse New Member

    So I would have to make a new group for the trophy? I have pmed you also this makes no sense I am talking about the trophy system
     
  4. Jeremy

    Jeremy XenForo Moderator Staff Member

    What you have shown is a banner, not a trophy.

    Trophies are not displayed liked that. What you want are either banners or user titles based on lost count.
     
  5. Diverse

    Diverse New Member

    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
    [​IMG]
    Now example two is going to show when a member has hit 20 post
    [​IMG]
    This is what I am wanting sorry!
    I want my members to get more stars as they rank up as these examples.
     
  6. Diverse

    Diverse New Member

    can someone help me with this!?!?!>?!?!?!??!?!?!
     
  7. Lawrence

    Lawrence Well-Known Member

    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, :)
     
    Steve F likes this.
  8. Diverse

    Diverse New Member


    These are images I am wanting to upload not code! So do you know I can insert the images?
     
  9. Martok

    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.
     
    Lawrence likes this.
  10. Lawrence

    Lawrence Well-Known Member

    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.
     

Share This Page