Bis zum nächsten Treffen sind es noch genau:


Dies ist lediglich unser Testboard - Unser Forum findest du hier: "Zum Forum"

Tutorial (ohne HTML im Beitrag)


Symbolbar - Positionierung der Smilebar / des Farbbalkens; Erweiterungen

in Tutorial (ohne HTML im Beitrag) 22.02.2010 09:16
von achimth • Administrator | 113 Beiträge

Die Symbolbar

Die Symbolbar soll bei der Gestaltung unserer Beiträge unterstützen und die Möglichkeit geben auf einfach Art und Weise den Beiträgen ein gefälliges Aussehen zu verleihen.

Um dieses etwas leichter zu machen, habe ich zur Positionierung der Smiliebar und des Farbbalkens ein kleines Tutorial geschrieben.
Und im weiteren Verlauf des Tuts gehe ich noch auf die Erweiterung der Symbolbar durch weitere Funktionen, zusätzliche Smilies oder Farben ein.

Die Bilder zur Erläuterung stammen aus dem GAIA Template, sämtliche Änderungen sind ohne Eingriff in die Templates möglich und stehen als Grundfunktion des Templates zur Verfügung.
Da bei Änderungen an der Symbolbar HTML Code benutzt wird empfehle ich als begleitende Lektüre die Webseite http://de.selfhtml.org auf der man sich weiter informieren kann.

Sollte einmal nach einer Veränderung nichts zu sehen sein, oder Werte, Codes falsch eingegeben worden sein, so hat man die Möglichkeit im Adminmenü -> Einstellungen -> Symbolbar diese mit einem Klick auf den Link "zurücksetzen" (rechts neben speichern) alles wieder auf den Originalzustand zurückzusetzen.

