This will place the highscore image on top of the thumbnail to show that the game is a highcore game.
Here's an example of the final result. You can also view this at http://www.bestarcadescript.com.
- watermark_HS.JPG (9.96 KiB) Viewed 266 times
Some guidelines before we start:
- This instruction will only use the Default theme as an example.
- I will not go over how to edit each file as it is pretty close to the first file you edit.
- Use a text editor such as Notepad++ (free) or Textpad (commercial).
Here are the files that needs to be edited:
main.css
default.tpl
sb_mostplayed.tpl
sb_toprated.tpl
sb_latestcomments.tpl
sb_latestgame.tpl
sb_randomgame.tpl
category.tpl
search.tpl
favorites.tpl
usergamehistory.tpl
toprated.tpl
comments.tpl
Instruction:
- Open main.css from the Default template folder with your text editor.
- Add the following codes at the end of the file:
- Code: Select all
#watermark_box {
position:relative;
display:block;
}
img.watermark {
position: absolute;
top: 1px;
left: 1px;
}
- Save and close main.css
- Open default.tpl with your text editor.
- Around line 26: Version 3.0 and 3.01 has the following:
- Code: Select all
{section name=i loop=4}
<tr>
<th scope="row"><a href="{if $modrewrite == "1"}/{$games[nr][i].gamId}/{$games[nr][i].gamName|replace:" ":"-"}.html{else}/play.php?gamId={$games[nr][i].gamId}{/if}"><img src="/games/thumb/{$games[nr][i].gamThumb}" width="60" alt="{$games[nr][i].gamName}" /></a></th>
<td>
<a href="{if $modrewrite == "1"}/{$games[nr][i].gamId}/{$games[nr][i].gamName|replace:" ":"-"}.html{else}/play.php?gamId={$games[nr][i].gamId}{/if}">{$games[nr][i].gamName}</a> <strong>##MOD_GAMES_PLAYES_LABEL##:</strong> {$games[nr][i].gamPlaysTotal} {if $games[nr][i].supportHighScore}<img src="/images/highscore.png" style="border:0" alt="Support High Score" title="Support High Score" width="59" height="15" />{/if}<br />
<p>{$games[nr][i].gamDesc}</p>
</td>
</tr>
{/section}
- This is how it's supposed to look like when you're done:
- Code: Select all
{section name=i loop=4}
<tr>
<th scope="row">
<div id="watermark_box"><a href="{if $modrewrite == "1"}/{$games[nr][i].gamId}/{$games[nr][i].gamName|replace:" ":"-"}.html{else}/play.php?gamId={$games[nr][i].gamId}{/if}"><img src="/games/thumb/{$games[nr][i].gamThumb}" width="60" alt="{$games[nr][i].gamName}" />{if $games[nr][i].supportHighScore}<img src="/images/highscore.png" class="watermark" style="border:0" alt="##MOD_GAMES_HIGHSCORE_IMAGE_TITLE##" title="##MOD_GAMES_HIGHSCORE_IMAGE_TITLE##" />{/if}</a>
</div>
</th>
<td>
<a href="{if $modrewrite == "1"}/{$games[nr][i].gamId}/{$games[nr][i].gamName|replace:" ":"-"}.html{else}/play.php?gamId={$games[nr][i].gamId}{/if}">{$games[nr][i].gamName}</a> <strong>##MOD_GAMES_PLAYES_LABEL##:</strong> {$games[nr][i].gamPlaysTotal}<br />
<p>{$games[nr][i].gamDesc}</p>
</td>
</tr>
{/section}
- To re-cap above code sections. We wrapped the image inside the watermark_box div, placed the highscore_png image inside that div and labeled it as a watermark class.
If you have any question, just post it on this tutorial or wait for next release.
Thanks,
Geoffrey
