XF 1.2 Assigning Trophy images

[Drae]

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

 

[Paul B]

Edit the trophy template.

<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]

Thank you

 

[Drae]

Edit the trophy template.

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

 

[Paul B]

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]

Ok, so it looks like this:

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

The coding looks like this:

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

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

 

[Paul B]

Float the image left.

 

[Drae]

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