Registrierung Galerie    Mitglieder    Team    Suchen    Hilfe
Bilder hochladen    Forum    Portal

haumis-wbb-schule » User fragt, User antwortet » Tutorials zur individuellen Bordgestaltung » JGS-Portal ~ Menübox erstellen » Hallo Gast [anmelden|registrieren]
Druckvorschau | An Freund senden | Thema zu Favoriten hinzufügen
Neues Thema erstellen Antwort erstellen
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »
Listiger_Falke Listiger_Falke ist männlich
Moderator


Dabei seit: 21.07.2010
Beiträge: 6

JGS-Portal ~ Menübox erstellen Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       IP Information Zum Anfang der Seite springen

Benutzer des JGS-Portals haben es schon bemerkt... man kann sehr schlecht andere Seiten in das Menü integrieren als die Vorgegebenen.

Abhilfe gibt es indem man einfach eine eigene Portalbox mit einem eigenen Menü erstellt.

Vorgehensweise.
Erst einmal müßen wir eine tpl erstellen, die als "Linkseite" dient.
Da wir innerhalb der Portalboxen direkt mit html-Codes arbeiten können ohne eine Sprache definieren zu müßen arbeiten wir quasi zwischen <body> ~ </body>. Das bedeutet, wir können den sonst geforderten Headerbereich der html-Sprache genauso weglassen wie den Code <html> </html>

Beispiel 1
Klick hier für ein einfaches Menü

Das ist ein einfaches Textmenü, in dem Beispiel auch ohne Verweise, und vor allem ohne jeglichen zusätzlichen Code auch an das Design (den Style) angepasst.

Code für ein solches Menü:
code:


Den Codebereich kann man jederzeit an die eigenen Bedürfnisse anpassen

Eine einzelne Codezeile lautet immer:
<font class="smallfont"><strong>»</strong><a href="index.php{$SID_ARG_1ST}" style="text-decoration: none"><b>Forum</b></a></font><br />
Wir müßen also für jede Seite, die wir in das Menü einbinden wollen
1. die php ändern, im Codebeispiel index.php{$SID_ARG_1ST} <--- einfach nur den Namen der aufzurufenden Seite eintragen
2. Den Text des Links ändern. "Forum" also in dem Code gegen die Seite ändern, die aufgerufen werden soll.


Wir können nun durch das untereinander schreiben einzelner angepasster Codezeilen ein Menü erstellen.
Wollen wir einzelne Bereiche trennen, z.B. Inhalte des User-CP optisch von Spieleverweisen trennen, so benutzen wir den Code
code:
<hr />

Durch das <hr /> wird eine waagerechte Linie eingefügt

Die Seiten werden durch den oben genannten Code im gleichen Fenster geöffnet. Wollen wir einzelne Seiten in einem separaten Fenster öffnen lassen, so müßen wir den Grundcode ändern.
code:


Durch den Zusatz target="_blank" bestimmen wir nun, das dieser Verweis in einer Extraseite geöffnet wird. Das ist bei einigen Seiten wie z.B. Verweise auf die WIW oder einem Chat sinnvoll.

Änderung der Schriftgröße: In dem Code wird als Schriftgröße "smallfont" benutzt. Natürlich kann man diese Schriftgröße auch austauschen entweder gegen "normalfont" oder eine eigene Schriftgröße.

Durch das einfache untereinanderschreiben dieser Codezeilen können wir uns ein individuelles Menü erstellen.


Einbinden des Menüs in das Portal: Nachdem wir unser Template erstellt haben müßen wir es eindeutig benennen. Ich selbst benutze für eigene Templates immer vor dem Namen einen eindeutigen Zusatz (bei mir z.B. zzz_) Auf diese Weise finde ich eigene Templates schnell wieder und da meines Wissens kein anderer Hack den Zusatz zzz_ benutzt überschreibe ich auch nichts. Wir können also für dieses Beispiel das Template zzz_jgs_portalmenue.tpl nennen.
Nach dem wir das Template hochgeladen und gecacht haben gehen wir in das ACP. Im JGS-Portal-Bereich klicken wir dann auf Box hinzufügen Bei Titel der Box: geben wir nun einen Namen an. Anbieten würde sich "Menü"
In dem Feld Vorgefertigte Boxen tragen wir nun ein

code:
[TPL]zzz_jgs_portalmenue


Falls Ihr dem Template einen anderen Namen gegeben habt natürlich den entsprechenden Namen hinter dem [TPL] verwenden, OHNE den Zusatz .tpl (Also ohne die Dateiendung)

Dann noch die Gruppenrechte eintragen, wer das Menü sehen darf

Boxenausrichtung horizontal ? Links
Boxenausrichtung vertikal ? Oben
Box anzeigen ? Box anzeigen
Alle anderen Anpassungen nach Euren Einstellungen vornehmen
Dann speichern

