[HowTo] Splitten und Designen der index

[Datex]

(1) Kategorientrennen

(Beschreibung)
Diese template Modifikation bewirkt das zwischen jeder Kategorie eine weise Zeile eingefügt wird.

(Credits)
Diese Modifikation wurde von xiphoid erstellt und von mir nur ins Deutsche übertragen. Orginal zufinden unter http://www.vbulletin.com/forum/showt...threadid=48020

(Installation)
Wir müssen einige templates bearbeiten. Macht euch am besten ein Backup der templates, da einige sich beschwert haben das sie die templates nicht mehr in den Orginal zustand bringen konnten.
Ok die Installation ist in ein paar schritten erledigt:

• Schritt 1
• Admin Control Panel (ACP).
  Templates > Modify > Expand
  Forum Home Page Templates > Expand
  forumhome > change original
• Finde den folgenden Code (er sollte über $forumbits sein) und lösche ihn.
  

  <tr align="center">
    <td bgcolor="&#123;tableheadbgcolor}"><smallfont>&nbsp;</smallfont></td>
    <td bgcolor="&#123;tableheadbgcolor}" width="80%" align="left"><smallfont color="&#123;tableheadtextcolor}"><b>Forum</b></smallfont></td>
    <td bgcolor="&#123;tableheadbgcolor}"><smallfont color="&#123;tableheadtextcolor}"><b>Beiträge</b></smallfont></td>
    <td bgcolor="&#123;tableheadbgcolor}"><smallfont color="&#123;tableheadtextcolor}"><b>Themen</b></smallfont></td>
    <td bgcolor="&#123;tableheadbgcolor}" nowrap><smallfont color="&#123;tableheadtextcolor}"><b>Letzter Beitrag</b></smallfont></td>
    <td bgcolor="&#123;tableheadbgcolor}" width="20%"><smallfont color="&#123;tableheadtextcolor}"><b>Moderator</b></smallfont></td>
  </tr>

• Jetzt finde $forumbits nochmal und füge in einer neuen Zeile darunter den folgenden Code:
  

  </table>
  </td></tr></table><br>
  <table cellpadding="&#123;tableouterborderwidth}" cellspacing="0" border="0" bgcolor="&#123;tablebordercolor}" &#123;tableouterextra} width="&#123;contenttablewidth}" align="center"><tr><td>
  <table cellpadding="4" cellspacing="&#123;tableinnerborderwidth}" border="0" &#123;tableinnerextra} width="100%">

• Suche nach:
  

  <!-- main -->
  <table cellpadding="&#123;tableouterborderwidth}" cellspacing="0" border="0" bgcolor="&#123;tablebordercolor}" &#123;tableouterextra} width="&#123;contenttablewidth}" align="center">

• Und ersetze es durch:
  

  <!-- main -->
  <table cellpadding="&#123;tableouterborderwidth}" cellspacing="0" border="0" bgcolor="&#123;pagebgcolor}" &#123;tableouterextra} width="&#123;contenttablewidth}" align="center">

• Jetzt speicher das forumhome template und geh weiter zu Schritt 2
  
• Schriit 2
• forumhome_forumbit_level1_nopost > Change original
• In der ersten Zeile steht: <tr id="cat">, füge DARÜBER folgenden Code(in eine neue Zeile)
  

  </table>
  </td></tr></table><br>
  <table cellpadding="&#123;tableouterborderwidth}" cellspacing="0" border="0" bgcolor="&#123;tablebordercolor}" &#123;tableouterextra} width="&#123;contenttablewidth}" align="center"><tr><td>
  <table cellpadding="4" cellspacing="&#123;tableinnerborderwidth}" border="0" &#123;tableinnerextra} width="100%">

