PDA

View Full Version : Top List Template mod Larger buttons and Site description under picture


chatfan
02 Jan 2007, 16:43
This is a template modification for the supercool Toplist (http://www.vbulletin.org/forum/showthread.php?t=98646) mod by Derekivey (http://www.vbulletin.org/forum/member.php?u=81169)
Toplist Version 2.0

My old toplist used 630x100 banners, but this was a bit too much so changed the template to allow for 450x100 banners. But to keep this looking good in a 750px wide template I needed to move the Site info under the banner.

Here is a live action preview:

my toplist (http://www.palaceplanet.net/forum/toplist.php)

The difference:

Original Look (http://www.palaceplanet.net/images/toplist-original-below.png)

Hacked version (http://www.palaceplanet.net/images/toplist-hacked.png)

This is my first attempt, feel free to let me know how this could have been done :P

NOTE: Random picture is turned off on my site so I did NOT edit that part. If you turn it on it will look messed up.

Sorry about that I got stuck fixing it, when you do please let me know.

Edited two templates, first I edited the Toplist template. This was just basic size changes to make sure the text alined. Edited the Toplist template:

$stylevar[htmldoctype]
<html dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>
$headinclude

<script type="text/javascript" src="clientscript/toplist.js?version=$toplist_version"></script>

<script type="text/javascript">
// rating phrases.
vbphrase["toplist_cannot_rate_site_no_permission"] = "$vbphrase[toplist_cannot_rate_site_no_permission]";
vbphrase["toplist_cannot_rate_site_no_site_selected"] = "$vbphrase[toplist_cannot_rate_site_no_site_selected]";
vbphrase["toplist_cannot_rate_site_site_does_not_exist"] = "$vbphrase[toplist_cannot_rate_site_invalid_rating]";
vbphrase["toplist_cannot_rate_site_invalid_rating"] = "$vbphrase[toplist_cannot_rate_site_invalid_rating]";
vbphrase["toplist_cannot_rate_site_already_rated"] = "$vbphrase[toplist_cannot_rate_site_already_rated]";
vbphrase["toplist_site_rated_successfully"] = "$vbphrase[toplist_site_rated_successfully]";
vbphrase["toplist_vote"] = "$vbphrase[toplist_vote]";
vbphrase["toplist_votes"] = "$vbphrase[toplist_votes]";

// report phrases.
vbphrase["toplist_report_site_no_permission"] = "$vbphrase[toplist_report_site_no_permission]";
vbphrase["toplist_report_site_no_site_selected"] = "$vbphrase[toplist_report_site_no_site_selected]";
vbphrase["toplist_report_site_site_does_not_exist"] = "$vbphrase[toplist_report_site_site_does_not_exist]";
vbphrase["toplist_report_site_reason_field_blank"] = "$vbphrase[toplist_report_site_reason_field_blank]";
vbphrase["toplist_report_site_report_submitted"] = "$vbphrase[toplist_report_site_report_submitted]";
</script>

<title>$vboptions[bbtitle] - $vbphrase[toplist]</title>
</head>
<body>
$header

$navbar
<if condition="$disabled != 1">
<if condition="$vboptions['toplist_check_if_code_exists'] == 1 AND $validate_bits != ''">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr align="center">
<td class="tcat" colspan="4">{$vbphrase['toplist_sites_pending_validation']}</td>
</tr>
<tr align="center">
<td class="alt1" colspan="4">$vbphrase[toplist_sites_pending_validation_desc]</td>
</tr>
<tr align="center">
<td class="thead">$vbphrase[toplist_site_name]</td>
<td class="thead">$vbphrase[toplist_site_url]</td>
<td class="thead">$vbphrase[toplist_edit]</td>
<td class="thead">$vbphrase[toplist_validate]</td>
</tr>
$validate_bits
<tr align="center">
<td class="thead" colspan="7"><div class="smallfont">&nbsp;</div></td>
</tr>
</table>
<br />
</if>

<form action="toplist.php" method="get">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="right">
<tr align="right">
<td>
<div class="smallfont">
$vbphrase[toplist_select_category]:
<select name="cid" onchange="this.form.submit();">
<option selected="selected" value="">$vbphrase[toplist_view_all_sites]</option>
<optgroup label="$vbphrase[toplist_categories]">
$cat_list
</optgroup>
</select>
<input type="submit" class="button" value="$vbphrase[toplist_go]" />
</div>
</td>
</tr>
</table>
</form>
<br /><br />
<if condition="$vboptions['toplist_show_random_sites'] == 1">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr align="center">
<td class="tcat" colspan="<if condition="$show['layout'] == 0">7<else />6</if>">{$vbphrase['toplist_random_site']}</td>
</tr>
<tr align="center">
<td class="thead" width="20">$vbphrase[toplist_rank]</td>
<td class="thead">$vbphrase[toplist_site_name_and_description]</td>
<if condition="$vboptions['toplist_show_user_banners'] == 1 AND $show['layout'] == 0">
<td class="thead" width="88">$vbphrase[toplist_button]</td>
</if>
<td class="thead" width="50">$vbphrase[toplist_in]</td>
<td class="thead" width="50">$vbphrase[toplist_out]</td>
<td class="thead" width="50">$vbphrase[toplist_views]</td>
<td class="thead" width="90">$vbphrase[toplist_rating]</td>
</tr>
<if condition="$randchk >= 1 OR $num_rows >= 1">
<tr align="center">
<td class="alt2">$rand_rank</td>
<td class="alt1">
<a href="$randsite[url]"<if condition="$vboptions['toplist_count_out_from_guests'] OR !$show['guest']"> onclick="out($randsite[id])"</if><if condition="$vboptions[toplist_open_in_new_window]"> target="_blank"</if>>$randsite[name]</a><br />$randsite[description]<br />
<if condition="$vboptions['toplist_show_user_banners'] == 1 AND ($show['layout'] == 1 OR $show['layout'] == 2)">
<if condition="$randsite['imagecode'] != ''">
<br /><a href="$randsite[url]"<if condition="$vboptions['toplist_count_out_from_guests'] OR !$show['guest']"> onclick="out($randsite[id])"</if><if condition="$vboptions[toplist_open_in_new_window]"> target="_blank"</if>><img src="$vboptions[bburl]/toplist_image.php?do=view&amp;id=$randsite[id]" border="0" alt="" /></a>
</if>
</if>
</td>
<if condition="$vboptions['toplist_show_user_banners'] == 1 AND $show['layout'] == 0">
<if condition="$randsite['imagecode'] != ''">
<td class="alt2" width="88"><a href="$randsite[url]"<if condition="$vboptions['toplist_count_out_from_guests'] OR !$show['guest']"> onclick="out($randsite[id])"</if><if condition="$vboptions[toplist_open_in_new_window]"> target="_blank"</if>><img src="$vboptions[bburl]/toplist_image.php?do=view&amp;id=$randsite[id]" border="0" alt="" /></a></td>
<else />
<td class="alt2" width="88">$vbphrase[toplist_none]</td>
</if>
</if>
<td class="alt<if condition="$vboptions['toplist_show_user_banners'] == 1 AND $show['layout'] == 0">1<else />2</if>" width="50">$randsite[in]</td>
<td class="alt<if condition="$vboptions['toplist_show_user_banners'] == 1 AND $show['layout'] == 0">2<else />1</if>" width="50">$randsite[out]</td>
<td class="alt<if condition="$vboptions['toplist_show_user_banners'] == 1 AND $show['layout'] == 0">1<else />2</if>" width="50">$randsite[views]</td>
<td class="alt<if condition="$vboptions['toplist_show_user_banners'] == 1 AND $show['layout'] == 0">2<else />1</if>" width="90">
<if condition="$randsite['rating_average'] == 0">
<span id="rating_image_random_site"></span>
<span id="rating_votes_random_site">
$vbphrase[toplist_not_rated]
</span>
<else />
<img src="$stylevar[imgdir_rating]/toplist_rating_{$randsite[rating_average]}.gif" name="rating_image_random_site" alt="" />
<br />
<span id="rating_votes_random_site">
$randsite[votes]
<if condition="$randsite['votes'] == 1">
$vbphrase[toplist_vote]
<else />
$vbphrase[toplist_votes]
</if>
</span>
</if>
<if condition="!$show['guest'] AND !$rated">
<br />
<span id="ratemenu_random_site"><a href="toplist.php?do=rate&amp;id=$randsite[id]"<if condition="!$show['popups'] OR $show['ajax']">onclick="javascript:window.open('$vboptions[bburl]/toplist.php?do=rate&amp;id=$
randsite[id]','rate_site','menubar=0,resizable=1,width=$vboptions[toplist_popup_width],height=$vboptions[toplist_popup_height]');return false;"</if>>$vbphrase[toplist_rate_site]</a> <if condition="$show['popups'] AND !$show['ajax']"><script type="text/javascript"> vbmenu_register("ratemenu_random_site", true); </script></span></if>
</if>
</td>
</tr>
<else />
<tr align="center">
<td class="alt1" colspan="7">$vbphrase[toplist_none]</td>
</tr>
</if>

<tr align="center">
<td class="thead" colspan="7"><div class="smallfont">&nbsp;</div></td>
</tr>
</table>
<br />
</if>
</if>

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr align="center">
<td class="tcat" colspan="<if condition="$show['layout'] == 0">7<else />6</if>">{$vboptions[bbtitle]} {$vbphrase['toplist']}</td>
</tr>
<tr align="center">
<if condition="$cat != 1">
<td class="thead" width="25">$vbphrase[toplist_rank]</td>
</if>

<if condition="$vboptions['toplist_show_user_banners'] == 1 AND $show['layout'] == 0">
<td class="thead" width="450">$vbphrase[toplist_button]</td>
</if>
<td class="thead" width="20">$vbphrase[toplist_in]</td>
<td class="thead" width="20">$vbphrase[toplist_out]</td>
<td class="thead" width="20">$vbphrase[toplist_views]</td>
<td class="thead" width="90">$vbphrase[toplist_rating]</td>
</tr>
$html
<tr align="center">
<td class="thead" colspan="7">
<div class="smallfont">
<if condition="$vboptions['toplist_enabled'] == 1 AND $permissions['toplistpermissions'] & $vbulletin->bf_ugp['toplistpermissions']['canaddsites']">
<a href="$vboptions[bburl]/add_site.php">$vbphrase[toplist_add_site]</a>
<else />
&nbsp;
</if>
</div>
</td>
</tr>
</table>
<br />
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr align="$stylevar[right]">
<td>$pagenav</td>
</tr>
</table>
<br />
<center>$last_reset</center>

<if condition="!$show['guest'] AND $show['popups'] AND !$show['ajax'] AND !$rated">
<!-- random site rating popup menu -->
<form name="rating_form_random_site" action="#">
<div class="vbmenu_popup" id="ratemenu_random_site_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="tcat">$vbphrase[toplist_rate_site]</td>
</tr>
<tr>
<td class="thead"><span style="font-weight:normal">$randsite[name]</span></td>
</tr>
<tr>
<td class="panelsurround" align="center">
<div class="panel">
<div align="$stylevar[left]">

<fieldset class="fieldset">
<legend>$vbphrase[toplist_what_is_your_rating_of_this_site]</legend>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
<tr>
<td><label for="rb_rating_random_site_5"><img src="$stylevar[imgdir_rating]/rating_5.gif" alt="5" />&nbsp;<input type="radio" name="rating" id="rb_rating_random_site_5" value="5" />&nbsp;$vbphrase[toplist_excellent]</label></td>
</tr>
<tr>
<td><label for="rb_rating_random_site_4"><img src="$stylevar[imgdir_rating]/rating_4.gif" alt="4" />&nbsp;<input type="radio" name="rating" id="rb_rating_random_site_4" value="4" />&nbsp;$vbphrase[toplist_good]</label></td>
</tr>
<tr>
<td><label for="rb_rating_random_site_3"><img src="$stylevar[imgdir_rating]/rating_3.gif" alt="3" />&nbsp;<input type="radio" name="rating" id="rb_rating_random_site_3" value="3" />&nbsp;$vbphrase[toplist_average]</label></td>
</tr>
<tr>
<td><label for="rb_rating_random_site_2"><img src="$stylevar[imgdir_rating]/rating_2.gif" alt="2" />&nbsp;<input type="radio" name="rating" id="rb_rating_random_site_2" value="2" />&nbsp;$vbphrase[toplist_bad]</label></td>
</tr>
<tr>
<td><label for="rb_rating_random_site_1"><img src="$stylevar[imgdir_rating]/rating_1.gif" alt="1" />&nbsp;<input type="radio" name="rating" id="rb_rating_random_site_1" value="1" />&nbsp;$vbphrase[toplist_terrible]</label></td>
</tr>
</table>
</fieldset>

</div>
</div>

<div style="margin-top:$stylevar[cellpadding]px">
<input type="button" class="button" value="$vbphrase[toplist_rate_submit]" accesskey="s" onclick="rate($randsite[id], document.rating_form_random_site.rating.value, true)" />
</div>
</td>
</tr>
</table>
</div>
</form>
<!-- / random site rating popup menu -->
</if>

$rate_menus

$report_menus

$footer
</body>
</html>


The Second one, the Toplist_Site_Bits need a extra table to fit the site info under the banner. To retain the border set in you style sheet (I think) you can add this to the beginning of the Table info:

class="tborder"

Making it look something like this:

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">



Anyway, here is the full version of the Toplist_Site_Bits:

<table cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr align="center">
<if condition="$cat != 1">
<td width="25" class="alt2">$rank</td>
</if>

<if condition="$vboptions['toplist_show_user_banners'] == 1 AND $show['layout'] == 0">
<if condition="$sr['imagecode'] != '' AND $sr['in'] >= $vboptions['toplist_number_of_in_hits_until_banner_shows']">
<td class="alt2" width="450"><a href="$sr[url]"<if condition="$vboptions['toplist_count_out_from_guests'] OR !$show['guest']"> onclick="out($sr[id])"</if><if condition="$vboptions[toplist_open_in_new_window]"> target="_blank"</if>><img src="$vboptions[bburl]/toplist_image.php?do=view&amp;id=$sr[id]" border="0" alt="" /></a></td>
<else />
<td class="alt2" width="88">$vbphrase[toplist_none]</td>
</if>
</if>
<td class="alt<if condition="$vboptions['toplist_show_user_banners'] == 1 AND $show['layout'] == 0">1<else />2</if>" width="20">$sr[in]</td>
<td class="alt<if condition="$vboptions['toplist_show_user_banners'] == 1 AND $show['layout'] == 0">2<else />1</if>" width="20">$sr[out]</td>
<td class="alt<if condition="$vboptions['toplist_show_user_banners'] == 1 AND $show['layout'] == 0">1<else />2</if>" width="20">$sr[views]</td>
<td class="alt<if condition="$vboptions['toplist_show_user_banners'] == 1 AND $show['layout'] == 0">2<else />1</if>" width="90">
<if condition="$sr['rating_average'] == 0">
<span id="rating_image_$sr[id]"></span>
<span id="rating_votes_$sr[id]">
$vbphrase[toplist_not_rated]
</span>
<else />
<img src="$stylevar[imgdir_rating]/toplist_rating_{$rating_image}.gif" name="rating_image_$sr[id]" alt="" />
<br />
<span id="rating_votes_$sr[id]">
$sr[votes]
<if condition="$sr['votes'] == 1">
$vbphrase[toplist_vote]
<else />
$vbphrase[toplist_votes]
</if>
</span>
</if>
<if condition="!$show['guest'] AND $show['rate'] AND !$rated">
<br />
<span id="ratemenu_$sr[id]"><a href="toplist.php?do=rate&amp;id=$sr[id]"<if condition="!$show['popups'] OR $show['ajax']">onclick="javascript:window.open('$vboptions[bburl]/toplist.php?do=rate&amp;id=$
sr[id]','rate_site','menubar=0,resizable=1,width=$vboptions[toplist_popup_width],height=$vboptions[toplist_popup_height]');return false;"</if>>$vbphrase[toplist_rate_site]</a> <if condition="$show['popups'] AND !$show['ajax']"><script type="text/javascript"> vbmenu_register("ratemenu_$sr[id]", true); </script></if></span>
</if>
</td>
</tr>
</table>
<table cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<td class="alt1"><if condition="$show['rank_images']"><span style="float:right"><img src="$stylevar[imgdir_misc]/$rank_image" alt="" /></span></if><a href="$sr[url]"<if condition="$vboptions['toplist_count_out_from_guests'] OR !$show['guest']"> onclick="out($sr[id])"</if><if condition="$vboptions[toplist_open_in_new_window]"> target="_blank"</if>>$sr[name]</a><br />$sr[description]
<if condition="$vboptions['toplist_show_user_banners'] == 1 AND $show['layout'] == 1">
<if condition="$sr['imagecode'] != '' AND $sr['in'] >= $vboptions['toplist_number_of_in_hits_until_banner_shows']">
<br /><br /><a href="$sr[url]"<if condition="$vboptions['toplist_count_out_from_guests'] OR !$show['guest']"> onclick="out($sr[id])"</if><if condition="$vboptions[toplist_open_in_new_window]"> target="_blank"</if>><img src="$vboptions[bburl]/toplist_image.php?do=view&amp;id=$sr[id]" border="0" alt="" /></a><br />
</if>
</if>
<if condition="$show['edit'] OR $show['delete'] OR $show['report']">
<br />
</if>
<if condition="$show['edit']">
<a href="$vboptions[bburl]/edit_site.php?id=$sr[id]">$vbphrase[toplist_edit_site]</a>
</if>
<if condition="$show['delete']">
<a href="$vboptions[bburl]/delete_site.php?id=$sr[id]">$vbphrase[toplist_delete_site]</a>
</if>
<if condition="$show['report']">
<span id="reportmenu_$sr[id]">
<a href="toplist.php?do=report&amp;id=$sr[id]"<if condition="!$show['popups'] OR $show['ajax']"> onclick="javascript:window.open('$vboptions[bburl]/toplist.php?do=report&amp;id=$sr[id]','report','menubar=0,resizable=1,width=320,height=220');return false;"</if>>$vbphrase[toplist_report]</a> <if condition="$show['popups'] AND !$show['ajax']"><script type="text/javascript"> vbmenu_register("reportmenu_$sr[id]", true); </script></if>
</span>
</if>
<if condition="$vboptions['toplist_show_user_banners'] == 1 AND $show['layout'] == 2">
<if condition="$sr['imagecode'] != '' AND $sr['in'] >= $vboptions['toplist_number_of_in_hits_until_banner_shows']">
<br /><br /><a href="$sr[url]"<if condition="$vboptions['toplist_count_out_from_guests'] OR !$show['guest']"> onclick="out($sr[id])"</if><if condition="$vboptions[toplist_open_in_new_window]"> target="_blank"</if>><img src="$vboptions[bburl]/toplist_image.php?do=view&amp;id=$sr[id]" border="0" alt="" /></a>
</if>
</if>
</td>
</table>
<br>



Hope this is of some use, as you might notice I also removed the [ ] from the "edit site" Delete site" etc. texts. Found them too distracting, those buttons should probably move to the right and much smaller.

hope this is of some help, have fun!

Included as attachments are the template files, saved them as .php because they make my ultraedit look pretty :eek:

:p

GruntHalo
02 Jan 2007, 18:27
good job :)

chatfan
09 Jan 2007, 14:43
Thanks, only thing that needs to be fixed now is the Random banner.

commaik
14 Feb 2007, 16:57
mhmm,
i copied the full code of your toplist template in mine. But there ist nothing???

Your second template change is in your first include, isn`t it??

What have i to change to get your hacked version??

thx

chatfan
16 Feb 2007, 16:49
Hi,

sorry about that, forgot to include the name of the second template you needed to hack:

Toplist_Site_Bits

hope this helps you out.

commaik
18 Feb 2007, 10:02
It works, thank you

nyunyu
21 Nov 2007, 19:45
look at my site... http://nyunyu.info/animeproject/toplist.php

it messed up. no graphics appears, only coding.

can you help me ?