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

XF 1.2 Assigning Trophy images

Discussion in 'Styling and Customization Questions' started by Drae, Jan 29, 2014.

  1. Drae

    Drae Active Member

    Can somebody remind me how you assign an image to each trophy please?
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Edit the trophy template.

    Code:
    <div class="trophy" id="trophy-{$trophy.trophy_id}">
        <div class="myClass">
            <img title="{$trophy.title}" alt="{$trophy.title}" src="styles/path/to/image_{$trophy.trophy_id}.png">
        </div>
    
    Then create a trophy image for each trophy ID and name it accordingly.
     
    Brad L and Drae like this.
  3. Drae

    Drae Active Member

    Thank you :D
     
  4. Drae

    Drae Active Member

    Okie dokie. Can you walk me through it please? I realise I go to the trophy template - do I just add it in at the bottom and change the trophie number and the image? As when I did that, it had the image sitting below the trophy currently on the list.
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    Look for the first line in the code above in the template.
    Add the rest of the code after it.
    Edit the code to change the path and name of the trophy images.

    Create your trophy images.
    Name them to correspond with the code above, e.g. trophy_1.png
    Then upload them to the path defined in the code above.
     
  6. Drae

    Drae Active Member

    Ok, so it looks like this:

    http://tournstone.sizaelrpg.com/help/trophies

    The coding looks like this:

    Code:
    <xen:require css="trophy.css" />
    
    <div class="trophy" id="trophy-{$trophy.trophy_1}">
    <div class="trophyimg">
      <img title="{$trophy.title}" alt="{$trophy.title}" src="http://draebox.com/images/bubbles/bubble1.png">
      </div>
       <div class="points">{$trophy.trophy_points}</div>
       <xen:if is="{$trophy.award_date}">
         <div class="awarded">{xen:phrase awarded}: <xen:datetime time="$trophy.award_date" /></div>
       </xen:if>
       <div class="info">
         <h3 class="title">{$trophy.title}</h3>
         <p class="description">{xen:raw $trophy.description}</p>
       </div>
    </div>
    
    
    Code:
    .trophy
    {
       overflow: hidden; zoom: 1;
    }
    
    .trophyimg {
    width: 50px;
    height: 50px;
    background-image: top center;
    display: inline;
    }
    
       .trophy .points
       {
         float: left;
         width: 65px;
         text-align: center;
         font-size: 18pt;
         font-weight: bold;
       }
       
       .trophy .awarded
       {
         float: right;
         font-size: 11px;
         color: @mutedTextColor;
       }
    
       .trophy .info
       {
         margin-left: 70px;
       }
       
       .trophy .info .title
       {
         font-size: 11pt;
         font-weight: bold;
       }
       
       .trophy .info .description
       {
         font-size: 11px;
         color: @mutedTextColor;
       }
      
    Any idea how to get the image for the trophy to be on the left hand of the points, preferably in line with it?
     
  7. Brogan

    Brogan XenForo Moderator Staff Member

    Float the image left.
     
  8. Drae

    Drae Active Member

    Thanks! I don't know why I didn't think of that XD
     

Share This Page