• In der letzten Zeile steht: </tr>, füge folgenden Code darunter(in einer neuen Zeile)
  

  <tr align="center">
    <td bgcolor="&#123;tableheadbgcolor}"><smallfont> </smallfont></td>
    <td bgcolor="&#123;tableheadbgcolor}" width="80%" align="left"><smallfont color="&#123;tableheadtextcolor}"><b>Forum</b></smallfont></td>
    <td bgcolor="&#123;tableheadbgcolor}"><smallfont color="&#123;tableheadtextcolor}"><b>Beiträge</b></smallfont></td>
    <td bgcolor="&#123;tableheadbgcolor}"><smallfont color="&#123;tableheadtextcolor}"><b>Themen</b></smallfont></td>
    <td bgcolor="&#123;tableheadbgcolor}" width="170" nowrap><smallfont color="&#123;tableheadtextcolor}"><b>Letzter Beitrag</b></smallfont></td>
    <td bgcolor="&#123;tableheadbgcolor}" width="20%"><smallfont color="&#123;tableheadtextcolor}"><b>Moderator</b></smallfont></td>
  </tr>

• Jetzt speicher das forumhome_forumbit_level1_nopost template und gehe weiter zu Schritt 3
  
• Schritt 3
• forumhome_forumbit_level2_nopost > Change original
• In der letzten Zeile steht: </tr>, füge folgendes darunter(in einer neuen Zeile)
  

  <tr align="center">
    <td bgcolor="&#123;tableheadbgcolor}"><smallfont> </smallfont></td>
    <td bgcolor="&#123;tableheadbgcolor}" width="80%" align="left"><smallfont color="&#123;tableheadtextcolor}"><b>Forum</b></smallfont></td>
    <td bgcolor="&#123;tableheadbgcolor}"><smallfont color="&#123;tableheadtextcolor}"><b>Beiträge</b></smallfont></td>
    <td bgcolor="&#123;tableheadbgcolor}"><smallfont color="&#123;tableheadtextcolor}"><b>Themen</b></smallfont></td>
    <td bgcolor="&#123;tableheadbgcolor}" width="170" nowrap><smallfont color="&#123;tableheadtextcolor}"><b>Letzter Beitrag</b></smallfont></td>
    <td bgcolor="&#123;tableheadbgcolor}" width="20%"><smallfont color="&#123;tableheadtextcolor}"><b>Moderator</b></smallfont></td>
  </tr>

• Jetzt speicher das forumhome_forumbit_level2_nopost template

Fertig!

[Datex]

(2) Hintergrund Grafiken für Kategorien

(Beschreibung)
Diese template modifikarion fügt Hintergrund grafiken zu euren Kategorien hinzu. Das ganze wirkt dann etwas besser und euer Board lässt einfacher an eure site anpassen.

(Credits)
Diese Modifikation wurde von xiphoid erstellt und von mir nur ins Deutsche übertragen. Orginal zufinden unter http://www.vbulletin.com/forum/showthread.php?t=48020

(Installation)
Wir werden einige template ändern müssen, und weil wir sie im step 1 schon verändert haben sind sie nicht mehr orginal. Die nächsten Schritte sind nur korrekt und richtig wenn ihr step 1 durchgeführt habt!
Ok die installation ist in ein paar Schritten erledigt.

• Schritt1
• Admin Control Panel (ACP).
  Templates > Modify > Expand
  Forum Home Page Templates > Expand
  forumhome_forumbit_level1_nopost > edit
• Finde den folgenden Code:
  

  <tr id="cat">
  	<td bgcolor="&#123;categorybackcolor}" colspan="6">

  und ersetze ihn durch:
  

  <tr id="cat">
  	<td background="<tr id="cat">
  	<td background="&#123;imagesfolder}/frontpage/cat_bg_01.gif" bgcolor="&#123;categorybackcolor}" colspan="6">

