[Tutorial] Anzeigen/Verstecken der Indexmodule

von Gast am Di 5 Okt 2010 - 21:49

Anzeigen und Verstecken der Indexmodule

Informationen:

Wenn du den folgenden Schritten des Tutorials folgst, kannst du ein Script in deinem Forum einbauen, womit man die Indexmodule anzeigen oder verstecken kann, jenachdem, wie du es haben möchtest. Auf dem jetzt folgenden Screenshot seht ihr, wie dies später einmal aussieht:

Wichtig: Dieses Script funktioniert nur bei den Forenversionen phpBB3, Invision und punBB.
Wie funktioniert das Script?

Das Script muss nicht gesondert bearbeitet werden, sondern ist einfach einzubauen. Es kommt allerdings auf die Seite der Indexmodule an, wo das Script eingesetzt werden soll, da dort jeweils ein anderes Script verwendet werden muss.

Wenn die Indexmodule werden nicht wieder angezeigt, wenn du die Seite wechselst oder auf ein Thema im Forum gehst. Dies kann natürlich aufgehoben werden, wenn du die Browsercache löschst oder die Seite neulädst.
So wird das Script installiert:

Du musst jeweils zwei Module für die Indexmodule erstellen, die du dann jeweils oberhalb und unterhalb der gesamten Indexmodulreihe einsetzt, dazu kommen wir aber später. Um nun die beiden Module zu erstellen gehst du auf: Adminbereich ► Module ► Portal & Widgets ► Index-Module und klicke auf den - Button

Nach klicken auf den Button , gelangst du auf die folgende Seite:

Name des Moduls ► Du kannst jeden beliebigen Namen für das Modul nehmen, der Einfachheit halber könnte man den Namen "Modul Oben" und "Modul unten" wählen.

Die Standardaufstellung nutzen ► Nein.

Titel des Moduls ► Leer lassen.

Quelle des Moduls ► Kopiere den Code von unten in die Quelle des Moduls
Erinnerung: Das Script funktioniert nicht in Foren, wo die Indexmodule auf beiden Seiten genutzt werden.
Das Script, welches genutzt wird:
- Für Foren, wo die Indexmodule auf der linken Seite genutzt werden:
  
  Kopiere diesen Code für den Teil über den Indexmodulen in das Feld "Quelle des Moduls" des ersten Moduls:
  
  <div id="forum-widget" style="height: 13px; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; cursor: pointer; position: absolute; background: #f5ebf7 url(http://i42.tinypic.com/vg54yu.png) no-repeat 0 -13px;" onClick="jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -13px'); } else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); }"></div>
  
  Du kannst die Teile des Scripts in rot und blau nach Belieben und Aussehen des Forums ändern.
  
  Der Teil in rot setzt die Hintergrundfarbe des Pfeils, der Teil in blau setzt das Bild des Pfeils.
  
  Kopiere diesen Code für den Teil unter den Indexmodulen in das Feld "Quelle des Moduls" des zweiten Moduls:
  
  <script type="text/javascript"> jQuery('#forum-widget').insertBefore('#left'); if(my_getcookie('forum-widget')=='0') {jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); } </script>
