Seite 1 von 2
#1 DropDown Menü für die Iconbar - Mit "select" von Wolfgang 17.06.2007 21:43

avatar

DropDown Menü für die Iconbar - Mit 'select'
Aktualisiert 10.12.21



DropDown Menüs sind schnell erstellt gegenüber Grafik-Menüs und können vielseitig eingesetzt werden.
Allerdings werden diese DropDown-Menüs nicht von allen Browser gleich dargestellt!
Werden DropDown-Menüs mit "form + select" erstellt, ergeben sich 3 Möglichkeiten mit kleinen Erweiterungen!

DropDown Menü 1 ohne "GO-Button":



Funktion:
  • Im Auswahl-Menü wird eine Position ausgewählt und über einen Mausklick ausgelöst.

Vorteil:
  • Der ausgewählte Menüpunkt kann sofort aufgerufen werden!!!
  • Durch einen speziellen Eintrag mit "onChange" lassen sich Menüpunkte auch mehrmals hintereinander auslösen!!!

Nachteil:
  • Wird nicht von allen Browsern gleich dargestellt!
  • Lässt sich nicht beliebig formatieren!

Zum Skript:
  • Über "Style" (Zeile 2-4) lässt sich das DropDown-Menü auch in Grenzen formatieren!
  • In Zeile 10 wird der Name des DropDown-Menüs eingetragen! !
  • In Zeile 8 steckt die Auslösung der Menüauswahl!
  • Mit "optgroup" (Zeile 12+15) lässt sich bei großer Menüauswahl noch eine Überschrift setzen!
  • In Zeile 13+14 kann die Menüauswahl beliebig erweitert werden!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<style>
select#menue1 {padding-left:5px;border-radius:4px;background:#aaaaff;border:1px solid #383838;cursor:pointer;}
#menue1 optgroup {background:#bbbbff;cursor:default;}
#menue1 option {padding-left:10px;background:#eeeeff;}
</style>
 
<form>
<select id="menue1" name="menue1" onChange="top.location = this.form.menue1.options[this.form.menue1.selectedIndex].value; this.form.menue1.options[0].selected = true;">
 
<option value="#" selected hidden>DropDown-Menü</option>
 
<optgroup label="Foren-Links">
<option value="https://www.hilfe-tricks-tipps.de/t168f31-Formatierbare-Tooltipps-oder-Quickinfos-mit-Randbereichs-Funktion.html">Formatierbare Tooltipps oder Quickinfos!</option>
<option value="https://www.hilfe-tricks-tipps.de/t1300f31-Multi-Dialog-Assistent-fuer-die-Iconbar.html">Multi-Dialog-Assistent für die Iconbar</option>
</optgroup>
 
</select>
</form>
 





DropDown-Menü 2 mit "GO-Button":



Funktion:
  • Über ein Auswahl-Menü wird eine Position ausgewählt und ins Anzeigefenster gebracht. Ein GO-Button löst die Funktion aus.

Vorteil:
  • Die Auswahl, die im Anzeigefenster steht, kann immer wieder über den GO-Button ausgelöst werden!

Nachteil:
  • Zusätzlicher GO-Button!
  • Wird nicht von allen Browsern gleich dargestellt!
  • Lässt sich nicht beliebig formatieren!

Zum Skript:
  • Über "Style" (Zeile 2-5) lässt sich das DropDown-Menü auch in Grenzen formatieren!
  • Zeile 5 kann man speziell den Button formatieren!
  • In Zeile 11 wird der Name des DropDown-Menüs eingetragen!
  • Mit "optgroup" (Zeile 13+16) lässt sich bei großer Menüauswahl noch eine Überschrift setzen!
  • In Zeile 14+15 kann die Menüauswahl beliebig erweitert werden!
  • In Zeile 20 steckt die Auslösung mit dem GO-Button. Der Button kann auch unter "value" umbeschriftet werden!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<style>
select#menue2 {padding-left:5px;border-radius:4px;background:#aaaaff;border:1px solid #383838;cursor:pointer;}
#menue2 optgroup {background:#bbbbff;cursor:default;}
#menue2 option {padding-left:10px;background:#eeeeff;}
input#menuebutton{background:#001179;color:#eeeeee;cursor:pointer;}
</style>
 
<form>
<select id="menue2" name="menue2">
 
<option value="#" selected hidden>DropDown-Menü</option>
 
<optgroup label="Foren-Links">
<option value="https://www.hilfe-tricks-tipps.de/t1271f31-Neues-Forum-FAQ-mit-verbesserter-Suchmaschine.html">FAQ verbessern und interessanter gestalten!</option>
<option value="https://www.hilfe-tricks-tipps.de/t147f31-Geheime-Sachen-Verschiedene-Benutzergruppen-Quelltext-unlesbar-machen.html">Geheime Sachen - Quelltext unlesbar machen! </option>
</optgroup>
 