• Suche jetzt nach (sollte am ende stehen):
  

  <tr align="center">
    <td bgcolor="&#123;tableheadbgcolor}"><smallfont> </smallfont></td>
    <td bgcolor="&#123;tableheadbgcolor}" width="80%" align="left"><smallfont color="&#123;tableheadtextcolor}"><b>Forum</b></smallfont></td>
    <td bgcolor="&#123;tableheadbgcolor}"><smallfont color="&#123;tableheadtextcolor}"><b>Beiträge</b></smallfont></td>
    <td bgcolor="&#123;tableheadbgcolor}"><smallfont color="&#123;tableheadtextcolor}"><b>Themen</b></smallfont></td>
    <td bgcolor="&#123;tableheadbgcolor}" width="170" nowrap><smallfont color="&#123;tableheadtextcolor}"><b>Letzter Beitrag</b></smallfont></td>
    <td bgcolor="&#123;tableheadbgcolor}" width="20%"><smallfont color="&#123;tableheadtextcolor}"><b>Moderator</b></smallfont></td>
  </tr>

  Und ersetze ihn durch:
  

  <tr align="center">
    <td background="&#123;imagesfolder}/frontpage/cat_bg_02.gif" bgcolor="&#123;tableheadbgcolor}"><smallfont> </smallfont></td>
    <td background="&#123;imagesfolder}/frontpage/cat_bg_02.gif" bgcolor="&#123;tableheadbgcolor}" width="80%" align="left"><smallfont color="&#123;tableheadtextcolor}"><b>Forum</b></smallfont></td>
    <td background="&#123;imagesfolder}/frontpage/cat_bg_02.gif" bgcolor="&#123;tableheadbgcolor}"><smallfont color="&#123;tableheadtextcolor}"><b>Beiträge</b></smallfont></td>
    <td background="&#123;imagesfolder}/frontpage/cat_bg_02.gif" bgcolor="&#123;tableheadbgcolor}"><smallfont color="&#123;tableheadtextcolor}"><b>Themen</b></smallfont></td>
    <td background="&#123;imagesfolder}/frontpage/cat_bg_02.gif" bgcolor="&#123;tableheadbgcolor}" width="170" nowrap><smallfont color="&#123;tableheadtextcolor}"><b>Letzter Beitrag</b></smallfont></td>
    <td background="&#123;imagesfolder}/frontpage/cat_bg_02.gif" bgcolor="&#123;tableheadbgcolor}" width="20%"><smallfont color="&#123;tableheadtextcolor}"><b>Moderator</b></smallfont></td>
  </tr>

• Speicher das template forumhome_forumbit_level1_nopost und geh weiter zu Schritt 2.
  
• Schritt2
• Öffne das template forumhome_pmloggedin > Change original
• Such den folgenden code:
  

  <tr id="cat">
  	<td bgcolor="&#123;categorybackcolor}" colspan="6">

  Und ersetze ihn durch:
  

  <tr id="cat">
  	<td background="&#123;imagesfolder}/frontpage/cat_bg_01.gif" bgcolor="&#123;categorybackcolor}" colspan="6">

• Speicher forumhome_pmloggedin und geh zu Schriit 3.
  
• Schritt 3
• Öffne das template forumhome_loggedinusers > Change original
• Such folgenden Code:
  

  <tr id="cat">
  	<td bgcolor="&#123;categorybackcolor}" colspan="6">

  Und ersetze ihn durch:
  

  <tr id="cat">
  	<td background="&#123;imagesfolder}/frontpage/cat_bg_01.gif" bgcolor="&#123;categorybackcolor}" colspan="6">

• Speicher forumhome_loggedinusers und geh zu Schritt 4
  
• Schritt 4
• Log dich nun auf deinem Webserver via FTP Client ein und erstell einen neuen Ordner im images Verzeichniss der "frontpage" heisen muss.
• Lade jetzt die Grafiken cat_bg_01.gif und cat_bg_02.gif in den frontpage Ordner und logg dich wieder aus.(die Grafiken musst du vorher selbst erstellen)

Fertig!

[Datex]

(3) onMouseOver-highlighting effekt für die Foren

(Beschreibung)
Diese template modifikarion fügt einen onMouseOver effekt an eure Foren. Wenn man mit der Mause über die Foren fährt wechselt die Farbe und die Foren werden click bar.

