[punBB] Einklappbare Kategorien

Hallo,

in einem anderen Thread wird ja beschrieben, wie es über die Veränderung des Templates index_box möglich ist, einklappbare Kategorien einzustellen.
Die entsprechende, am Anfang zu löschende Stelle im Template ist bei punBB mit der bei phpbb2 aber nicht identisch. Dort steht ja

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>

statt

Code:

<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="main-head">
         <div class="page-title">{catrow.tablehead.L_FORUM}</div>

Was muss ich stattdessen löschen? Kann ich überhaupt so verfahren, wie in angegeben Thema beschrieben? Ich habe hier auch gesehen, dass zusätzlich im CSS zwei Befehle eingetragen wurden; sind die etwa nur bei punBB nötig, wenn man Bilder einfügen will?
Ich hoffe, dass sind nicht zu viele Fragen auf einmal, die ich jeweils in unterschiedlichen Threads hätte stellen sollen, aber sie gehören ja zu der Eingangsfrage mit dazu und würden sich bestimmt später noch stellen.

Hallo

das geht auch ohne CSS. Die Änderung im Template ist um einiges anders als bei bb2.

Ich schau später mal, dass ich dir die Anleitung dazu schreibe, o.k.?
Jetzt hab ich grad nicht die Zeit und die Ruhe, mir das anzuschauen.

Natürlich, das ist kein Problem. Es eilt ja nicht.

Na ja, ich hatte gehofft, ich könnte mich zumindest an den Änderungen bei phpbb2 orientieren.

nee, leider ist das dort völlig anders...

Also, du gehst ins Template index_box

und suchst folgenden Abschnitt raus:

Code:

<div class="main">
<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="main-head">
         <div class="page-title">{catrow.tablehead.L_FORUM}</div>
      </div>
      <div class="main-content">

diesen ersetzt du durch:

Code:

 <div class="main"><script type="text/javascript">var num= 0; var curc;</script>
        <!-- BEGIN catrow -->
          <!-- BEGIN tablehead -->
              <div class="main-head" onClick=" if(this.nextSibling.style.display=='none') {my_setcookie(this.firstChild.id,'0',0,0); this.nextSibling.style.display='block';} else {my_setcookie(this.firstChild.id,'1',1,0); this.nextSibling.style.display='none'; }"  style="cursor:pointer;">
                <div class="page-title" id="cret">
    {catrow.tablehead.L_FORUM}</div><script type="text/javascript">curc= document.getElementById('cret'); curc.id+=(++num)+'_'+escape(curc.innerHTML);</script>
              </div>
              <div class="main-content">
                <script type="text/javascript">if(my_getcookie(curc.id)=='1') curc.parentNode.nextSibling.style.display='none';</script>

Nun sind die Kategorien auf-, bzw. zuklappbar. Diese Lösung ist ohne eine Grafik, wie es auch in deinem verlinkten Beispielthread ist.

---

Wenn du noch eine Grafik dazusetzen möchtest, dann musst du diese Version nehmen und die Grafikadresse noch einfügen bei

<img src="ADRESSE DER GEWÜNSCHTEN GRAFIK"></div>

Code:

<div class="main"><script type="text/javascript">var num= 0; var curc;</script>
    <!-- BEGIN catrow -->
      <!-- BEGIN tablehead -->
          <div class="main-head" onClick=" if(this.nextSibling.style.display=='none') {my_setcookie(this.firstChild.id,'0',0,0); this.nextSibling.style.display='block';} else {my_setcookie(this.firstChild.id,'1',1,0); this.nextSibling.style.display='none'; }"  style="cursor:pointer;">
            <div class="page-title" id="cret">
<div style="float:right;">
<img src="ADRESSE DER GEWÜNSCHTEN GRAFIK"></div>{catrow.tablehead.L_FORUM}</div><script type="text/javascript">curc= document.getElementById('cret'); curc.id+=(++num)+'_'+escape(curc.innerHTML);</script>
          </div>
          <div class="main-content">
            <script type="text/javascript">if(my_getcookie(curc.id)=='1') curc.parentNode.nextSibling.style.display='none';</script>

