• 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

Brogan

XenForo moderator
Staff member
#2
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.
 

Drae

Active member
#4
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.
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.
 

Brogan

XenForo moderator
Staff member
#5
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.
 

Drae

Active member
#6
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?