(Credits)
Diese Modifikation wurde von xiphoid erstellt und von mir nur ins Deutsche übertragen. Orginal zufinden unter http://www.vbulletin.com/forum/showthread.php?t=48020

(Installation)
Wir müssen ledigtlich ein template editiern, also recht einfach.

• Admin Control Panel (ACP).
  Templates > Modify > Expand
  Forum Home Page Templates > Expand
  forumhome_forumbit_level2_post > edit
• Finde den folgenden Code:
  

  <td bgcolor="&#123;firstaltcolor}" align="left">

  und ersetze ihn durch:
  

  <td bgcolor="&#123;firstaltcolor}" align="left"
  onMouseOver="this.style.backgroundColor='&#123;secondaltcolor}'; 
  this.style.cursor='hand';" 
  onMouseOut="this.style.backgroundColor='&#123;firstaltcolor}';" 
  onClick="window.location.href='forumdisplay.php?s=$session[sessionhash]&forumid=$forum[forumid]'">

• Speicher das template forumhome_forumbit_level2_post

Fertig!

[Datex]

(4) Eigene blinkende und clickbare Private Nachrichten Grafik

(Beschreibung)
Auf der index deines Boards gibt es ganz unten eine Bar die dir deine Privaten Nachrichten anzeigt, mit dem ganz normalen on/off.gif von vBulletin. Diese modifikation erlaubt es dir eigene Grafiken in deine PN Bar einzufügen die auch click bar sind.

(Credits)
Diese Modifikation wurde von xiphoid erstellt und von mir nur ins Deutsche übertragen. Orginal zufinden unter http://www.vbulletin.com/forum/showthread.php?t=48020

(Installation)
Diese modfikation ist nur richtig wenn ihr die anderen Schritte in den vorran gegangenen Beiträgen auch gemacht habt.
Die Installation ist schnell gemacht.

• Schritt 1
• Admin Control Panel (ACP).
  Templates > Modify > Expand
  Forum Home Page Templates > Expand
  forumhome_pmloggedin > edit
• Finde den folgenden Code:
  

  <tr id="cat">
  	<td background="&#123;imagesfolder}/frontpage/cat_bg_01.gif" bgcolor="&#123;categorybackcolor}" colspan="6"><a href="private.php?s=$session[sessionhash]" 
  title="Klick hier, um den $inboxname Deiner Privaten Nachrichten zu öffnen"><normalfont color="&#123;categoryfontcolor}"><b>Private Nachrichten</normalfont></b></a></td>
  </tr>
  <tr>
  	<td bgcolor="&#123;secondaltcolor}" align="center" valign="top"><img src="&#123;imagesfolder}/$lightbulb.gif" alt=""></td>
  	<td bgcolor="&#123;firstaltcolor}" colspan="5"><smallfont>
  	<b>$bbuserinfo[username]</b> - Du hast $newpm[messages] neue Nachricht(en) seit Deinem letzten Besuch<br>
          (Du hast $unreadpm[messages] ungelesene Nachrichten und insgesamt $allpm[messages] Nachrichten in allen Ordnern)</smallfont></td>
  </tr>

  und ersetze ihn durch:
  

  <tr id="cat">
  	<td background="&#123;imagesfolder}/frontpage/cat_bg_01.gif" bgcolor="&#123;categorybackcolor}" colspan="6"><a href="private.php?s=$session[sessionhash]" 
  title="Klicke hier, um den $inboxname Deiner Privaten Nachrichten zu öffnen"><normalfont color="&#123;categoryfontcolor}"><b>Private Nachrichten</normalfont></b></a></td>
  </tr>
  <tr>
  	<td bgcolor="&#123;secondaltcolor}" align="center" valign="top">
  <a href="private.php?s=$session[sessionhash]" title="Klicke hier, um den $inboxname Deiner Privaten Nachrichten zu öffnen">
  <img src="&#123;imagesfolder}/frontpage/$lightbulb.gif" alt="Private Nachrichten" border="0">
  </a></td>
  	<td bgcolor="&#123;firstaltcolor}" colspan="5"><smallfont>
  	<b>$bbuserinfo[username]</b> - Du hast $newpm[messages] neue Nachricht(en) seit Deinem letzten Besuch<br>
          (Du hast $unreadpm[messages] ungelesene Nachrichten und insgesamt $allpm[messages] Nachrichten in allen Ordnern)</smallfont></td>
  </tr>