- Für Foren, wo die Indexmodule auf der rechten Seite genutzt werden:
  
  Kopiere diesen Code für den Teil über den Indexmodulen in das Feld "Quelle des Moduls" des ersten Moduls:
  
  <div id="forum-widget" style="cursor: pointer; height: 13px; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: relative; bottom: -15px; float: right; background: #f5ebf7 url(http://i42.tinypic.com/vg54yu.png) no-repeat 0 -13px;" onClick="jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -13px'); jQuery('#content-container div#content').css('margin-right','189px');} else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px'); }"></div>
  
  Du kannst die Teile des Scripts in rot und blau nach Belieben und Aussehen des Forums ändern.
  
  Der Teil in rot setzt die Hintergrundfarbe des Pfeils, der Teil in blau setzt das Bild des Pfeils.
  
  Kopiere diesen Code für den Teil unter den Indexmodulen in das Feld "Quelle des Moduls" des zweiten Moduls:
  
  <script type="text/javascript"> jQuery('#forum-widget').insertBefore('#right'); if(my_getcookie('forum-widget')=='0') {jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px');} </script>

5. Das Einfügen der Module

Nach dem Erstellen der Module, musst du im Adminbereich folgendes tun: Du gehst auf Administrationsberiech ► Module ► Portal & Widgets ► Index-Module, klick unter dem Teil zum Einfügen der Indexmodule auf den Button "Persönliches Modul". Klicke dort nun auf das Modul, welches über die Indexmodule gestellt werden soll, klicke auf dieses und ziehe das Modul über die Reihe der Indexmodule. Dann ziehe das Modul, welches unter die Indexmodule gestellt werden soll, unter die Reihe der Module. Vergesse nicht auf "Absenden" zu klicken. Das Ganze sollte dann so aussehen:

Und von mir viel Spaß! Very Happy

Dieses Tutorial wurde vom englischen Support erstellt, geschrieben von Luky, ins Französische übersetzt von Zen und ins Deutsche übersetzt von ~Julian~.

Dieses Tutorial steht unter dem Copyright von hilfe.forumieren.com. Eine Veröffentlichung dieses Tutorial außerhalb von Forumieren ist nicht gestattet.

von Gast am Do 7 Okt 2010 - 20:07

Anzeigen und Verstecken der Indexmodule [phpBB2]

Informationen:
Für die Version phpBB2 ist eine Templateveränderung nötig, da die Indexmodule beim Einsetzen des Script teilweise bis gar nicht reagieren. Hier ist die zweite Variante des Einsetzens des Scripts bei der Version phpBB2, wenn es über die Möglichkeit 1 von oben nicht funktioniert.

Zu erst geht ihr auf: Adminbereich ► Anzeige ► Templates ► Allgemeines ► overall_header und bearbeitet das Template über den - Button

Wichtig:
Diese Änderung muss nur gemacht werden, sollte es zu Anzeigeproblemen kommen oder die Indexmodule schieben sich über das Forum.
Zu ersetzende Codes:

Ersetze folgenden Teil:
<table cellpadding="0" cellspacing="0" width="100%" class="three-col">
<tbody>
<tr>
<td valign="top">
<div id="{ID_LEFT}" width="{C1SIZE}">

{giefmod_index1.MODVAR}

<div style="height:{SPACE_ROW}px"></div>


</div>

Durch folgenden Teil:
<div id="forum-widget" style="height: 13px; width: 16px; cursor: pointer; float:left; background: #f5ebf7 url(http://i42.tinypic.com/vg54yu.png) no-repeat 0 -13px;" onClick="my_setcookie('wid',(my_getcookie('wid')=='1'?'0':'1'),1,0);updateWid();"></div>
<table cellpadding="0" cellspacing="0" width="100%" class="three-col">
<tbody>
<tr>
<td valign="top">
<div id="{ID_LEFT}" width="{C1SIZE}">

{giefmod_index1.MODVAR}

<div style="height:{SPACE_ROW}px"></div>


</div>
<script type="text/javascript">

function updateWid() {
if(my_getcookie('wid')&& my_getcookie('wid')=='1') {
$('#left').parent().addClass("widHidden");
jQuery('#forum-widget').css('background-position','0 0');
}
else {
$('#left').parent().removeClass("widHidden");
jQuery('#forum-widget').css('background-position','0 -13px');
}
};

updateWid();

</script>
CSS-Code:
Und damit die Änderung auch wirksam wird, muss im Adminbereich unter Anzeige ► Bilder & Farben ► Farben ► CSS-Stylesheet ein CSS-Code eingetragen werden und zwar folgender:

.widHidden { display: none; }

Diese Scriptänderung wurde von Etana aus dem französischen Supportforum geschrieben und übersetzt ins Deutsche von ~Julian~.
Die Texte und Codes aus diesem Thema unterliegen dem Copyright von http://hilfe.forumieren.com

von **#Frank** am Sa 21 Jan 2012 - 21:23

Hinweis:
Wer das Script von oben bei sich im Forum eingesetzt hat, der sieht seit gestern keine Pfeile mehr.
Das Bild der Pfeile ist nicht mehr verfügbar ( http://i42.tinypic.com/vg54yu.png ).

Ihr müsst dort eine Transparente Grafik erstellen, die die ungefähren Masse von 26 Px Höhe und 13 Px Breite haben muss.
Diese muss in dieser Art erstellt werden:

Wenn ihr andere Pfeile haben wollt, dann könnt ihr diese im Grafikbereich bestellen.
Diese setzt ihr dann in euer Modul wie oben beschrieben ein.
Hier noch einige Beispiele zu den Pfeilen:

[Tutorial] Anzeigen/Verstecken der Indexmodule

[Tutorial] Anzeigen/Verstecken der Indexmodule

Re: [Tutorial] Anzeigen/Verstecken der Indexmodule

Re: [Tutorial] Anzeigen/Verstecken der Indexmodule