</select>
 
<input id="menuebutton" type="button" onClick="top.location = this.form.menue2.options[this.form.menue2.selectedIndex].value;" value="GO">
</form>
 





DropDown-Menü 3 mit "Grafik-Button":



Funktion:
  • Über ein Auswahl-Menü wird eine Position ausgewählt und ins Anzeigefenster gebracht. Der Grafik-Button löst die Funktion aus.

Vorteil:
  • Die Auswahl, die im Anzeigefenster steht, kann auch hier, immer wieder über die Grafik ausgelöst werden!

Nachteil:
  • Zusätzliche Grafik!
  • Wird nicht von allen Browsern gleich dargestellt!
  • Lässt sich nicht beliebig formatieren!

Zum Skript:
  • Über "Style" (Zeile 2-5) lässt sich das DropDown-Menü auch in Grenzen formatieren!
  • Zeile 5 kann man speziell den Button formatieren!
  • In Zeile 11 wird der Name des DropDown-Menüs eingetragen!
  • Mit "optgroup" (Zeile 13+16) lässt sich bei großer Menüauswahl noch eine Überschrift setzen!
  • In Zeile 14+15 kann die Menüauswahl beliebig erweitert werden!
  • In Zeile 20 steckt die Auslösung mit dem GO-Button. Der Button kann auch unter "value" umbeschriftet werden!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<style>
select#menue3 {padding-left:5px;border-radius:4px;background:#aaaaff;border:1px solid #383838;cursor:pointer;}
#menue3 optgroup {background:#bbbbff;cursor:default;}
#menue3 option {padding-left:10px;background:#eeeeff;}
#menuegrafik img{border:0;width:20px;margin-bottom:-6px;}
</style>
 
<form name="jump3">
<select id="menue3" name="menue3">
 
<option value="#" selected hidden>DropDown-Menü</option>
 
<optgroup label="Foren-Links">
<option value="https://www.hilfe-tricks-tipps.de/t1081f31-Smileys-fuer-Themen-Markierungen-einfuegen-und-bearbeiten-Teil.html#msg2254">Smileys für Themen-Markierungen </option>
<option value="https://www.hilfe-tricks-tipps.de/t1154f31-Kopiersperre-Markierungssperre-Eigenes-Kontextmenue-Rechte-Maustaste-Kopierschutz-fuer-Webseiten.html">Kopierschutz für Webseiten</option>
</optgroup>
 
</select>
 
<a id="menuegrafik" href="#" onClick="location=document.jump3.menue3.options[document.jump3.menue3.selectedIndex].value;"><img src="https://files.homepagemodules.de/b104774/a_189_39f0dee3.png"></a>
</form>
 








Gutes Gelingen!

Wolfgang

#2 Schrift-Design wählbar über das DropDown Menü - Mit 'select' von Wolfgang 21.06.2007 19:38

avatar

Schrift-Design in der Iconbar - Mit 'select'
Aktualisiert 10.12.21



Für die neue Iconbar eignet sich das DropDown-Menü 1 ohne GO-Button am besten.
Für das Schrift-Design steht eine Auswahl von Überschriftgrößen, Schriftgrößen, Schriftfarben und Schrifthintergrundfarben zur Verfügung.


DropDown-Menü für die neue Iconbar, ohne Go-Button oder Grafik:



  • DropDown-Menü unter "HTML" anlegen.
  • Namen vergeben z.B. "Schriftdesign".
  • Unter "HTML" den folgenden Code eintragen.
  • Oder Zeile 13-50 in ein vorhandenes "DropDown-Menü" kopieren.
  • Über Zeile 4-6 kann das DropDown-Menü in Grenzen formatiert werden!
  • Speichern nicht vergessen!
  • Das war's! Fertig!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
<div class="xob_icon_cont">
 
<style>
select#menu1 {padding-left:5px;border-radius:4px;background:#aaaaff;border:1px solid #383838;cursor:pointer;}
#menu1 optgroup {background:#bbbbff;cursor:default;}
#menu1 option {padding-left:10px;background:#eeeeff;}
</style>
 
<select name="menu1" onChange="javascript:top.location = this.form.menu1.options[this.form.menu1.selectedIndex].value; this.form.menu1.options[0].selected = true;">
 
<option value="#" selected hidden>Schrift-Design</option>
 
<optgroup label="Überschrift">
<option value="javascript:insert('[H3]','[/H3]')">H3 - Klein</option>
<option value="javascript:insert('[H2]','[/H2]')">H2 - Groß</option>
<option value="javascript:insert('[H1]','[/H1]')">H1 - Sehr Groß</option>
</optgroup>
 