was man nun noch bei PunBB ändern sollte (ist kein Muss!)
die Kategorien sind ja ohne Zwischenraum, daher verschieben sich die Grafiken und die Balken verschmelzen miteinander, wenn alle oder mehrere Kategorien eingeklappt sind- siehe hier in meinem Testforum:



wenn man da jetzt übers CSS einen Abstand einsetzt, dann sieht es gleich viel netter aus


daher solltest du folgendes in dein CSS einsetzen:

Code:

.main .main-head, .main .main-foot {
    margin-top: 5px;   
}


die Pixelzahl ist natürlich noch beliebig veränderbar...auch mit 1 Pixel ist die richtige Anzeige gewährleistet.

Vielen Dank, das hat mir sehr geholfen.

Eine kleine Frage hätte ich allerdings noch: ist es möglich, zwei Grafiken einzusetzen, eine die angezeigt wird, wenn die Kategorien "ausgeklappt" sind und eine Grafik, um sie zu schließen? Im Code gibt es ja scheinbar keine Stelle, die das vorsieht, bzw. wo man das eintragen könnte, soweit ich das sehe. Hilft das CSS weiter?

ja, das ist möglich...jedoch muss ein völlig anderes Script eingesetzt werden.

Wenn ich die Zeit dazu finde, schau ich mir das mal näher an.
Soll das in deinem aktuellen Forum eingebaut werden? Oder in einem anderen?
Weil die Titelzeile, wo die Grafik erscheinen soll, dann noch mit angepasst werden muss und ich mir dazu das Forum mal ansehen müsste.

Na ja, "mein" Forum ist das eigentlich nicht; ich trage für den Gründer sozusagen die Template-Änderungen zusammen.

Ja, es soll in das Forum im Profil eingefügt werden; allerdings habe ich zu Testzwecken ein vom Skin her identisches Forum eingerichtet (http://cb-testforum.forumieren.com), wo ich die Änderungern fürs Erste einsetze.

Kannst du mir mal die Bildadresse nennen, die du für das "Minus" nutzen möchtest?

Dann mach ich dir das gleich mit dem CSS-Code zusammen fertig

so, hier ist die Änderung

gleiches Template...

du suchst diesen Abschnitt und löschst die rot markierte Zeile raus:

<!-- BEGIN tablehead -->
<div class="main-head">
<div class="page-title">{catrow.tablehead.L_FORUM}</div>
</div>
<div class="main-content">

diese ersetzt du durch folgenden Code:

Code:

<div class="page-title">{catrow.tablehead.L_FORUM}<img onload="$(this).parent().parent().next()[my_getcookie($(this).next().text())=='0'?'hide'+($(this).removeClass('schliessen')&amp;&amp;$(this).parent().parent().addClass('wechsel')?'':''):'show']()" onclick="$(this).parent().parent().next().toggle();$(this).toggleClass('schliessen');my_setcookie($(this).next().text(),$(this).parent().parent().next().css('display')=='block'?'1'+($(this).parent().parent().removeClass('wechsel')?'':''):'0'+($(this).parent().parent().addClass('wechsel')?'':''));" class="offen schliessen" src="http://2img.net/i/fa/empty.gif"></div>   

Damit nun die Grafiken sichtbar werden, musst du folgendes ins CSS einsetzen: (ich habe jetzt einfach mal eine Grafik für das Minus eingesetzt, die du noch austauschen musst.)

Code:

.offen.schliessen {
    background: url("http://2img.net/i/fa/tabs_less.gif") no-repeat scroll 0 0 transparent;
float: right;
    height: 20px;
    position: relative;
    top: -10px;
    width: 20px;
}

.offen {
    background: url("http://www.abload.de/img/plus9u4c.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
float: right;
    height: 20px;
    position: relative;
    top: -10px;
    width: 20px;
}

Genauso habe ich mir das vorgestellt.
Herzlichen Dank nochmal!