• Speicher das template forumhome_pmloggedin und geh zu Schritt 2
  
• Schritt 2
• Log dich via FTP Client auf deinem Webserver ein und lade in dein images/frontpage Verzeichnis die Grafiken on.gif und off.gif (die du vorher erstellen musst)

Fertig!

[Datex]

(5) Moderatorenspalte entfernen

(Beschreibung)
Diese Modifikation bewirkt das die Moderatorenspalte auf der Forum Startseite verschwindet.

(Installation)
Wir müssen einige Templates editieren, also macht euch am besten backups davon.

• Schritt 1
• Admin Control Panel (ACP).
  Templates > Modify > Expand
  Forum Display Templates > Expand
  forumdisplay_forumslist > change original
• Finde und lösche:
  

  <td bgcolor="&#123;tableheadbgcolor}" width="20%"><smallfont color="&#123;tableheadtextcolor}"><b>Moderator</b></smallfont></td>

• Speicher das template
  
• Schritt 2
• forumhome > Change original
• Suche und lösche:
  

  <td bgcolor="&#123;tableheadbgcolor}" width="20%"><smallfont color="&#123;tableheadtextcolor}"><b>Moderator</b></smallfont></td>

• Speicher das template
  
• Schritt 3
• forumhome_forumbit_level1_nopost > Change original
• Suche nach:
  

  <td bgcolor="&#123;categorybackcolor}" colspan="6">

• und ersetze es durch:
  

  <td bgcolor="&#123;categorybackcolor}" colspan="5">

• Speicher das template
  
• Schritt 4
• forumhome_forumbit_level2_nopost > Change original
• Suche nach:
  

  <td bgcolor="&#123;categorybackcolor}" colspan="5">

• und ersetze es durch:
  

  <td bgcolor="&#123;categorybackcolor}" colspan="4">

• Speicher das template
  
• Schritt 5
• forumhome_forumbit_level1_post > Change original
• Suche und lösche:
  

  <td bgcolor="&#123;firstaltcolor}"><smallfont>$forum[moderators]</smallfont></td>

• Speicher das template
  
• Schritt 6
• forumhome_forumbit_level2_post > Change original
• Suche und lösche:
  

  <td bgcolor="&#123;firstaltcolor}"><smallfont>$forum[moderators]</smallfont></td>

• Speicher das template
  
• Schritt 7
• forumhome_loggedinusers > Change original
• Suche nach:
  

  <td bgcolor="&#123;categorybackcolor}" colspan="6">

• und ersetze es durch:
  

  <td bgcolor="&#123;categorybackcolor}" colspan="5">

  Suche nach:
  

  <td bgcolor="&#123;firstaltcolor}" colspan="6">

• und ersetze es durch:
  

  <td bgcolor="&#123;firstaltcolor}" colspan="5">

• Speicher das template
  
• Schritt 8
• forumhome_pmloggedin > Change original
• Suche nach:
  

  <td bgcolor="&#123;categorybackcolor}" colspan="6">

• und ersetze es durch:
  

  <td bgcolor="&#123;categorybackcolor}" colspan="5">

• Suche nach:
  

  <td bgcolor="&#123;firstaltcolor}" colspan="5">

• und ersetze es durch:
  

  <td bgcolor="&#123;firstaltcolor}" colspan="4">

• Speicher das template
  
• Schritt 9
• forumdisplay_forumbit_level1_post > Change original
• Suche und lösche:
  

  <td bgcolor="&#123;firstaltcolor}"><smallfont>$forum[moderators]</smallfont></td>

• Speicher das template
  