<optgroup label="Schriftgröße">
<option value="javascript:insert('[style=font-size:9px;]','[/style]')">9px</option>
<option value="javascript:insert('[style=font-size:14px;]','[/style]')">Standard</option>
<option value="javascript:insert('[style=font-size:16px;]','[/style]')">16px</option>
<option value="javascript:insert('[style=font-size:18px;]','[/style]')">18px</option>
<option value="javascript:insert('[style=font-size:24px;]','[/style]')">24px</option>
<option value="javascript:insert('[style=font-size:32px;]','[/style]')">32px</option>
<option value="javascript:insert('[style=font-size:48px;]','[/style]')">48px</option>
</optgroup>
 
<optgroup label="Schriftfarbe">
<option style="color: #FFF080" value="javascript:insert('[hellgelb]','[/farbe]')">hellgelb</option>
<option style="color: #FFF000" value="javascript:insert('[gelb]','[/farbe]')">gelb</option>
<option style="color: #FF80C0" value="javascript:insert('[rosa]','[/farbe]')">rosa</option>
<option style="color: #800080" value="javascript:insert('[violett]','[/farbe]')">violett</option>
<option style="color: #00FFFF" value="javascript:insert('[tuerkis]','[/farbe]')">türkis</option>
<option style="color: #0080FF" value="javascript:insert('[hellblau]','[/farbe]')">hellblau</option>
<option style="color: #00008B" value="javascript:insert('[dunkelblau]','[/farbe]')">dunkelblau</option>
<option style="color: #80FF80" value="javascript:insert('[mint]','[/farbe]')">mint</option>
<option style="color: #80FF00" value="javascript:insert('[hellgruen]','[/farbe]')">hellgrün</option>
<option style="color: #008000" value="javascript:insert('[dunkelgruen]','[/farbe]')">dunkelgrün</option>
<option style="color: #804000" value="javascript:insert('[braun]','[/farbe]')">braun</option>
</optgroup>
 
<optgroup label="Hintergrund">
<option style="background-color: #FFFFFF" value="javascript:insert('[style=background-color: #FFFFFF]','[/style]')">Weiss</option>
<option style="background-color: #FFFF00" value="javascript:insert('[style=background-color: #FFFF00]','[/style]')">Gelb</option>
<option style="background-color: #FF0000" value="javascript:insert('[style=background-color: #FF0000]','[/style]')">Rot</option>
<option style="background-color: #800080" value="javascript:insert('[style=background-color: #800080]','[/style]')">Lila</option>
<option style="background-color: #0000FE" value="javascript:insert('[style=background-color: #0000FE]','[/style]')">Blau</option>
<option style="background-color: #008000" value="javascript:insert('[style=background-color: #008000]','[/style]')">Grün</option>
</optgroup>
 
</select>
 
</div>
 




  • Neue Iconbar aufrufen
  • "Neue Icons hinzufügen" anklicken
  • Reiter Forencode anklicken
  • Erweiterte Foren-Code einblenden!
  • Werte eintragen und speichern
  • Forencode in "nicht sichbar" verschieben




Ersetze:

1
2
3
 
[H1]
...
[/H1]
 

Mit:

1
2
3
 
<h1>
...
</h2>
 



Ersetze:

1
2
3
 
[H2]
...
[/H2]
 

Mit:

1
2
3
 
<h2>
...
</h2>
 



Ersetze:

1
2
3
 
[H3]
...
[/H3]
 

Mit:

1
2
3
 
<h3>
...
</h3>
 



Ersetze:

1
2
3
 
[hellgelb]
...
[/hellgelb]
 

Mit:

1
2
3
 
<span style="color="#FFFF80">
...
</span>
 



Ersetze:

1
2
3
 
[gelb]
...
[/gelb]
 

Mit:

1
2
3
 
<span style="color="#FFFF00">
...
</span>
 



Ersetze:

1
2
3
 
[rosa]
...
[/rosa]
 

Mit:

1
2
3
 
<span style="color="#8B0000">
...
</span>
 



Ersetze:

1
2
3
 
[violett]
...
[/violett]
 

Mit:

1
2
3
 
<span style="color="#800080">
...
</span>
 



Ersetze:

1
2
3
 
[tuerkis]
...
[/tuerkis]
 

Mit:

1
2
3
 
<span style="color="#00FFFF">
...
</span>
 



Ersetze:

1
2
3
 
[hellblau]
...
[/hellblau]
 

Mit:

1
2
3
 
<span style="color="#0080FF">
...
</span>
 



Ersetze:

1
2
3
 
[dunkelblau]
...
[/dunkelblau]
 

Mit:

1
2
3
 
<span style="color="#00008B">
...
</span>
 



Ersetze:

1
2
3
 
[mint]
...
[/mint]
 

Mit:

1
2
3
 
<span style="color="#80FF80">
...
</span>
 