1. Positionierung der Smiliebar
2. Positionierung des Farbbalkens
3. Erweiterung der Symbolbar durch zusätzliche Formatierungsoptionen unter Verwendung der Forencodes (als Ergänzung zu diesem Artikel: http://www.hpm-support.de/t522593f117691...ellen-Teil.html)
4. Anregungen
a. Formatierungsoptionen
b. zusätzliches Smiliefenster




1. Positionierung der Smiliebar

Wer kennt es nicht, je nach Auswahl des Templates oder darin vorgenommenen Einstellungen ist die Position der Smiliebox beim Aufruf nicht optimal. Sie steht zum Beispiel über Verlinkungen oder verdeckt Text.







Vorab sollte man feststellen, wo dies Smiliebox überall zum Einsatz kommt, damit man einen guten Kompromiss für die Position erarbeiten kann, denn nicht jedesmal steht sie an der gleichen Stelle.
Da wären zu nennen: "Thema erstellen" , "Beitrag schreiben", "PN schreiben" .....

Um Veränderungen vorzunehmen rufen wir im Adminmenü den Punkt Einstellungen und dann den Bereich Symbolbar auf.





In dem Feld Symbolbar verändern finden wir jetzt den aktuellen Symbolbarcode.
Dort suchen wir die Zeilen:

1
<div id="tab_smilies" style="display: none; position: absolute; background-color: white; margin-top: -5px; padding: 5px; width: 100px; margin-left: 110px;" onlick="document.getElementById('tab_smilies').style.display='none';">



Darin enthalten sind die für uns wichtigen Angaben

1. für die horizontale Position "margin-left:110px"
2. für die vertikale Position "margin-top: -5px"
3. dür die Breite des Feldes "width: 100px"

Um den Usprungspunkt für das Feld zu sehen, geben wir nun einmal bei den Werten für 1 + 2 "0px" ein und speichern ab.
Nun sollte es nach Neuaufruf des Forums zum Beispiel bei Thema erstellen ungefähr an dieser Stelle stehen







Wie zu sehen ist, ist die Smiliebar nach links und etwas tiefer gerückt.
Für die horizontale Richtung gilt: Eine positive Zahl schiebt die Smiliebar nach rechts, eine negative Zahl schiebt sie nach links
Für die vertikale Richtung gilt: Einen positive Zahl schiebt die smiliebar nach unten, eine negative Zahl schiebt sie nach oben.

Nun kann man anfangen die Werte in der Code-Zeile der Symbolbar zu verändern und sich jeweils die Änderungen nach Neuaufruf des Forums anzeigen lassen.

Ich habe im GAIA Template die Werte
"margin-left:300px"
"margin-top: 20px"

benutzt, somit sieht die Codezeile jetzt so aus

1
<div id="tab_smilies" style="display: none; position: absolute; background-color: white; margin-top: -20px; padding: 5px; width: 100px; margin-left: 300px;" onlick="document.getElementById('tab_smilies').style.display='none';">



und die Smiliebar ist neben die Links in der Zeile gerückt.







Ich komme noch einmal auf den Wert "width" für die Breite zurück, da ich meine Smilies in einem etwas breiteren Fenster darstellen möchte.
Dazu gebe ich jetzt den Wert
"width: 250px"
ein. Das lässt meine Smiliebar breiter werden. Auch hier kann man mit den Werten ausprobieren.






Das wars zur Symbolbar


2. Positionierung des Farbbalkens

Was zur Symbolbar funktioniert, lässt sich natürlich auch mit dem Farbbalken machen. Die Vorgehensweise ist die selbe, nur das wir diesmal den folgenden Ausgangscode aus der Symbolbar haben:

1
<div id="tab_color" style="display: none; position: absolute; background-color: white; margin-top: -5px; padding: 5px; width: 100px; margin-left: 120px;">



Wie man sieht, sind dort die selben Werte enthalten, wie sie uns bei der Smileibar schon begegnet sind. Auch hier könne wir nur analog zu der Anleitung für die Smiliebar, die Position des Farbbalkens verändern.

Das sollte dann auch gelingen und der Farbbalken könnte dann z.Bsp hier stehen.







Dann würde die Codezeile so aussehen

1
<div id="tab_color" style="display: none; position: absolute; background-color: white; margin-top: 0px; padding: 5px; width: 100px; margin-left: 300px;">



Aber das kann man ja jetzt so anpassen, wie man es selber haben möchte und wie es das Forumsdesign es erfordert.


3. Erweiterung der Symbolbar


Ich möchte nun hier noch ein Beipiel anfügen wie man die Symbolbar durch weitere Formatierungsoptionen erweitern kann. Das geschieht als Ergänzung / Erweiterung zu diesem Tutorial
http://www.hpm-support.de/t522593f117691...ellen-Teil.html
in dem ja schon auf die EWrweiterung der Smilie eingegangen wird.

Dazu will ich zeigen, wie man die Symbolbar um die Formatierungsoption "Zentrieren" erweitert.
Hierzu muss zunächst einmal eine kleine Grafik erstellt werden die später in der Symbolbar erscheinen soll. Wenn diese in der Größe passen soll, muss sie 16x16px groß sein, bei mir sieht die so aus:



Als nächstes benötigt man den enstprechenden "doppelten Forencode" den man im Adminmenü -> Einstellungen -> Codes/Smilies erstellt.

Im Menü sehen wir dieses Fenster






Das wir links oben mit dem Haken bei "Erweitert" benutzen.

Wir erstellen den Forumscode für zentrieren, in dem wir de Code wie auf dem folgenden Bild eintragen






Ein kurze Erklärung hierzu.
In der Zeile "Ersetze" steht der Code den wir später im Forum benutzen und der unseren zu formatierenden Text einschließt.
In der Zeile "Mit" steht der HTML Code der bei der Umsetzung benutzt wird.

Wer sich nicht mit HTML auskennt kann auch hier [URL]http://de.selfhtml.org[URL] sehr schön nachlesen was die einzelnen Codes so bewirken und sich eventuell auch Anregungen für weitere Ergänzungen holen.

Wenn man diesen Code nun abspeichert, kann man ihn bei der Erstellung von Beiträgen im Forum benutzen, in dem man einem Text den öffnenden Teil voranstellt

1
[center]


danach den zu formatierenden Text eingibt
und dann die Formatierung abschließt mit dem schließenden Code

1
[/center]


Wichtig, eine geöffnete Formatierung muss auch immer wieder geschlossen werden.

Damit wir uns jetzt nicht jedesmal die Arbeit mit der Eingabe des Codes machen müssen, wollen wir einen Button in unserer Symbolbar erstellen, der uns diese Arbeit abnimmt.
Hierzu gehen wir im Adminmenü -> Einstellungen ->Codes/Smilies und laden dort unser Grafiksymbol mit der Funktion "oder laden Sie hier eine neue Grafik hoch" zunächst einmal hoch.
Im Fenster Dateien hochladen erscheint jetzt unser kleines Symbol und daneben der HTML-Code den wir zum Einbauen in die Symbolbar brauchen.






Das Fenster lassen wir zum späteren Kopieren des Codes geöffnet.

Wir wechseln in das Adminmenü ->Einstellungen -> Symbolbar

Dort suchen wir im Code der Symbolbar folgende Stelle:

1
<div class="iconbar_main" style="display: inline;">



Danach beginnt der eigentliche Teil der Symbolbar. Als erstes ist dort der Code für die Fettschrift eingetragen.

Davor wollen wir unser Symbol für "Zentrieren" anlegen.
Wir orientieren uns am Code für die Fettschrift und fügen vor dem Code für die Fettschrift den Code für Zentrieren ein, den wir wie folgt beginnen:

1
<A HREF="javascript:insert



danach folgt der Code für Zentrieren, der sieht dann so aus:

1
('[center]','[/center]')" title="Zentrieren">


wie man sieht kommen hier die im Forencoder erstellten Bezeichnunge hin. "title" bedeutet eine Umschreibung für die Funktion die wir auslösen wollen.

Danach folgt der Teil, der unser eben hochgeladenes Bild in der Symbolbar anzeigt. Wir gehen in das noch offene Fenster von "Datei hochladen" und kopieren und den Code, der dort steht und fügen ihn ein. Das ">" am Ende des Codes entfernen wir und fahren dort im einem alt=.... fort. Nun fügen wir noch eine Angabe border="0"... hinzu, die verhindert, daß ein Rahmen um unser Symbol angezeigt wird (wer ene Rahmen möchte, kann auch mal eine 1 dort einsetzen) hinzu und setzen am Schluß das ">" wieder ein. "Alt" hat die Bedeutung, daß dieser Text beim Überfahren des Buttons mit der Maus angezeigt wird. Der Teil sieht dann so aus.

1
<img src="http://files.homepagemodules.de/b510724/a_1.png" width="16" height="16" alt="[center] Text, der zentriert werden soll [/center] border=0>



Beenden müssen wir nun den aufzurufenden Link mit </A> was wir ganz hinten anhängen.

Die komplette Codezeile in der Symbolbar sieht nun so aus:

1
<A HREF="javascript:insert('[center]','[/center]')" title="Zentrieren"><img src="http://files.homepagemodules.de/b510724/a_1.png" width="16" height="16" alt="[center] Textabschnitt, der zentriert werden soll [/center]" border=0></A>



Wir speichern ab und unsere aktuelle Symbolbar sollte jetzt so aussehen







Ausprobieren kann man das nun in einem beliebigen Bereich, in dem die Symbolbar zum Einsatz kommt.
Die Anwendung erfolgt, in dem man einen Text, der zentriert werden soll markiert und dann das Symbol anklickt. Also genauso als wenn man eine Text in Fettschrift darstellen möchte.


4. Anregungen

Wichtiger Hinweis:
Kopiert Euch den Inhalt des HTML Fensters jedesmal als Text in einen Editor, bevort ihr weitere Änderungen macht. Ihr sichert so Euren gesamten Code. So kann man, falls etwa schief geht, durch zurück kopieren den Ausgangspunkt wieder herstellen.


a. Zusätzliche Textformatierungen:

Hier jetzt noch ein paar Beispiele, wie die Erweiterungen für Text - links- oder rechtsausgerichtet, und Blocksatz lauten könnten.

Die Einbindung erfolgt gemäß den Schritten in dem Beispiel zu "Zentrieren"

Meine Grafiken hierzu sehen so aus:






Die doppelten Forencodes dazu sehen so aus.

Text Linksbündig:


Text rechtsbündig


Blocksatz


Eingebunden in die Symbolbar wird das dann auch gemäß der Anleitung im Teil "Zentrieren" . Wer es da geschafft hat, sollte es auch mit den obigen Codes hinbekommen.
Ich werde extra keine fertigen Codes hier einstellen, da es sehr wichtig ist, ein Verständnis für die Vorgehensweise zu entwickeln, um auch später Änderungen allein ausführen zu können.

b. Zusätzliches Smiliefenster für besondere Anlässe

Wenn man das 1. Smiliefenster nicht zu sehr überladen möchte, sollte man sich mit dem Gedanken befassen ein weiteres Smiliefenster zu gestalten in dem man z. Bsp. Smilies für bestimmte Anlässe (Ostern, Weihnachten, Geburtstag etc.) unterbringen kann.

Der Einbau eines 2. Smiliefensters erfolgt über das Adminmenü -> Einstellungen -> Symbolbar

Nachdem wir dieses aufgerufen haben, finden wir im HTML Fenster der Symbolbar den folgenden Abschnitt, den wir bearbeiten werden, um eine weiteres Fenster hinzu zu fügen:

1
2
3
<img src="http://img.homepagemodules.de/ds/static/gaia/smile.png" alt="[smile]" border=0  onclick="document.getElementById('tab_color').style.display='none'; if (document.getElementById('tab_smilies').style.display == 'block') {document.getElementById('tab_smilies').style.display='none'; } else {document.getElementById('tab_smilies').style.display='block';}" onmouseover="this.style.cursor='pointer';" title="Smilies">

<img src="http://img.homepagemodules.de/ds/static/gaia/color3.png" alt="[smile]" border=0 onclick="document.getElementById('tab_smilies').style.display='none'; if (document.getElementById('tab_color').style.display == 'block') {document.getElementById('tab_color').style.display='none'; } else {document.getElementById('tab_color').style.display='block';}" onmouseover="this.style.cursor='pointer';" title="Farben">



Hier wird festgelegt, was geschieht, wenn man mit der Maus auf das Smiliesymbol, bzw. das Farbensymbol in der Symbolbar klickt. Die einzelnen HTML Befehle werde ich nicht erläutern, dazu werden hier : http://de.selfhtml.org alle Informationen bereitsgestellt.

Der erste Abschnitt ist für den Aufruf der Smilies, der 2. Abschnitt ist für den Aufruf des Farbbalkens. Wir werden im späteren Verlauf auch hier etwas ändern müssen, damit das jeweils vorher aufgerufene Fenster auch wieder geschlossen wird.

Beginnen wir mit der Einrichtung eines weiteren Fensters. Dazu benötigen wir zuerst den 1. Teil des Codes von oben:

1
<img src="http://img.homepagemodules.de/ds/static/gaia/smile.png" alt="[smile]" border=0  onclick="document.getElementById('tab_color').style.display='none'; if (document.getElementById('tab_smilies').style.display == 'block') {document.getElementById('tab_smilies').style.display='none'; } else {document.getElementById('tab_smilies').style.display='block';}" onmouseover="this.style.cursor='pointer';" title="Smilies">



Diesen kopieren wir und fügen ihn direkt hinter danach nochmals ein. Jetzt hätten wir zwei identische Felder, was natürlich nicht gewollt ist.
Also müssen wir unserem 2. Fenster eine Zuordnung geben, die es eindeutig identifiziert.

Erstmal soll unser 2. Fenster in der Symbolbar ein eigenes Icon bekommen. Dazu laden wir eine Grafik hoch, die wieder ca. 16*16px groß sein sollte.
Ich verwende mal dieses hier , weil ja Osteren als nächstes vor der Tür steht.

Die Bildadresse fügen wir nun in den obenstehende Code ein und ersetzen auch bei alt die Angabe, ich verwende hier mal "Ostersmilies", damit sieht der Anfang so aus:

1
<img src="http://files.homepagemodules.de/b200269/a_71.png" alt="[Ostersmilies]" border=0  



Der nächste Abschnitt des Codes beschäftigt sich mit der Abfrage, eventuell offener Fenster, die beim Klick auf das Symbol noch da sind, und ausgeblendet werden sollen. Diesen verändern wir durch hinzufügen der Abfrage für das 1. Smiliefenster wie folgt:

1
onclick="document.getElementById('tab_color').style.display='none'; document.getElementById('tab_smilies').style.display='none'; 



Nun werden beide IDs 'tab_color' und 'tab_smilies' auf den Zustand geöffnet hin abgefragt und durch "display= 'none' ausgeblendet.

weiter geht es mit der Abfrage, ob unser Fenster schon geöffnet ist, dann wird es ja wie bekannt auf den nächsten Klick wieder geschlossen.
An dieser Stelle müssen wir unserem neuen Fenster einen eindeutigen Namen geben, ich nehme 'tab_ostern' und danach für den Fall, das es noch nicht offen war, wird entschieden, daß es geöffnet wird.

1
 onclick="document.getElementById('tab_color').style.display='none'; document.getElementById('tab_smilies').style.display='none'; if (document.getElementById('tab_ostern').style.display == 'block') {document.getElementById('tab_ostern').style.display='none'; } else {document.getElementById('tab_ostern').style.display='block';}" onmouseover="this.style.cursor='pointer';" title="Ostersmilies">



Bei "title" habe ich Ostersmilies genommen, weil der User ja sehen soll was er da öffnet. Das wird ihm dadurch angezeigt.

Der komplette Codeteil sieht dann so aus

1
2
3

<img src="http://files.homepagemodules.de/b200269/a_71.png" alt="[Ostersmilies]" border=0 onclick="document.getElementById('tab_color').style.display='none'; document.getElementById('tab_smilies').style.display='none'; if (document.getElementById('tab_ostern').style.display == 'block') {document.getElementById('tab_ostern').style.display='none'; } else {document.getElementById('tab_ostern').style.display='block';}" onmouseover="this.style.cursor='pointer';" title="Ostersmilies">



Jetzt können wir das erste mal speichern und die Vorschau der Symbolbar sollte jetzt so aussehen, natürlich bei euch mit dem Symbol was ihr euch ausgesucht habt:


Natürlich passiert jetzt noch nicht beim Klicken, wir sind ja auch noch nicht fertig

Nun müssen wir die 2 anderen Aufrufe noch anpassen, damit auch unser Ostersmiliefenster geschlossen wird, wenn ein anderes Fenster geöffnet wird.
Da ich es oben ja lang erklärt habe, werden ihr an den folgenden Codes die Änderungen selber erkennen. Es werden die Abfragen für unser Ostersmilefenster über 'tab_ostern' hinzugefügt.

Die 3 Codeabschnitte (1. alte Smilies, 2. Ostersmilies, 3. Farben) sehen dann insgesamt so aus:

1
2
3
4
5
6
7
<img src="http://img.homepagemodules.de/ds/static/gaia/smile.png" alt="[smile]" border=0  onclick="document.getElementById('tab_color').style.display='none'; document.getElementById('tab_ostern').style.display='none'; if (document.getElementById('tab_smilies').style.display == 'block') {document.getElementById('tab_smilies').style.display='none'; } else {document.getElementById('tab_smilies').style.display='block';}" onmouseover="this.style.cursor='pointer';" title="Smilies">

<img src="http://files.homepagemodules.de/b200269/a_71.png" alt="[Ostersmilies]" border=0 onclick="document.getElementById('tab_color').style.display='none'; document.getElementById('tab_smilies').style.display='none'; if (document.getElementById('tab_ostern').style.display == 'block') {document.getElementById('tab_ostern').style.display='none'; } else {document.getElementById('tab_ostern').style.display='block';}" onmouseover="this.style.cursor='pointer';" title="Ostersmilies">

<img src="http://img.homepagemodules.de/ds/static/gaia/color3.png" alt="[color]" border=0 onclick="document.getElementById('tab_smilies').style.display='none'; document.getElementById('tab_ostern').style.display='none'; if (document.getElementById('tab_color').style.display == 'block') {document.getElementById('tab_color').style.display='none'; } else {document.getElementById('tab_color').style.display='block';}" onmouseover="this.style.cursor='pointer';" title="Farben">



Damit wäre der schwierigste Teil geschafft.
Damit wir nun auch unsere Smiliefenster alle sehen müssen wir noch einen DIV-Tag hinzufügen, der unsere Ostersmilies nachher beinhaltet.

Hier orientieren wir uns einfach an dem schon vorhandenen DIV Tag für die "Standardsmiles" der ja so aussieht, als Beispiel mit einem Smiliecode dazwischen, die restlichen habe ich weggelassen.

1
2
3
4
5
6
7

<div id="tab_smilies" style="display: none; position: absolute; background-color: white; margin-top: -5px; padding: 5px; width: 100px; margin-left: 110px;" onlick="document.getElementById('tab_smilies').style.display='none';">

<A HREF="javascript:returnTag('[smile]')" onclick="document.getElementById('tab_smilies').style.display='none';"><img src="http://img.homepagemodules.de/smile.gif" alt="[smile]" border=0 width="15" height="15"></A>
...... Hier stehen weitere smile-codes
</div>



Wie ihr ahnt muss dieser jetzt auch geändert werden, damit unsere Ostersmilies aufgerufen werden können. Wir finden wieder die ID 'tab_smilies' die wir wieder in 'tab_ostern' ändern.

Der Code, den wir dann zusätzlich einfügen sieht dann so aus (nicht den bestehenden Code ändern, sondern einen neuen so anlegen) und einfach vor dem obenstehenden Code einfügen:

1
2
3
4
<div id="tab_ostern" style="display: none; position: absolute; background-color: white; margin-top: -5px; padding: 5px; width: 100px; margin-left: 200px;" onlick="document.getElementById('tab_smilies').style.display='none';">
..... Hier kommen später eure Smilie Codes hin .....
</div>



Ich probiere das einfach mal aus, indem ich einen Smiliecode aus den "Standardsmilies" kopiere und hier einsetze

Demnach setze ich diesen Codeabschnitt ein:

1
2
3
<div id="tab_ostern" style="display: none; position: absolute; background-color: white; margin-top: -5px; padding: 5px; width: 100px; margin-left: 200px;" onlick="document.getElementById('tab_smilies').style.display='none';">
<A HREF="javascript:returnTag('[smile]')" onclick="document.getElementById('tab_smilies').style.display='none';"><img src="http://img.homepagemodules.de/smile.gif" alt="[smile]" border=0 width="15" height="15"></A>
</div>



Wichtig: Das "</div>" muss immer am Ende dieses "Ostersmiliefensters" stehen. Die Codes der Smilies kommen immer dazwischen.

Nun noch abspeichern und man kann in der Vorschau der Symbolbar die Icons anklicken und ssehen wie sich die verschiedenen Fenster öffnen.

Veilleicht habt ihr ja jetzt ein wenig die Zusammenhänge verstanden und Lust bekommen auch noch ein 3. Fenster zu machen, nur zu....

Wer jetzt nichts mehr sieht, hat irgendwo einen Fehler eingebaut. Das lässt sich durch "zurücksetzen" der Symbolbar beheben und falls man vorher schon Änderungen darin hatte, die man gesichert hat, eben diesen Code wieder zurück kopieren.




Wer jetzt Interesse daran gefunden hat, der kann sich mit den entsprechenden HTML Codes die Symbolbar entsprechend erweitern. Hier nochmals der Hinweis auf
http://de.selfhtml.org
wo man sich Anregungen, über Formatierungsmöglichkeiten holen kann.

Viel Spaß

Achim


Das Copyright des Beitrags und der enthaltenen Bilder liegt beim Autor und darf ohne dessen Zustimmung nicht kopiert oder ohne seine Zustimmung verwendet werden.
Kontakt siehe Impressum


-------------------------------------------------------------------

Bis zum nächsten Treffen sind es noch genau:





Infos zum Projekt 2009

Testboard


*this message is printed on 100% recycled electrons*

-------------------------------------------------------------------

zuletzt bearbeitet 07.03.2010 22:02 | nach oben scrollen






Neuestes Mitglied:

Im Moment sind 2 User online ( 0 Mitglieder | 2 Gäste).
Das Forum hat 73 Themen und 141 Beiträge.
Der Rekord liegt bei 26 Benutzern am 01.11.2012 12:08 Uhr.
Mitglieder | Wer ist Online? | FAQ | Impressum


Xobor Einfach ein eigenes Forum erstellen | ©Xobor.de
Datenschutz