• Schritt 10
• forumdisplay_forumbit_level2_post > Change original
• Suche und lösche:
  

  <td bgcolor="&#123;firstaltcolor}"><smallfont>$forum[moderators]</smallfont></td>

• Speicher das template

Fertig! ;-)

[Ne0]

Hast du vom fertigen einen Screenshot oder Livedemo ?
Danke dir

[firelooper]

screen oder demo pleaz

[Datex]

Von was wollt ihr nen screen ?

[dookie]

Ist doch eigentlich alles selbsterklärend.
1), 2) und 5) habe ich bei mir eingesetzt und können von mir aus als Live-Demo betrachtet werden. *g*
Klick

[Thomas P]

Hallo,

glaube ich habe das von Xiphoid von vb.com, trotzdem Danke für die Übersetzung und Zusammenfassung.

Demo auch bei mir: www.mcseboard.de

[firelooper]

Original geschrieben von dookie
Ist doch eigentlich alles selbsterklärend.
1), 2) und 5) habe ich bei mir eingesetzt und können von mir aus als Live-Demo betrachtet werden. *g*
Klick

hi dookie ... da hast du natürlich recht aber mit einem Bildchen ist es eben anschaulicher. btw sehr schönes Board gefällt mir optisch super ... ich mag so schliche Boards und der hack passt sehr gut. weiter so!

[Subu1]

Klasse Teil 1 baute ich mir ein, wirklich eine nette schöne Sache

[Esposito]

(3) onMouseOver-highlighting effekt für die Foren

(Beschreibung)
Diese template modifikarion fügt einen onMouseOver effekt an eure Foren. Wenn man mit der Mause über die Foren fährt wechselt die Farbe und die Foren werden click bar.

(Credits)
Diese Modifikation wurde von xiphoid erstellt und von mir nur ins Deutsche übertragen. Orginal zufinden unter http://www.vbulletin.com/forum/showthread.php?t=48020

(Installation)
Wir müssen ledigtlich ein template editiern, also recht einfach.

• Admin Control Panel (ACP).
  Templates > Modify > Expand
  Forum Home Page Templates > Expand
  forumhome_forumbit_level2_post > edit
• Finde den folgenden Code:
  

  <td bgcolor="{firstaltcolor}" align="left">

  und ersetze ihn durch:
  

  <td bgcolor="{firstaltcolor}" align="left"
  onMouseOver="this.style.backgroundColor='{secondaltcolor}'; 
  this.style.cursor='hand';" 
  onMouseOut="this.style.backgroundColor='{firstaltcolor}';" 
  onClick="window.location.href='forumdisplay.php?s=$session[sessionhash]&forumid=$forum[forumid]'">

• Speicher das template forumhome_forumbit_level2_post

Fertig!

Ich finde diesen Code bei mir nicht!

<td bgcolor="{firstaltcolor}" align="left">

Gilt das nicht für 3.0.3 Version?
Gruß
Esposito

[h75]

Das brauchst du im vB3 eh nicht einbauen. Schau mal ins footer-template und ersetze

// Initialize 'Active' Table Cells
//activecells_init();

mit

// Initialize 'Active' Table Cells
activecells_init();

schon hast du Active cells (also die beiden // weg)

[Esposito]

Hallo H75,
vielen Dank für die schnelle Antwort. Hat geklappt, super!
Gruß
Esposito

[od3m]

hI aLL !!

Hat das mal jemand mit 3.0.7 getestet ? scheint mir nicht so als würde das so einfach funktionieren..

[Stussi]

Ne, das ist f&#252;r 2.x.x....

Was hast du denn vor?

[h75]

vbulletin.de/forum/showthread.php?p=90047

[kraychek]

hi leute,

so einfach kann man diese anleitung ja nicht auf vb 3.6.x anwenden. gibt es dafür ebenfalls eine anleitung?

schöne grüße

oli

[Mullemaus]

Wäre gut zu wissen. Ob es das auch für die neuste Version von vB gibt. :O)