Design an Aadvark Toplist anpassen

Donnerstag, den 07. Januar 2010 um 09:50 Uhr

(8 votes)

Was wir brauchen:

  • ein fertiges Design (index.html + style.css)
  • ein wenig Grundwissen in HTML und CSS

Grundlegendes gilt es zu beachten:

Alle verlinkungen im Template auf Grafiken, Stylesheets o.Ä. müssen zu aller erst umgeschrieben werden da das Script mit Präfixen arbeitet. Um mal ein paar Beispiele zu nennen:

 
 Normaler Link: Http://www.IhreDomain.de/skins/skinname/Style.css
 angepasster Link: {$skins_url}/{$skin_name}/Style.css

Hierbei linkt  {$skins_url} bis zu diesem teil: Http://www.IhreDomain.de/Skins und {$Skin_name} in den Ordner des Templates.

Eine weiterer Tag zum Verlinken ist {$list_url} und dieser Tag linkt nur Ihren Domainnamen (http://www.IhreDomain.de).

Wichtig ist dass alle internen Links so umgeschrieben werden. generell gilt: Für Links die in den Template Ordner gehen {$skins_url}/{$skun_name} verwenden. Für alle anderen internen links kann man {$list_url} verwenden.

Anpassung des Designs:

wrapper.html:

Fangen wir an mit dem Headbereich:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 
<head>
 
<title>{$list_name} - {$header}</title>
 
<meta http-equiv="Content-Type" content="text/html;charset={$lng->charset}" />

 

Hier sehen wir den Standart Headbereich einer HTML.Datei. im Title sehen wir dass Präfixe verwendet wurden die Automatisch dann durch den Listennamen ersetzt werden. Das selbe gilt auch für den "Content-Type".

 

 
<link rel="stylesheet" type="text/css" media="screen" href="{$skins_url}/{$skin_name}/screen.css" />

 

Hier linken wir zum Stylesheet. Es ist eben eigentlich wie jeder gewöhnliche HTML Header Strukturiert nur dass eben wie oben geschrieben die Links durch Tags ersetzt wurden.

 

 
<link rel="alternate" href="{$list_url}/{$feed}" type="application/rss+xml" title="{$list_name}" />

 

Hier verlinken wir zur Feed.php. In dem Feed werden in der Regel die Top 10 Der Liste angezeigt. Man kann aber auch den Feed als Sitemap bei den Suchmaschienen nutzen. Hierzu müsste dieser aber abgeändert werden.

 

 
<script type="text/javascript">
 
function out(username)
 
{
 
  image = new Image();
 
  image.src= '{$list_url}/index.php?a=out&u=' + username;
 
}
 
</script></head>

 

Das ist der Java Code. Damit das Script festhalten kann wann jemand von welcher Seite gekommen ist bzw zu welcher er geht.

Das war schon der Headbereich.

Nun zum Body Bereich:

Da nun jeder Body Bereich eines Templates anders ist bzw jeder sein template anders gestaltet erläutere ich an dieser Stelle nur die Tags und deren Funktionen.

Fangen wir mit dem Hauptmenu an:

 

 
<a href="{$list_url}/" class="menu">{$lng->main_menu_rankings}</a>
 
        <a href="{$list_url}/index.php?a=join" class="menu">{$lng->main_menu_join}</a>
 
        <a href="{$list_url}/index.php?a=user_cpl" class="menu">{$lng->main_menu_user_cp}</a>
 
        <a href="{$list_url}/index.php?a=stats" class="menu">{$lng->stats_overall}</a>

 

Die links sind Standart so eingerichtet. Man kann aber mod_rewrite nutzen um schönere URL's zu erzielen. Ich verwende meistens diese Präfixe da Sie - falls jemand eine Englische oder anders Sprachige Topliste mit einem Skin betreiben möchte das Menu auch in seiner Sprache angezeigt bekommt.

{$lng->main_menu_rankings} = Hauptseite.

{$lng->main_menu_join} = Seite eintragen

{$lng->main_menu_user_cp} = Mitgliederbereich

{$lng->stats_overall} = GesamtStatus der Topliste

Suchfunktionen einbinden:

Fangen wir mit der Filterfunktion an. Bei der filter Funktion handelt es sich um ein Formular (wenn das Formular erstellt wird am Schluss nicht die "Submit"-Funktion vergessen). Das Formular muss selbst erstellt werden. Und nun zu den Tags zu kommen die das Formular eingebunden werden können.

{$ranking_methods_menu} = Man kann die Liste mit dieser Funktion filtern. Das heißt man kann sich nur die Plätze 20-40 anzeigen lassen (oder auch andere).
{$categories_menu} = Hier kann man sich die Einträge der Topliste nach Kategorien anzeigen lassen.
{$multiple_pages_menu} = Hier kann man die Anzahl der anzuzeigenden Ergebnisse auswählen

Die Such Funktion wird rein pber ein Formular definiert und kan wie Folgt einfach integriert werden:

 
<form action="index.php" method="get">
    <input type="hidden" name="a" value="search" />
    <input type="text" name="q" size="18" value="{$query}" />
    <input type="submit" value="{$lng->search_header}" />
  </form>

 Die Anpassung erfolgt dann per CSS.

 Die Ausgabe der Ranking Tabellen:

{$content} = Gibt die Datei Table_wrapper.html aus. Anpassungen zur Ausgabe können in der zuvor genannten Datei vorgenommen werden.

Footer und © :

Im Footer (oder wo sie mögen) muss der Tag {$powered_by} eingebunden sein. Ansonsten blockiert das Script alle Funktionen. Das Powered by gibt einen Backlink zu Aadvark Topsites Entwicklerhomepage.

Misc Tags:

{$list_name} = Gibt einfach nur den Listennamen aus.

{$lng->main_members}: {$num_members} = Gibt Mitglieder: Anzahl an (auch in anderen Sprachen).

{$lng->main_executiontime}: {$execution_time} = Gibt die Scriptlaufzeit: Zahl an.

{$lng->main_queries}: {$num_queries} = Gibt die SQL abfragen: Anzahl an.

 CSS-Definitionen:

Folgende Klassen müssen für das Script definiert werden:

 
/* Ranking Style 1 Ebene*/
.table_top_title { }
.table_top_rank { }
.table_top_description { }
.table_top_banner { }
.table_top_stats { }
.table_top_rating { }
/* Ranking Style 2 Ebene */
.table_title { }
.table_rank { }
.table_description {  }
.table_stats { }
/* Stats Style */
.stats_top { }
.stats_left {  }
.stats1 { }
.stats2 { }
 
 

Ich empfehle wenn man das noch nie gemacht hat einfach als Default Style die klassen mit denen des Standart Templates zu ersetzen (oder eines von meinen die Hier auf der Seite zum Download stehen). Dann ist es einfacher alles anzupassen.

Verzeichnis Struktur eines Skins:

Wichtige Dateien im Verzeichnis:

  • wrapper.html = Die eigentliche Ausgabe des Designs. Man kann die wrapper.html vergleichen mit der Index.html. Hier wird das meiste festgelegt.

  • table_wrapper.html = Definiert die Ausgabe des Contents. Hier können Grundlegende Einstellungen der Listen-Ausgabe festgelegt werden.

Ausgabe der RankingTabellen:

table_close.html = hier wird das Ende (Seitenende) der 2. Rankingebene definiert. In der Regel wird in dieser Datei nur die Tabelle und das Div beendet.

table_filler.html = -Sofern in der Configurtion festgelegt- Gibt diese Datei "deine Seite Hier" auf alle leeren Plätze aus und linkt zum anmelde Formular.

table_open.html = definiert den Kopf der 2. Tabellenebene. In dieser Datei sind auch die Überschriften für die einzelnen Spalten enthalten.

table_row.html = Der eigentliche Style der Ranking Tablle (2. Ebene)

table_top_close.html = Das ende der Topranking Tabelle(1. Ebene). Standart mäßig ist diese Datei leer.

table_top_open.html = Die Kopfzeile der Topranking Tabelle (1. Ebene).Standart mäßig ist auch diese Datei leer.

table_top_row.html = Das Layout der Ranking Tabelle (1. Ebene). Hier definierst du was, wo, wie Angezeigt werden soll.

Wichtig ist zu beachten dass das Script 2 Ranking-Arten zur verfügung stellt. Diese können über die Config (admin CP) eingestellt werden. Alle Dateien die mit table_top anfangen sind für die Definition der 1. Ebene (Top-Row) verantwortlicht. Alle Dateien die mit "Table" Anfangen (ausser die Datei "table_wrapper.html") sind für die untere Ebene verantwortlich. In den meisten fällen ist die 1. Ebene die Anzeige mit Banner und die 2. Ebene nur mit dem Titel, Beschreibung, Palzierung und den Statistiken.

Übersicht der Grafiken und Ihre Funktionen (alle Grafiken sind Standart in das Script integriert. Wichtig ist es die Namen Exakt so zu verwenden. Wobei die endungen im Admin CP geändert werden können):

Vorschau - Bildname - Funktion                         

 - rate_0.png - Wenn eine Seite noch nie- oder sehr schlecht Bewertet wurde.

 - rate_1.png - Bewertung 1-5 Punkten

 - rate_2.png - Bewertung 2-5 Punkten

 - rate_3.png - Bewertung 3-5 Punkten

 - rate_4.png - Bewertung 4-5 Punkten

 - rate_5.png - Bewertung 5-5 Punkten

                       - up.png - Zeigt an dass die Seite Plätze aufgestiegen ist.

                       - neutral.png - Zeigt an dass die Seite unverändert ist.

                       - down.png - Zeigt an dass die Seite abgestiegen ist.

               - stats.png - Der Button der auf die Stats einer jedenen eingetragenen Seite Linkt

 

Alle anderen Dateien:

  • ad_break.html = Hier kann ein Ad-Code eingefügt werden. Dieser kann dann in den Grundeinstellungen Angezeigt werden.

  • ad_break_top.html = Hier kann ein Ad-Code eingefügt werden. Dieser kann dann in den Grundeinstellungen Angezeigt werden.

  • admin.html = hier kann das Layout des Admin-Menus angepasst werden bzw geändert.

  • admin_login.html = Hier kann das Layout vom Admin Login angepasst werden.

  • edit_finish.html = nach einer änderung einer Seite wird der Benutzer auf diese Seite weitergeleitet. Hier kann das Layout ebenfalls angepasst werden.

  • edit_form.html = Hier findest du das ÄnderFormular. Du kannst hier verschiedene Anpassungen/Texte/Regeln für deinen Skin vornehmen.

  • error.html = Diese Datei gibt fehler aller Art aus z.B.: Wenn ein Fehler in der Anmeldung gemacht wurde oder der Login falsch eingetragen wurde.

  • featured_member.html = Hier kannst du das Layout der Featured Member festlegen. Standartmäßig ist das Layout das selbe wie das des Normalen Rankings nur dass ein Random Member aus der Liste angezeigt wird.

  • getaway.html = Wenn jemand einen Hit-In zu deiner Topliste macht gelangt er zu aller erst auf diese Seite auf der er den Hit-In bestätigen muss. Standartmäßig nur mit einer Ja/Nein Funktion ausgestattet. Kann aber auch mit Captcha versehen werden.

  • info.php = Diese Datei gibt im Admin CP den namen, Autor und die Autoren-Webseite aus. Diese Datei ist nur eine Informations Datein- wird aber benötigt.

  • join_captcha.html = Dies ist die Ausgabe des Captchas.

  • join_email.html = Hier kann man die E-Mail die nach einer Erfolgreichen Anmeldung an den User gesendet wird Anpassen.

  • join_email_admin.html = Hier kann man die E-Mail die (sofern es in der Config so eingestellt ist) nach einer Anmeldung eines Useres an den Admin gesendet wird bearbeiten.

  • join_Finish.html = Hier wird dem User (sofern keine Freischaltung durch den Admin nötig ist) der Linkcode Angezeigt den er auf seiner Seite einzutragen hat.

  • join_finish_approve.html = Hier wird dem User mittgeteilt dass seine Seite nun eingetragen ist aber erst freigeschaltet werden muss.

  • join_Form.html = Das ist das Anmlede Formular. Hier können Texte/Regeln und das Layout angepasst werden.

  • join_question.html = Wenn in der Config eine Frage mit antwort festgelegt wurde so wird Sie hier ausgegeben.

  • link_code.html = Hier wird der Link-Code ausgegeben. Hier sollte man nichts ändern sofern man nicht Erfahrungen mit PHP hat.

  • lost_pw_email.html = Wenn ein User sein Passwort vergessen hat so bekommt er Diese E-Mail die in der Datei festgelegt ist.

  • lost_pw_finish.html = Hier wird die bestätigung ausgegeben wenn der User sein Passwort angefordert hat.

  • lost_pw_form.html = Die form wo user Ihre Passwörter anfordern können.

  • rate_email_admin.html = Sofern in der Config eingestellt bekommt der Admin eine E-Mail wenn ein User einen anderen Bewertet (diese Einstellung möglichst nicht verwenden da sonst das Postfach dauer-voll ist).

  • rate_finish.html = Bestätigungstext für den User nachdem er eine Seite Bewertet hat.

  • rate_form.html = Die eigentliche Bewertungs-Form. Hier empfehle ich das Textfeld zu entfernen (beugt Spam vor).

  • search_form.html = Such Formular

  • search_result.html = Das suchergebis (wenn nur 1 Suchergebnis vorliegt) wird hier Ausgegeben.

  • search_results.html = Hier werden die Suchergebnise Ausgegeben sofern mehr als 1 Suchergebnis vorliegt.

  • ssi_new.html = Definition der einzelnen Suchergebnise.

  • ssi_new_row.html = Definition der Suchergebnisse bei mehreren Ergebnissen (Ausgabe).

  • ssi_top.html = bei meherern Suchergebnissen wird hier der unterer Bereich definiert.

  • ssi_top_row.html = bei mehrern Suchergebissen wird hier der ober Teil definiert.

  • stats.html = Hier werden die Statistiken der Jeweiligen eingetragenen Seite ausgegeben.

  • stats_overall.html = Die kompletten Statistiken der Topliste (Hits In/Out, Tag,Woche,Monat,Jahre).

  • stats_review.html = Hier wird dei Ausgabe der Stats (auf der Hauptseite ganz unten) Ausgegeben.

  • User_cp.html = Definition des User CP's

  • User_cp_login.html = Anmeldungs Fomular für das User CP