Ersetze:

1
2
3
 
[hellgruen]
...
[/hellgruen]
 

Mit:

1
2
3
 
<span style="color="#80FF00">
...
</span>
 



Ersetze:

1
2
3
 
[dunkelgruen]
...
[/dunkelgruen]
 

Mit:

1
2
3
 
<span style="color="#008000">
...
</span>
 



Ersetze:

1
2
3
 
[braun]
...
[/braun]
 

Mit:

1
2
3
 
<span style="color="#804000">
...
</span>
 




Weitere Einsrtellungen > Reihenfolge:

1
 
0
 



Speichern nicht vergessen!




Hier ist ein Beispiel aus dem DropDown Menü "Schriftdesign":


Forum-Code:

1
2
3
4
5
 
Mehrere style-Verschachtelungen sind in der neuen Iconbar möglich! 
[style=font-size:24px;][style=background-color: #008000;][style=color:#FFFF00]Beispiel[/style][/style][/style]
 
Von Hand korregiert und vereinfacht!
[style=font-size:24px;background-color: #008000;color:#FFFF00]Beispiel[/style]
 

Ausgabe:
Beispiel




Wichtige Links hierzu aus dem Forum:






Bis dann und gutes Gelingen

Wolfgang

#3 Hintergrundbilder & Farben in der Iconbar - Mit 'select' von Wolfgang 21.06.2007 20:52

avatar


Hintergrundbilder & Farben in der Iconbar - Mit 'select'
Aktualisiert 10.12.21





Hintergrund-Vorlagen in der Symbol-Bar
Für die Symbol-Bar ist auch hier das DropDown Menü 1 ohne GO-Button am geeignetsten (siehe Erklärung).
Für die Hintergrund-Vorlagen stehen eine Auswahl von Hintergrundbildern oder Hintergrundfarben für den gesamten Beitrag zur Verfügung.

  • Die verwendeten Hintergrundbilder sind Web-Optimiert (Größe 1024x800px, 18-48kB) und dehnen sich auf 100% der Beitragsfläche aus.
  • Die hier verwendeten Bilder nennen sich: Gelbe Rose - Sonniger Himmel - Herbst - Tastatur 1 - Tastatur 2 - Grüner Wald
  • Es ist immer darauf zu achten, dass die Textfarbe + Textgröße zum Hintergrund passt und gut zu erkennen ist!




  • DropDown-Menü unter "HTML" anlegen.
  • Namen vergeben z.B. "Hintergrund".
  • Unter "Neuen Smileys anlegen > HTML" den folgenden Code eintragen.
  • Oder Zeile 13-31 in ein vorhandenes "DropDown-Menü" kopieren.
  • Über Zeile 4-6 kann das DropDown-Menü in Grenzen formatiert werden!
  • Speichern nicht vergessen!
  • Das war's! Fertig!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<div class="xob_icon_cont">

<style>
select#menu2 {padding-left:5px;border-radius:4px;background:#aaaaff;border:1px solid #383838;cursor:pointer;}
#menu2 optgroup {background:#bbbbff;cursor:default;}
#menu2 option {padding-left:10px;background:#eeeeff;}
</style>

<select id="menu2" name="menu2" onChange="javascript:top.location = this.form.menu2.options[this.form.menu2.selectedIndex].value; this.form.menu2.options[0].selected = true;">

<option value="#" selected hidden>Hintergrund</option>

<optgroup label="Hintergrundbild">
<option value="javascript:insert('[bg1]','[/end]')">Blaue Schatten</option>
<option value="javascript:insert('[bg2]','[/end]')">Spiegelndes Wasser</option>
<option value="javascript:insert('[bg3]','[/end]')">Ruhiges Wasser</option>
<option value="javascript:insert('[bg4]','[/end]')">Gelbe Rose</option>
<option value="javascript:insert('[bg5]','[/end]')">Grüner Wald</option>
<option value="javascript:insert('[bg6]','[/end]')">PC-Tastatur 1</option>
<option value="javascript:insert('[bg7]','[/end]')">PC-Tastatur 2</option>
<option value="javascript:insert('[bg8]','[/end]')">Herbst</option>
<option value="javascript:insert('[bg9]','[/end]')">Sonniger Himmel</option>
</optgroup>

<optgroup label="Einfarbig">
<option style="background-color:#71A5FF" value="javascript:insert('[bg10]','[/end]')">Blau</option>
<option style="background-color:#FD6E6A" value="javascript:insert('[bg11]','[/end]')">Rot</option>
<option style="background-color:#F3F4C8" value="javascript:insert('[bg12]','[/end]')">Gelb</option>
<option style="background-color:#D8F5D7" value="javascript:insert('[bg13]','[/end]')">Grün</option>
<option style="background-color:#C2BFF6" value="javascript:insert('[bg14]','[/end]')">Violett</option>
</optgroup>

</select>

</div>
 




  • Neue Iconbar aufrufen.
  • "Neue Icons hinzufügen" anklicken
  • Reiter Forencode anklicken.
  • Erweiterte Foren-Code einblenden!
  • Werte eintragen und speichern.
  • Forencode in "nicht sichbar" verschieben.
  • Speichern nicht vergessen!
  • Das war's! Fertig!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
Ersetze:  [bg1] mit: <div style="background-image: url(https://www.bilder-hochladen.net/files/1tys-1q.jpg);background-color:#203EFF;border:2px solid blue;margin:5px;padding:10px;padding-left:20px;color:#ffffff;width:95%;background-size:100% 100%;-moz-background-size:100% 100%;overflow:auto">

Ersetze: [bg2] mit: <div style="background-image: url(https://www.bilder-hochladen.net/files/78q-18x.jpg);background-color:#203EFF;border:2px solid blue;margin:5px;padding:10px;padding-left:20px;color:#FFFFFF;width:95%;background-size:100% 100%;-moz-background-size:100% 100%;overflow:auto">

Ersetze: [bg3] mit: <div style="background-image: url(https://www.bilder-hochladen.net/files/78q-md.jpg);background-color:#203EFF;font-weight:bold;margin:5px;padding:10px; padding-left:20px;border:2px solid blue;color:#000000;width:95%;background-size:100% 100%;-moz-background-size:100% 100%;overflow:auto">

Ersetze: [bg4] mit: <div style="background-image: url(https://www.bilder-hochladen.net/files/big/1tys-5g.jpg);background-color:#FFEBC3;border:2px solid orange;margin:5px;padding:10px;padding-left:20px;color:#FFFFFF;width:95%;background-size:100% 100%;-moz-background-size:100% 100%;overflow:auto">

Ersetze: [bg5] mit: <div style="background-image: url(https://www.bilder-hochladen.net/files/big/1tys-5n.jpg);background-color:#CDFFC3;border:2px solid green;margin:5px;padding:10px;padding-left:20px;color:#ffffff;width:95%;background-size:100% 100%;-moz-background-size:100% 100%;overflow:auto">

Ersetze: [bg6] mit: <div style="background-image: url(https://www.bilder-hochladen.net/files/big/1tys-5m.jpg);background-color:#96B9FF;border:2px solid orange;margin:5px;padding:10px;padding-left:20px;color:#ffffff; width:95%;background-size:100% 100%;-moz-background-size:100% 100%;overflow:auto">

Ersetze: [bg7] mit: <div style="background-image: url(https://www.bilder-hochladen.net/files/big/1tys-5l.jpg); background-color:#96B9FF;border:2px solid blue;font-weight:bold;margin:5px;padding:10px;padding-left:20px;color:#FFFFFF;width:95%;background-size:100% 100%;-moz-background-size:100% 100%;overflow:auto">

Ersetze: [bg8] mit: <div style="background-image: url(http://www.bilder-hochladen.net/files/big/1tys-5i.jpg);background-color:#FFEBC3;border:2px solid orange;font-weight:bold;margin:5px;padding:10px;padding-left:20px;color:#FFFFFF;width:95%;background-size:100% 100%;-moz-background-size:100% 100%;overflow:auto">

Ersetze: [bg9] mit: <div style="background-image: url(https://www.bilder-hochladen.net/files/big/1tys-5h.jpg);border:2px solid blue;margin:5px;font-weight:bold;padding:10px;padding-left:20px;color:#000000;width:95%;background-size:100% 100%;-moz-background-size:100% 100%;overflow:auto">

Ersetze: [bg10] mit: <div style="background-color:#8B94F9;font-weight:bold;margin:5px;padding:10px;padding-left:20px;border:2px solid blue;color:#FFFFFF;width:95%;overflow:auto">

Ersetze: [bg11] mit: <div style="background-color:#FD6E6A;font-weight:bold;margin:5px; padding:10px;padding-left:20px;border:2px solid red;color:#FFFFFF;width:95%;overflow:auto">

Ersetze: [bg12] mit: <div style="background-color:#F3F4C8;font-weight:bold;margin:5px;padding:10px;padding-left:20px;border:2px solid orange;color:#000000; width:95%;overflow:auto">

Ersetze: [bg13] mit: <div style="background-color:#D8F5D7;margin:5px;padding:10px;padding-left:20px;border:2px solid green;color:#0000FE; width:95%;overflow:auto">

Ersetze: [bg14] mit: <div style="background-color:#C2BFF6;margin:5px;padding:10px;padding-left:20px;border:2px solid blue;color:#ffff0; width:95%;overflow:auto">

 
Ersetze: [/end] mit: </div>
 






Siehe auch:







Bis dann und gutes Gelingen!

Wolfgang



#4 Umsetzen von HTML-Codes in BB-Codes von Wolfgang 02.07.2007 18:28

avatar

Umsetzen von HTML-Codes in BB-Codes
Aktualisiert 10.12.21






In den HPM-Foren wird der BB-Code (Bulletin Board Code) verwendet. Er ist eine an HTML angelehnte, jedoch vereinfachte Auszeichnungssprache.
Im BB-Code werden nicht alle Befehle, wie sie in HTML-Format gibt, umgesetzt.
In der neuen Iconbar unter "Admin > Layout > Iconbar > Iconbar bearbeiten", können noch notwendige Codes unter "Foren-Code" nachgetragen werden!





Hier sind noch andere, nicht so bekannte Codes, die im Forum auch funktionieren:

Aufzählung 1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
[list]
[*]erster Eintrag
[*]zweiter Eintrag
[/list]
 
[list=1]
[*]erster Eintrag
[*]zweiter Eintrag
[/list]
 
[list=A]
[*]erster Eintrag
[*]zweiter Eintrag
[/list]
 
[list=a]
[*]erster Eintrag
[*]zweiter Eintrag
[/list]
 

Ausgabe:

  • erster Eintrag
  • zweiter Eintrag


  1. erster Eintrag
  2. zweiter Eintrag


  1. erster Eintrag
  2. zweiter Eintrag


  1. erster Eintrag
  2. zweiter Eintrag



Aufzählung 2:

1
2
3
4
 
[ul]
[li]Ausgabe 1[/li]
[li]Ausgabe 2[/li]
[/ul]
 

Ausgabe:

  • Ausgabe 1
  • Ausgabe 2



Tabelle:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
[table]
[tr]
[style=font-size:18px]TEST - Tabelle[/style][hr]
[/tr]
[tr]
[td]TEST 1[/td][td]Augabe 1.1[/td] [td]Augabe 1.2[/td] [td]Augabe 1.3[/td]
[/tr]
[tr]
[td]TEST 2[/td][td]Augabe 2.1[/td] [td]Augabe 2.2[/td] [td]Augabe 2.3[/td]
[/tr]
[tr]
[td]TEST 3[/td][td]Augabe 3.1[/td] [td]Augabe 3.2[/td] [td]Augabe 3.3[/td]
[/tr]
[/table]
 

Ausgabe:


TEST - Tabelle
TEST 1Augabe 1.1 Augabe 1.2 Augabe 1.3
TEST 2Augabe 2.1 Augabe 2.2 Augabe 2.3
TEST 3Augabe 3.1 Augabe 3.2 Augabe 3.3



Email:

1
2
 
[email]forum@hilfe-tricks-tipps.de[/email]
[email=forum@hilfe-tricks-tipps.de]Schreib mir eine E-Mail[/email]
 

Ausgabe:

forum@hilfe-tricks-tipps.de
Schreib mir eine E-Mail



Schriftart:

1
 
Dieser Text verwendet die Schriftart [font=old english text mt]"Old English Text MT"[/font]
 

Ausgabe:

Dieser Text verwendet die Schriftart "Old English Text MT"



Schriftfarbe:

1
2
 
Dieser Text verwendet die Schriftfarbe [color=#007000]Grün[/color]
Dieser Text verwendet die Schriftfarbe [color=green]Grün[/color]
 

Ausgabe:

Dieser Text verwendet die Schriftfarbe Grün



Schriftgröße (size=0-7):

1
 
[size=0]o[/size][size=1]o[/size][size=2]o[/size][size=3]o[/size][size=4]o[/size][size=5]o[/size][size=6]o[/size][size=7]oh![/size]
 

Ausgabe:

ooooooooh!



Schriftgröße mit "small" und "big":

1
2
 
[small]o[/small][big]o[/big][big][big]o[/big][/big][big][big][big]o[/big][/big][/big][big][big][big][big]o[/big][/big][/big][/big][big][big][big][big][big]o[/big][/big][/big][/big][/big][big][big][big][big][big][big]o[/big][/big][/big][/big][/big][/big][big][big][big][big][big][big][big]oh![/big][/big][/big][/big][/big][/big][/big] - 
Test
 

Ausgabe:

ooooooooh!








Informative Links:






Bis dann

Wolfgang

#5 Spezielles DropDown-Menü für die Schriftgröße - Ohne 'select & option'! von Wolfgang 18.09.2019 21:56

avatar

Spezielles DropDown-Menü für die Schriftgröße - Ohne 'select & option'!
Aktualisiert 11.12.21



DropDown-Menüs mit "select & option" haben ihre Vorteile, lassen sich aber nicht beliebig formatieren!
Hinzu kommt noch, dass sie nicht in allen Browser gleich dargestellt werden!
Im folgenden Beitrag werden die Nachteile behoben und ein DropDown-Menü für die Schriftgröße mit DIV-Containern und dem hauseigenen "jQueryUI" vorgestellt!
Das Menü liefert Schriftgrößen von 9-26px und bietet auch die Möglichkeit, die Schriftgröße selber zu bestimmen!
Es bleibt so lange offen, bis es über den X-Button geschlossen wird. Zusätzlich lässt es sich noch frei bewegen (Draggable)!
Es gibt zwei Versionen, einmal mit "Xobor Superklick" und einmal ohne!


   oder    Schriftgröße

Spezielles DropDown-Menü für die Schriftgröße - Frei formatierbar:



Bild 1 Bild 2



  • DropDown-Menü unter "HTML" anlegen.
  • Namen vergeben z.B. "Schriftgröße".
  • Unter "HTML" den folgenden Code eintragen.
  • Zusätzliche Foren-Codes sind nicht erforderlich!

  • In Zeile 4 lässt sich die Position, Größe und das Aussehen des Menüs anpassen!
  • In Zeile 15 befindet sich das Auslöse-Icon!
  • In Zeile 16 befindet sich der Schrift-Button (muss zum Anzeigen auskommentiert werden)!
  • In Zeile 2+3 kann der Schrift-Button formatiert werden!
  • In Zeile 9 lässt sich die Mouseover-Farbe verändern!
  • In Zeile 25 ist die Standard-Schriftgröße mit 14px festgelegt!
  • Das Menü kann beliebig erweitert und farblich angepasst werden!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
<style>
#fontsize_menue span {text-decoration:none !important;font-size:13px; background-image: linear-gradient(180deg,#9aadea,#cedfff 50%,#9aadea);border-radius:3px; color:#000143; padding:1px 9px;}
#fontsize_menue span:hover {color:#0763b8 !important;}
#fontsize{width:110px !important; margin-left:-100px; margin-top:0px; display:none; position:absolute; color:#000000; background:#ffffff; padding:0px !important; z-index:999999; text-align:left; border:1px solid #000000; border-radius:4px; font-size:13px; cursor:move;}
#fontsize_close {display:none; font-size:12px; margin-right:7px; color:#901000;}
#fontsize_close_div {float: right; padding:8px 10px 0 20px; font-weight:bold; cursor:pointer;}
#fontsize_on {padding-bottom:10px !important;}
#fontsize_on div{margin-left:6px; text-align:left !important; padding:3px 5px; cursor:pointer; ccolor:#000000; font-weight:bold; clear:both !important; min-width:80px;}
#fontsize_on div:hover{background:#222476; color:#eeeeee !important;}
#fontsize_line {margin:0px 6px !important; cursor:move !important;}
#fontsize_line:hover {background:none !important;}
</style>
 
<div class="xob_icon_cont" id="fontsize_menue">
<span title="Schriftgröße auswählen, bitte anklicken!"><img class="xob_icon" src="//files.homepagemodules.de/b104774/a_189_39f0dee3.png" width="12px"></span>
<div id="fontsize">
<div id="fontsize_close_div"><div id="fontsize_close">Schließen</div>X</div>
<div style="clear:both;"></div>
 
<div id="fontsize_on">
<div onclick="xob_insert('[style=font-size:9px]','[/style]')" style="font-size:10px;">9px</div>
<div onclick="xob_insert('[style=font-size:10px]','[/style]')" style="font-size:11px;">10px</div>
<div onclick="xob_insert('[style=font-size:11px]','[/style]')" style="font-size:12px;">11px</div>
<div onclick="xob_insert('[style=font-size:12px]','[/style]')" style="font-size:13px;">12px</div>
<div onclick="xob_insert('[style=font-size:14px]','[/style]')" style="font-size:14px;color:#700000">Standard</div>
<div onclick="xob_insert('[style=font-size:16px]','[/style]')" style="font-size:15px;">16px</div>
<div onclick="xob_insert('[style=font-size:18px]','[/style]')" style="font-size:16px;">18px</div>
<div onclick="xob_insert('[style=font-size:20px]','[/style]')" style="font-size:17px;">20px</div>
<div onclick="xob_insert('[style=font-size:22px]','[/style]')" style="font-size:18px;">22px</div>
<div onclick="xob_insert('[style=font-size:24px]','[/style]')" style="font-size:19px;">24px</div>
<div onclick="xob_insert('[style=font-size:26px]','[/style]')" style="font-size:20px;">26px</div>
 
<div id="fontsize_line"><hr></div>
 
<div onclick="xob_insert('[style=font-size:??px]','[/style]')" style="color:#700000;font-size:14px;">Variabel</div>
</div>
</div>
</div>
 
<script>
$(function(){
$('#fontsize_menue span').click(function(){
$('#fontsize').show(300).draggable();
});
$('#fontsize_close_div').click(function(){
$('#fontsize').slideUp(300);
});
$('#fontsize_close_div').hover(function(){
$('#fontsize_close').css('display','inline');
},function(){
$('#fontsize_close').hide();
});
});
</script>
 




  • Iconbar öffnen unter "Amin > Layout > Iconbar"
  • Reiter "HTML" anklicken und das neue Skript unter "HTML" eintragen!
  • Namen vergeben (z.B.: jQueryUI 1.12.1 und unter "Name" eintragen!
  • Speichern nicht vergessen!
  • "jQueryUI 1.12.1" ganz nach oben schieben!

1
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
 


Oder!






  • "Xobor Superklick" muss installiert sein!
  • Das neue DropDown-Menü muss in der Iconbar oberhalb vom "Xobor Superklick" geschoben werden!
  • DropDown-Menü unter "HTML" anlegen.
  • Namen vergeben z.B. "Schriftgröße".
  • Unter "HTML" den folgenden Code eintragen.
  • Zusätzliche Foren-Codes sind nicht erforderlich!

  • In Zeile 2 lässt sich die Position, Größe und das Aussehen des Menüs anpassen!
  • In Zeile 3+4 lässt sich der Auslöse-Button im Ausehen gestalten!
  • In Zeile 12 befindet sich die Auslösung!
  • In Zeile 6 lässt sich die Mouseover-Farbe verändern!
  • In Zeile 20 ist die Standard-Schriftgröße mit 14px festgelegt!
  • Das Menü kann beliebig erweitert und farblich angepasst werden!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<style>
#fontsize_menue .xob_subiconlist{width:110px !important;mmargin-top:-50px;margin-left:-120px !important;color:#000000;padding:5px 0;}
#fontsize_menue span {text-decoration:none !important;font-size:13px; background-image: linear-gradient(180deg,#9aadea,#cedfff 50%,#9aadea);border-radius:3px; color:#000143; padding:1px 9px;}
#fontsize_menue span:hover {color:#0763b8 !important;}
#fontsize_on div {clear:both;line-height:24px;width:85px;text-align:left;padding:0 10px !important;font-weight:bold;cursor:pointer;}
#fontsize_on div:hover {background:#000143; color:#eeeeee !important;}
#fontsize_on #fontsize_line {cursor: default !important;}
#fontsize_on #fontsize_line:hover {background:none !important;}
</style>
 
<div class="xob_icon_cont hassub" onmouseover="showSub('10001')" onmouseout="hideSub('10001')" id="fontsize_menue">
<span title="Schriftgröße auswählen, bitte anklicken!">Schriftgröße</span>
<div class="xob_subiconlist" id="xob_sub_10001">

<div id="fontsize_on">
<div onclick="xob_insert('[style=font-size:9px]','[/style]')" style="font-size:10px;">9px</div>
<div onclick="xob_insert('[style=font-size:10px]','[/style]')" style="font-size:11px;">10px</div>
<div onclick="xob_insert('[style=font-size:11px]','[/style]')" style="font-size:12px;">11px</div>
<div onclick="xob_insert('[style=font-size:12px]','[/style]')" style="font-size:13px;">12px</div>
<div onclick="xob_insert('[style=font-size:14px]','[/style]')" style="font-size:14px;color:#700000;"><b>Standard</b></div>
<div onclick="xob_insert('[style=font-size:16px]','[/style]')" style="font-size:15px;">16px</div>
<div onclick="xob_insert('[style=font-size:18px]','[/style]')" style="font-size:16px;">18px</div>
<div onclick="xob_insert('[style=font-size:20px]','[/style]')" style="font-size:17px;">20px</div>
<div onclick="xob_insert('[style=font-size:22px]','[/style]')" style="font-size:18px;">22px</div>
<div onclick="xob_insert('[style=font-size:24px]','[/style]')" style="font-size:19px;">24px</div>
<div onclick="xob_insert('[style=font-size:26px]','[/style]')" style="font-size:20px;">26px</div>
<div id="fontsize_line"><hr></div>

<div onclick="xob_insert('[style=font-size:??px]','[/style]')" style="font-size:14px;color:#700000;"><b>Variabel</b></div>
</div>
</div>
</div>
 









Wolfgang

Foren Spende
Hallo !

Wir hoffen, dass dir unser Forum gefällt und du dich hier genauso wohlfühlst wie wir.

Wenn du uns bei der Erhaltung des Forums unterstützen möchtest, kannst du mit Hilfe einer kleinen Spende dazu beitragen, den weiteren Betrieb zu finanzieren.

Deine Spende hilft!

Spendenziel: 84€
125%
 


Xobor Forum Software von Xobor