Nachdem nun eine Menübox erstellt wurde muß diese auch in das Portal eingebunden werden. Wir gehen nun auf Seiten/Boxen anzeigen und dort auf Boxen im Bereich Portal (Meist ID 1)
Übersicht Boxen links --> Seite: Portal suchen wir nun in dem Pulldown unsere Menü-Box. Wenn diese eingestellt ist auf neue Box einordnen klicken. Danach die Reihenfolge festlegen, in welcher die Box eingeordet sein soll und auf Boxen sortieren klicken.
Nun sollte die Box im Portal sichtbar und Verwendbar sein.

22.07.2010 23:40 Listiger_Falke ist offline Email an Listiger_Falke senden Homepage von Listiger_Falke Beiträge von Listiger_Falke suchen Nehmen Sie Listiger_Falke in Ihre Freundesliste auf
Listiger_Falke Listiger_Falke ist männlich
Moderator


Dabei seit: 21.07.2010
Beiträge: 6

Menü 2 mit Pulldown Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       IP Information Zum Anfang der Seite springen

Das im ersten Beispiel gezeigte Menü als Textmenü kann bei sehr vielen Links doch recht groß werden. Um eine Abhilfe zu schaffen bei größeren Menüs kann man auch Pulldowns in das Menü integrieren.

Beispiel 2 Textmenü mit Pulldown
Klick hier für ein Menü mit Pulldownintegration

Code für den Pulldownbereich
code:
<script>
var vers = navigator.appVersion;
var name = navigator.appName;
vers_ie = vers.substring(22,23);
vers_nc = vers.substring(0,1);
if ((name == "Microsoft Internet Explorer" && vers_ie == 5) || (name == "Netscape" && vers_nc == 5)){
function auswahl(link) {
 if(link == "leer") {
   document.forms[0].reset();
  document.forms[0].elements[0].blur();
   return;
 }else {
   location.href = link;
   document.forms[0].reset();
   document.forms[0].elements[0].blur();
  }
 }
}
</script>
<form action="">
<select size=1 name="Auswahl" onChange="auswahl(this.form.Auswahl.options[this.form.Auswahl.options.selectedIndex].value)" style="width:150px; background-color:#FFFFFF; font-size:8; font-weight:bold; font-family:Arial; Color:#000000;" width="150">
<option value="leer">~~~UserCP~~~</option>
<option value="1.php?action=profile_edit{$SID_ARG_1ST}">Profil bearbeiten</option>
<option value="usercp.php?action=options_change{$SID_ARG_1ST}">Einstellungen editieren</option>
<option value="leer">===============</option>
<option value="bank.php?action=view{$SID_ARG_1ST}">Bank</option>
<option value="lottospielen.php{$SID_ARG_1ST}">Lotto</option>
<option value="gutscheinhack.php{$SID_ARG_1ST}">Gutscheine</option>
<option value="leer">===============</option>
<option value="boardhp.php?action=edit{$SID_ARG_1ST}">HP bearbeiten</option>
<option value="vgprofil_gal.php{$SID_ARG_1ST}">Profilgalerie</option>
<option value="autogalerie.php?action=show_user_daten{$SID_ARG_1ST}">Autogalerie</option>
<option value="mein_bazar.php{$SID_ARG_1ST}">Inserate</option>
<option value="leer">===============</option>
<option value="usercp_knuddels_shop.php?do=kaufen{$SID_ARG_1ST}">Knuddelshop</option>
<option value="smilieshop.php{$SID_ARG_1ST}">Smilieshop</option>
<option value="wbbshop.php{$SID_ARG_1ST}">WBB-Shop</option>
</select></form>


Der Obere Bereich des Scripts muß so übernommen werden, im unteren Bereich wo die Links aufgerufen werden kann der Code natürlich an die eigenen Bedürfnisse angepasst werden.

style="width:150px; background-color:#FFFFFF; font-size:8; font-weight:bold; font-family:Arial; Color:#000000;" width="150"> Dieser Bereich bestimmt das aussehen des Pulldowns und kann individuell angepasst werden.
<option value="usercp.php?action=options_change{$SID_ARG_1ST}">Einstellungen editieren</option>Einzelner Linkcode, wie in Beispiel 1 im ersten Tread kann jeder einzelne Code angepasst werden an die Bedürfnisse
<option value="leer">===============</option> Diese Codepassage ist für Trennungen von einzelnen Bereichen


Mittels Pulldowns (Man kann auch mehrere davon innerhalb des Menüs verwenden) kann man die Länge des gesamten Menüs kleiner halten. Natürlich gibt es auch die Möglichkeit andere Pulldownscripte einzusetzen, z.B. mit Bestätigungsbutton.

22.07.2010 23:57 Listiger_Falke ist offline Email an Listiger_Falke senden Homepage von Listiger_Falke Beiträge von Listiger_Falke suchen Nehmen Sie Listiger_Falke in Ihre Freundesliste auf
 
Neues Thema erstellen Antwort erstellen
Gehe zu:

Powered by Burning Board Lite 1.0.2 © 2001-2004 WoltLab GmbH