Forum - DropDown Menü für die Iconbar

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! � DropDown Menü für die Iconbar - Mit "select"

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? �rger mit dem PC, Laptop oder Tablet - Fragen & Antworten? Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten. XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! Das neue Template Xobor (v6). Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie. Wasserstoff - Energietr�ger der Zukunft. Die besten Links! Empfehlenswerte und interessante Links! Link - Suche. Verschiedenes Elektronik & Elektrotechnik - Fragen & Antworten Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones. Lob, Kritik & Verbesserungsvorschl�ge. Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit. Alles, was noch so �brig bleibt. Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel.

#1 | DropDown Menü für die Iconbar - Mit "select" datum

17.06.2007 21:43 (zuletzt bearbeitet: 11.12.2022 01:04)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3620
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1488

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

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>
 

Schlie�en

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>
 

Schlie�en

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>
 

Schlie�en

Gutes Gelingen!

Wolfgang

findet das Top!

Antworten

#2 | Schrift-Design wählbar über das DropDown Menü - Mit 'select' datum

21.06.2007 19:38 (zuletzt bearbeitet: 06.02.2024 18:19)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3620
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1488

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>
 

Schlie�en

  • Neue Iconbar aufrufen
  • "Neue Icons hinzufügen" anklicken
  • Reiter Forencode anklicken
  • Erweiterte Foren-Code einblenden!
  • Werte eintragen und speichern
  • Forencode in "nicht sichtbar" 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!

Schlie�en

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

Schlie�en

Wichtige Links hierzu aus dem Forum:

• Schriftart über die Symbolbar verändern!
• Meine komplette Symbol-Bar

Bis dann und gutes Gelingen

Wolfgang

Antworten

#3 | Hintergrundbilder & Farben in der Iconbar - Mit 'select' datum

21.06.2007 20:52 (zuletzt bearbeitet: 06.02.2024 18:34)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3620
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1488

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>
 

Schlie�en

  • Neue Iconbar aufrufen.
  • "Neue Icons hinzufügen" anklicken
  • Reiter Forencode anklicken.
  • Erweiterte Foren-Code ausblenden!
  • Werte eintragen und speichern.
  • Forencode in "nicht sichtbar" 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://files.homepagemodules.de/b104774/bhnetfiles-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://files.homepagemodules.de/b104774/bhnetfiles-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://files.homepagemodules.de/b104774/bhnetfiles-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://files.homepagemodules.de/b104774/bhnetfiles_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://files.homepagemodules.de/b104774/bhnetfiles_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://files.homepagemodules.de/b104774/bhnetfiles_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://files.homepagemodules.de/b104774/bhnetfiles_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(https://files.homepagemodules.de/b104774/bhnetfiles_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://files.homepagemodules.de/b104774/bhnetfiles_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>
 

Schlie�en

Siehe auch:

Meine neue Iconbar zum Herunterladen!

Bis dann und gutes Gelingen!

Wolfgang

Antworten

#4 | Umsetzen von HTML-Codes in BB-Codes datum

02.07.2007 18:28 (zuletzt bearbeitet: 10.12.2021 21:16)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3620
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1488

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

erster Eintrag
zweiter Eintrag

erster Eintrag
zweiter Eintrag

erster Eintrag
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 1 Augabe 1.1 Augabe 1.2 Augabe 1.3
TEST 2 Augabe 2.1 Augabe 2.2 Augabe 2.3
TEST 3 Augabe 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!

Schlie�en

Informative Links:

• German Aerobatics - Große BB Code Liste
• BB-Code Wikipedia

Bis dann

Wolfgang

Antworten

#5 | Spezielles DropDown-Menü für die Schriftgröße - Ohne 'select & option'! datum

18.09.2019 21:56 (zuletzt bearbeitet: 11.12.2021 09:50)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3620
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1488

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

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>
 

Schlie�en

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!

Wenn " Multi-Dialog-Assistent für die Iconbar!" oder Kategorienauswahl für die Iconbar - Version 3+4 bereits installiert wurde, ist die Installation von "Xobor jQueryUI 1.12.1" nicht mehr notwendig!

Schlie�en

  • "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>
 

Schlie�en

Wolfgang

Antworten

#6 | Spezielles DropDown-Menü für die Schriftart - Ohne 'select & option'! datum

19.09.2019 06:37 (zuletzt bearbeitet: 11.12.2021 09:56)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3620
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1488

Spezielles DropDown-Menü für die Schriftart - 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 Schriftart mit DIV-Containern und dem hauseigenen "jQueryUI" vorgestellt!
Das Menü liefert 11 verschiedene Schriftarten, die beliebig ausgetauscht werden können und bietet auch die Möglichkeit, die Schriftart 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 Schriftart

Spezielles DropDown-Menü für die Schriftart - Frei formatierbar:

Bild 1

Bild 2

  • DropDown-Menü unter "HTML" anlegen.
  • Namen vergeben z.B. "Schriftart".
  • 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 22 ist die Standard-Schriftart 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 type="text/css">
#fontstyle_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;}
#fontstyle_menue span:hover {color:#0763b8 !important;}
#fontstyle{width:210px; margin-left:-100px; margin-top:-200px; display:none; position:absolute; color:#000000; background:#ffffff; padding:0 !important; z-index:999999; text-align:left; border:1px solid #000000; border-radius:4px; font-size:13px; cursor:move;}
#fontstyle_close {display: none; font-size:12px; margin-right:7px; color:#901000;}
#fontstyle_close_div {float: right; padding:8px 15px 0 30px; font-weight:bold; cursor:pointer;}
#fontstyle_on {padding-bottom:10px !important;}
#fontstyle_on div{margin-left:5px; text-align:left !important; padding:3px 5px; cursor:pointer; color:#000000; font-weight:bold; clear:both !important; min-width:180px;}
#fontstyle_on div:hover{background:#222476; color:#eeeeee !important;}
#fontstyle_line {margin:0px 5px !important; cursor:move !important;}
#fontstyle_line:hover {background:none !important;}
</style>
 
<div class="xob_icon_cont" id="fontstyle_menue">
<span><img class="xob_icon" src="//files.homepagemodules.de/b104774/a_190_3568c6ec.png" width="18px" title="Schriftart auswählen, bitte anklicken!"></span>
<!-- <span title="Schriftart ausw&#228;hlen, bitte anklicken!">Schriftart</span> -->
<div id="fontstyle">
<div id="fontstyle_close_div"><div id="fontstyle_close">Schlie&#223;en</div>X</div>
<div style="clear:both;"></div>
 
<div id="fontstyle_on">
<div onclick="xob_insert('[style=font-family:verdana]','[/style]')" style="font-family:verdana;color:#700000;font-size:15px;">Standard</div><br>
<div onclick="xob_insert('[style=text-shadow: 1px 1px 0px #aaaaaa, 1px 2px 0px #a7a7a7, 1px 3px 0px #999999;]','[/style]')" style="text-shadow: 1px 1px 0px #aaaaaa, 1px 2px 0px #a7a7a7, 1px 3px 0px #999999;font-size:16px;font-family:verdana;">Text-Schatten</div><br>
<div onclick="xob_insert('[style=font-family:monospace;font-size:16px;]','[/style]')" style="font-family:monospace;font-size:16px">Monospace</div><br>
<div onclick="xob_insert('[style=font-family:blackadder itc;font-size:16px;]','[/style]')" style="font-family:blackadder itc;font-size:16px">Blackadder ITC</div><br>
<div onclick="xob_insert('[style=font-family:bradley hand itc;font-size:17px;]','[/style]')" style="font-family:bradley hand itc;font-size:17px">Bradley Hand</div><br>
<div onclick="xob_insert('[style=font-family:harrington;font-size:16px;]','[/style]')" style="font-family:harrington;font-size:16px">Harrington</div><br>
<div onclick="xob_insert('[style=font-family:juice itc;font-size:16px;]','[/style]')" style="font-family:juice itc;font-size:16px">Juice Itc</div><br>
<div onclick="xob_insert('[style=font-family:lucida handwriting;]','[/style]')" style="font-family:lucida handwriting;font-size:14px">Lucida Handwriting</div><br>
<div onclick="xob_insert('[style=font-family:monotype corsiva;font-size:17px;]','[/style]')" style="font-family:monotype corsiva;font-size:17px">Monotype Corsiva</div><br>
<div onclick="xob_insert('[style=font-family:old english text mt;font-size:16px;]','[/style]')" style="font-family:old english text mt;font-size:16px">Old English Text</div><br>
<div onclick="xob_insert('[style=font-family:pristina;font-size:16px;]','[/style]')" style="font-family:pristina;font-size:16px">Pristina</div><br>
<div id="fontstyle_line"><hr></div>
<div onclick="xob_insert('[style=font-family:???????;font-size:16px]','[/style]')" style="color:#700000;font-size:14px;font-family:verdana;font-size:14px;">Variabel</div>
 
</div>
</div>
</div>
 
<script>
$(function(){
$('#fontstyle_menue span').click(function(){
$('#fontstyle').show(300).draggable();
});
$('#fontstyle_close_div').click(function(){
$('#fontstyle').slideUp(300);
});
$('#fontstyle_close_div').hover(function(){
$('#fontstyle_close').css('display','inline');
},function(){
$('#fontstyle_close').hide();
});
});
</script>
 

Schlie�en

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!

Wenn " Multi-Dialog-Assistent für die Iconbar!" oder Kategorienauswahl für die Iconbar - Version 3+4 bereits installiert wurde, ist die Installation von "Xobor jQueryUI 1.12.1" nicht mehr notwendig!

Schlie�en

  • "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. "Schriftart".
  • 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 Schrift-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 16 ist die Standard-Schriftart 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>
#fontstyle_menue .xob_subiconlist{width:210px !important;mmargin-top:-100px;margin-left:-200px !important;color:#000000;padding:5px 0;}
#fontstyle_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;}
#fontstyle_menue span:hover {color:#0763b8 !important;}
#fontstyle_on div {clear:both;line-height:24px;width:185px;text-align:left;padding:0 10px !important;font-weight:bold;cursor:pointer;}
#fontstyle_on div:hover {background:#000143; color:#eeeeee !important;}
#fontstyle_on #fontstyle_line {cursor: default !important;}
#fontstyle_on #fontstyle_line:hover {background:none !important;}
</style>
 
<div class="xob_icon_cont hassub" onmouseover="showSub('10002')" onmouseout="hideSub('10002')" id="fontstyle_menue">
<span title="Schriftart ausw&#228;hlen, bitte anklicken!">Schriftart</span>
<div class="xob_subiconlist" id="xob_sub_10002">
 
<div id="fontstyle_on">
<div onclick="xob_insert('[style=font-family:verdana]','[/style]')" style="font-family:verdana;color:#700000;font-size:15px;">Standard</div><br>
<div onclick="xob_insert('[style=text-shadow: 1px 1px 0px #aaaaaa, 1px 2px 0px #a7a7a7, 1px 3px 0px #999999;]','[/style]')" style="text-shadow: 1px 1px 0px #aaaaaa, 1px 2px 0px #a7a7a7, 1px 3px 0px #999999;font-size:16px;font-family:verdana;">Text-Schatten</div><br>
<div onclick="xob_insert('[style=font-family:monospace;font-size:16px;]','[/style]')" style="font-family:monospace;font-size:16px">Monospace</div><br>
<div onclick="xob_insert('[style=font-family:blackadder itc;font-size:16px;]','[/style]')" style="font-family:blackadder itc;font-size:16px">Blackadder ITC</div><br>
<div onclick="xob_insert('[style=font-family:bradley hand itc;font-size:17px;]','[/style]')" style="font-family:bradley hand itc;font-size:17px">Bradley Hand</div><br>
<div onclick="xob_insert('[style=font-family:harrington;font-size:16px;]','[/style]')" style="font-family:harrington;font-size:16px">Harrington</div><br>
<div onclick="xob_insert('[style=font-family:juice itc;font-size:16px;]','[/style]')" style="font-family:juice itc;font-size:16px">Juice Itc</div><br>
<div onclick="xob_insert('[style=font-family:lucida handwriting;]','[/style]')" style="font-family:lucida handwriting;font-size:14px">Lucida Handwriting</div><br>
<div onclick="xob_insert('[style=font-family:monotype corsiva;font-size:17px;]','[/style]')" style="font-family:monotype corsiva;font-size:17px">Monotype Corsiva</div><br>
<div onclick="xob_insert('[style=font-family:old english text mt;font-size:16px;]','[/style]')" style="font-family:old english text mt;font-size:16px">Old English Text</div><br>
<div onclick="xob_insert('[style=font-family:pristina;font-size:16px;]','[/style]')" style="font-family:pristina;font-size:16px">Pristina</div><br>
<div id="fontstyle_line"><hr></div>
<div onclick="xob_insert('[style=font-family:???????;font-size:16px]','[/style]')" style="color:#700000;font-size:14px;font-family:verdana;font-size:14px;">Variabel</div>
 
</div>
</div>
</div>
 

Schlie�en

Wolfgang

Antworten

#7 | Spezielles DropDown-Menü für verschiedene Foren-Codes - Ohne 'select & option'! datum

21.09.2019 20:07 (zuletzt bearbeitet: 11.12.2021 10:06)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3620
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1488

Spezielles DropDown-Menü für verschiedene Foren-Codes - Ohne "select & option"!
Aktualisiert 28.09.19

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 verschiedene Formatierungen mit DIV-Containern und dem hauseigenen "jQueryUI" vorgestellt!
Hier ist es möglich Foren-Codes für Überschriften, Hintergründe, Spoiler, Tooltipps, Hilfetexte, Baustellencode, Diashow, Lupe, Blinker, Tabellen, Trennlinien und andere beliebige Foren-Codes zu hinterlegen!
Das Menü ist mit kleinen Überschriften für die unterschiedlichen Kategorien angelegt!
Das Menü 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!

Format

Spezielles DropDown-Menü für verschiedene Foren-Codes - Frei formatierbar:

Bild 1

Bild 2

Um das DropDown-Menü so zu nutzen, wie es hier vorgestellt wird, sind folgende Foren-Codes erforderlich.
Es können aber nach belieben, nicht gewollte Foren-Codes herausgelöscht werden!

Schlie�en

  • DropDown-Menü unter "HTML" anlegen.
  • Namen vergeben z.B. "Format".
  • Unter "HTML" den folgenden Code eintragen.
  • Wie oben beschrieben, sind noch zusätzliche Foren-Codes 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 Schrift-Button im Ausehen gestalten!
  • In Zeile 14 befindet sich die Auslösung!
  • In Zeile 9 lässt sich die Mouseover-Farbe verändern!
  • In Zeile 10+11 lassen sich die Überschriften der einzelnen Kategorien anpassen!
  • 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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
 
<style>
#fontformat{width:200px; mmargin-top:-200px;margin-left: -70px !important; display:none; position:absolute; color:#000000; background:#ffffff; padding:0 !important; z-index:999999;text-align:left; border:1px solid #000000; border-radius:4px; font-size:13px; clear:both !important; line-height:16px;cursor:move;overflow: visible !important;}}
#fontformat_menue span {font-size:13px; height:20px; background-image: linear-gradient(180deg,#9aadea,#cedfff 50%,#9aadea);border-radius:3px; color:#000000; padding:1px 9px;}
#fontformat_menue span:hover {color:#0763b8 !important;}
#fontformat_close {display:none; font-size:12px; margin-right:7px; color:#901000;}
#fontformat_close_div {float:right; font-weight:bold; padding:8px 15px 5px 30px; cursor:pointer;}
#fontformat_on {margin-bottom:10px !important;height:400px; overflow-y:scroll;}
#fontformat_on div{text-align:left !important; padding:2px 5px; cursor:pointer; color:#000000; font-weight:bold; clear:both !important; margin-left:15px; min-width:135px;white-space:nowrap;}
#fontformat_on div:hover{background:#222476; color:#eeeeee;}
#fontformat .format_h {width:135px; font-weight:bold; background:#00005e; color:#eeeeee !important; border-radius:3px; margin:8px 0 4px 5px !important; padding: 1px 15px !important; text-align:left !important; cursor:move !important; background-image: linear-gradient(180deg,#00007f,#37448f 50%,#00007f);}
#fontformat .format_h:hover {background:#00005e; background-image: linear-gradient(180deg,#00007f,#37448f 50%,#00007f);}
</style>
 
<div class="xob_icon_cont" id="fontformat_menue"><span title="Schrift beliebig formatieren, bitte anklicken!">Format</span>
<div id="fontformat">
<div id="fontformat_close_div"><div id="fontformat_close">Schlie&#223;en</div>X</div>
 
<div id="fontformat_on">
 
<div class="format_h" style="margin-top:0px !important;">&#220;berschrift</div> 
<div onclick="xob_insert('[h1][style=color:#1874c9]','[/style][/h1][hr2]')"><h2 style="color:#000000;">H1 - sehr gro&#223;</h2></div>
<div onclick="xob_insert('[h2][style=color:#1874c9]','[/style][/h2][hr2]')"><h3>H2 - gro&#223;</h3></div>
<div onclick="xob_insert('[h3][style=color:#1874c9]','[/style][/h3][hr2]')"><h4>H3 - klein</h4></div> 
 
<div class="format_h">Spoiler</div>
<div onclick="xob_insert('[spoiler2=Thema]','[/spoiler2]')" title='<div class="hpm_spoiler_headdiv"><input type="button" class="hpm_spoiler_headinput hpm_spoiler_closed" value="Spoiler-Box mit Namen und Schlie&#223;en-Button!">'>HPM-Spoiler</div>
<div class="admin" onclick="xob_insert('[spoiler3=Thema style=background:#eeeeee;color:#383838]','[/spoiler3]')">HPM-Spoiler Format</div> 
<div onclick="xob_insert('[button01]','[/button01]')">3-D Button</div> 
<div onclick="xob_insert('[button03]','[/button03]')">3-D Mouseover</div> 
 
<div class="format_h">Hintergrund</div> 
<div onclick="xob_insert('[bg10]','[/end]')" style="background-color:#00115f;color:#eeeeee;border:0.5px solid #aaaaaa;">Blau</div> 
<div onclick="xob_insert('[bg11]','[/end]')" style="background-color:#982a26;color:#eeeeee;border:0.5px solid #aaaaaa;">Rot</div> 
<div onclick="xob_insert('[bg13]','[/end]')" style="background-color:#154015;color:#eeeeee;border:0.5px solid #aaaaaa;">Gr&#252;n</div> 
<div onclick="xob_insert('[bg15]','[/end]')" style="background-color:#bbbbbb;color:#000000;border:0.5px solid #aaaaaa;">Wei&#223;</div> 
<div onclick="xob_insert('[background-color=#eeeeee]','[/background]')" style="background-color:#ffffff;color:#000000;border:0.5px solid #dddddd;">Farbe variabel</div> 
<div onclick="xob_insert('[background-image=https://bild.server.de]','[/background]')">Bild variabel</div> 
<div onclick="xob_insert('[schatten=auto;10px;#ffffff;5px;4px;border:1px solid #aaaaaa;background:#000057;color:#ddddff;float:left;margin-top:3px;]','[/schatten][clear]')">Schlagschatten</div> 
<div onclick="xob_insert('[verlauf=180deg,#011451, #243F9A 50%, #011451;400px;30px;#DDDDDD;background-color:#888888;]','[/verlauf]')">Farb-Verlauf</div> 
 
<div class="format_h">Tooltipps</div> 
<div onclick="xob_insert('[tooltipp_text]Tooltipp-Text[/tooltipp_text]','[/tooltipp_ende]')"><img src="//files.homepagemodules.de/b104774/a_182_2fd3f697.png" width="20px"> Info-Tooltipps</div> 
<div onclick="xob_insert('[tooltipp_text_hilfe]Tooltipp-Text[/tooltipp_text]','[/tooltipp_ende]')"><img src="//files.homepagemodules.de/b104774/a_183_1fca777e.png" width="20px"> Hilfe-Tooltipps</div> 
<div onclick="xob_insert('[tooltipp_text_fehler]Tooltipp-Text[/tooltipp_text]','[/tooltipp_ende]')"><img src="//files.homepagemodules.de/b104774/a_181_74b3dff7.png" width="20px"> Fehler-Tooltipps</div> 
<div onclick="xob_insert('[tooltipp_text_warnung]Tooltipp-Text[/tooltipp_text]','[/tooltipp_ende]')"><img src="//files.homepagemodules.de/b104774/a_185_f226c42e.png" width="20px"> Warn-Tooltipps</div> 
 
<div class="admin format_h">Nur f&#252;r Mitglieder</div> 
<div onclick="xob_insert('[user]','[/user]')"><img src="//files.homepagemodules.de/b2001010/a_463.png" width="25px"> Mitglieder</div> 
 
<div class="admin format_h">Hilfstexte</div> 
<div onclick="xob_insert('[br][br][welcome][br][br][h2][u]xxxxxx','[/u][/h2][br]Ich m&#246;chte Dich im Forum f&#252;r Hilfe, Tricks & Tipps herzlich [b]Willkommen[/b] hei&#223;en.[br][br][i]Auch hier:[/i] [url=https://www.hilfe-tricks-tipps.de/t666f24-Herzlich-Willkommen-im-Forum.html#mitte1]Willkommen im Forum [/url][br][br][br][br]Viel Spass, Erfolg und gutes Gelingen[br][br][style=font-family:lucida handwriting]Wolfgang[/style][br]Admin[br][br]')">Begr&#252;&#223;ung</div>
<div onclick="xob_insert('[br][1tys-fk[1]][br][br][h2][u]Hallo xxxxxx','[/u][/h2][br]Herzlichen Gl&#252;ckwunsch zum Geburtstag,[br] alles Gute und viel Spa&#223; im Forum![br][br][br][1tys-fj[1]][br][br][style=font-family:lucida handwriting]Wolfgang[/style][br]Admin[br]')">Geburtstag</div> 
<div onclick="xob_insert('[style=color:#ee8000;font-size:12px;font-weight:bold;]Aktualisiert 01.01.19[/style]','')">Aktualisiert</div>
 
<div class="admin format_h">Baustelle</div> 
<div onclick="xob_insert('[baustelle]\n\n','\n\n[/baustelle]')"><img src="//files.homepagemodules.de/b104774/a_39_5e863e71.jpg" width="30px"> Baustelle!</div> 
 
<div class="admin format_h">Google</div> 
<div onclick="xob_insert('[noTranslate]','[/noTranslate]')">No Translate!</div> 
 
<div class="format_h">Diashow</div>
<div onclick="xob_insert('[diashow]\n\n[url=https://www.server.de][img=200px]https://www.server.de/kleines_bild1.jpg[/img][/url] [url=https://www.server.de][img=200px]https://www.server.de/kleines_bild2.jpg[/img][/url]','\n[/diashow]')">Diashow horizontal</div>
 
 <div onclick="xob_insert('[diashow_v]\n\n[url=https://www.server.de][img=200px]https://www.server.de/kleines_bild1.jpg[/img][/url] [url=https://www.server.de][img=200px]https://www.server.de/kleines_bild2.jpg[/img][/url]','\n[/diashow_v]')">Diashow vertikal</div>
 
<div class="format_h">Bild vergr&#246;&#223;ern</div>
<div onclick="xob_insert('[img title=Text f&#252;r Titel style=width:200px;border:1px solid #000000;padding:5px;]','[/img]')">Frei formatieren</div> 
<div onclick="xob_insert('[img_Lupe=400px]','[/img]')">Lupe</div> 
<div onclick="xob_insert('[mouseover33][img=200px]','[/img][/mouseover33]')">Mouseover 1</div>
<div onclick="xob_insert('[mouseover3][img=200px]','[/img][/mouseover3]')">Mouseover 2</div>
<div onclick="xob_insert('[mouseover2][img=200px]https://www.server.de/bild.jpg[/img][bild][img=400px]https://www.server.de/bild.jpg[/img][/bild][/mouseover2]','')">Mouseover 3</div>
 
<div class="format_h">&#220;berblenden</div> 
<div onclick="xob_insert('[trans]','[/trans]')">Fader</div> 
<div onclick="xob_insert('[blink]','[/blink]')">Blinken</div> 
 
<div class="format_h">Lauf-Text</div> 
<div onclick="xob_insert('[move2]','[/move]')">Von rechts</div> 
<div onclick="xob_insert('[move]','[/move]')">Durchgehend</div> 
 
<div class="format_h">Bild-Textfluss</div> 
<div onclick="xob_insert('[style=float:left;padding-right:10px;]','[/style][clear]')">Float Left</div> 
<div onclick="xob_insert('[style=float:right;padding-left:8px;padding-right:10px]','[/style][clear]')">Float Right</div> 
 
<div class="format_h">Scroll-Balken</div> 
<div onclick="xob_insert('[scroll2=250px;50%]','[/scroll2]')">Horizontal <img style="position:absolute;right:7px;margin-top:-12px !important;" src="//files.homepagemodules.de/b104774/a_213_c9cb110f.png" width="40px"></div> 
 
<div class="format_h">Tabelle</div> 
<div onclick="xob_insert('[tabelle=40%]\n[ueberschrift=#eeeefe]&#220;berschrift 1[/ueberschrift]\n[ueberschrift=#eeeefe]&#220;berschrift 2[/ueberschrift]\n[ueberschrift=#eeeefe]&#220;berschrift 3[/ueberschrift]\n\n[NeueZeile]\n\n[spalte=150px]Text 1[/spalte]\n[spalte=150px]Text 2[/spalte]\n[spalte=150px]Text 3[/spalte]\n[/tabelle]','')">Formatierbare Tabelle</div> 
 
<div class="format_h">Trennlinien</div>
<div onclick="xob_insert('[center][img]//files.homepagemodules.de/b104774/f46t1197p2704n130_fOZxyvds.gif[/img][/center]','')" style="background:none;"><img src="//files.homepagemodules.de/b104774/a_198_06ba1ed1.gif" width="140px"></div>
<div onclick="xob_insert('[center][img]//files.homepagemodules.de/b104774/f46t1197p2704n128_InRdLQac.jpg[/img][/center]','')" style="background:none;"><img src="//files.homepagemodules.de/b104774/a_194_3f67eb43.jpg" width="140px"></div>
<div onclick="xob_insert('[center][img]//files.homepagemodules.de/b104774/f46t1197p2704n131_dgKtWQTI.gif[/img][/center]','')" style="background:none;"><img src="//files.homepagemodules.de/b104774/a_197_40f0635b.gif" width="140px"></div>
<div onclick="xob_insert('[center][img]//files.homepagemodules.de/b104774/f46t1197p2704n127_LFwaMgvs.jpg[/img][/center]','')" style="background:none;"><img src="//files.homepagemodules.de/b104774/a_196_56b8dc9a.jpg" width="140px"></div>
<div onclick="xob_insert('[center][img]//files.homepagemodules.de/b104774/f46t1197p2704n126_ZYGCeDSz.gif[/img][/center]','')" style="background:none;"><img src="//files.homepagemodules.de/b104774/a_192_436691ef.gif" width="140px"></div>
<div onclick="xob_insert('[center][img]//files.homepagemodules.de/b104774/f46t1197p2704n132_SwbkileN.gif[/img][/center]','')" style="background:none;"><img src="//files.homepagemodules.de/b104774/a_191_57f45bd9.gif" width="140px"></div>
 
</div>
</div>
</div>
 
<script>
$(function(){
$('#fontformat_menue span').click(function(){
$('#fontformat').show(300).draggable();
});
$('#fontformat_close_div').click(function(){
$('#fontformat').slideUp(300);
});
$('#fontformat_close_div').hover(function(){
$('#fontformat_close').css('display','inline');
},function(){
$('#fontformat_close').hide();
});
});
</script>
 

Schlie�en

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!

Wenn " Multi-Dialog-Assistent für die Iconbar!" oder Kategorienauswahl für die Iconbar - Version 3+4 bereits installiert wurde, ist die Installation von "Xobor jQueryUI 1.12.1" nicht mehr notwendig!

Schlie�en

Um das DropDown-Menü so zu nutzen, wie es hier vorgestellt wird, sind folgende Foren-Codes erforderlich.
Es können aber nach belieben, nicht gewollte Foren-Codes herausgelöscht werden!

Schlie�en

  • "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. "Format".
  • Unter "HTML" den folgenden Code eintragen.
  • Wie oben beschrieben, sind noch zusätzliche Foren-Codes 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 Schrift-Button im Ausehen gestalten!
  • In Zeile 13 befindet sich die Auslösung!
  • In Zeile 7 lässt sich die Mouseover-Farbe verändern!
  • In Zeile 8+9 lassen sich die Überschriften der einzelnen Kategorien anpassen!
  • 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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
<style>
#fontformat_menue .xob_subiconlist{width:200px !important;mmargin-top:-200px;margin-left:-100px !important;color:#000000;padding:5px 0;overflow: visible !important;}
#fontformat_menue span {font-size:13px; background-image: linear-gradient(180deg,#9aadea,#cedfff 50%,#9aadea);border-radius:3px; color:#000000; padding:1px 9px;}
#fontformat_menue span:hover {color:#0763b8 !important;}
#fontformat_on {margin-bottom:10px !important;height:400px; overflow-y:scroll;}
#fontformat_on div{clear:both !important;line-height:16px;margin-left:15px; min-width:135px;text-align:left !important; padding:2px 5px; color:#000000; font-weight:bold;cursor:pointer;white-space:nowrap;}
#fontformat_on div:hover{background:#222476; color:#eeeeee;}
#fontformat_menue .format_h {width:135px; font-weight:bold; background:#00005e; color:#eeeeee !important; border-radius:3px; margin:8px 0 4px 5px !important; padding: 1px 15px !important; text-align:left !important; cursor:move !important; background-image: linear-gradient(180deg,#00007f,#37448f 50%,#00007f);}
#fontformat_menue .format_h:hover {background:#00005e; background-image: linear-gradient(180deg,#00007f,#37448f 50%,#00007f);}
</style>
 
<div class="xob_icon_cont hassub" onmouseover="showSub('10003')" onmouseout="hideSub('10003')" id="fontformat_menue">
<span title="Schrift beliebig formatieren, bitte anklicken!">Format</span>
<div class="xob_subiconlist" id="xob_sub_10003">
 
<div id="fontformat_on">
 
<div class="format_h">&#220;berschrift</div> 
<div onclick="xob_insert('[h1][style=color:#1874c9]','[/style][/h1][hr2]')"><h2 style="color:#000000;">H1 - sehr gro&#223;</h2></div>
<div onclick="xob_insert('[h2][style=color:#1874c9]','[/style][/h2][hr2]')"><h3>H2 - gro&#223;</h3></div>
<div onclick="xob_insert('[h3][style=color:#1874c9]','[/style][/h3][hr2]')"><h4>H3 - klein</h4></div> 
 
<div class="format_h">Spoiler</div>
<div onclick="xob_insert('[spoiler2=Thema]','[/spoiler2]')" title='<div class="hpm_spoiler_headdiv"><input type="button" class="hpm_spoiler_headinput hpm_spoiler_closed" value="Spoiler-Box mit Namen und Schlie&#223;en-Button!">'>HPM-Spoiler</div>
<div class="admin" onclick="xob_insert('[spoiler3=Thema style=background:#eeeeee;color:#383838]','[/spoiler3]')">HPM-Spoiler Format</div> 
<div onclick="xob_insert('[button01]','[/button01]')">3-D Button</div> 
<div onclick="xob_insert('[button03]','[/button03]')">3-D Mouseover</div> 
 
<div class="format_h">Hintergrund</div> 
<div onclick="xob_insert('[bg10]','[/end]')" style="background-color:#00115f;color:#eeeeee;border:0.5px solid #aaaaaa;">Blau</div> 
<div onclick="xob_insert('[bg11]','[/end]')" style="background-color:#982a26;color:#eeeeee;border:0.5px solid #aaaaaa;">Rot</div> 
<div onclick="xob_insert('[bg13]','[/end]')" style="background-color:#154015;color:#eeeeee;border:0.5px solid #aaaaaa;">Gr&#252;n</div> 
<div onclick="xob_insert('[bg15]','[/end]')" style="background-color:#bbbbbb;color:#000000;border:0.5px solid #aaaaaa;">Wei&#223;</div> 
<div onclick="xob_insert('[background-color=#eeeeee]','[/background]')" style="background-color:#ffffff;color:#000000;border:0.5px solid #dddddd;">Farbe variabel</div> 
<div onclick="xob_insert('[background-image=https://bild.server.de]','[/background]')">Bild variabel</div> 
<div onclick="xob_insert('[schatten=auto;10px;#ffffff;5px;4px;border:1px solid #aaaaaa;background:#000057;color:#ddddff;float:left;margin-top:3px;]','[/schatten][clear]')">Schlagschatten</div> 
<div onclick="xob_insert('[verlauf=180deg,#011451, #243F9A 50%, #011451;400px;30px;#DDDDDD;background-color:#888888;]','[/verlauf]')">Farb-Verlauf</div> 
 
<div class="format_h">Tooltipps</div> 
<div onclick="xob_insert('[tooltipp_text]Tooltipp-Text[/tooltipp_text]','[/tooltipp_ende]')"><img src="//files.homepagemodules.de/b104774/a_182_2fd3f697.png" width="20px"> Info-Tooltipps</div> 
<div onclick="xob_insert('[tooltipp_text_hilfe]Tooltipp-Text[/tooltipp_text]','[/tooltipp_ende]')"><img src="//files.homepagemodules.de/b104774/a_183_1fca777e.png" width="20px"> Hilfe-Tooltipps</div> 
<div onclick="xob_insert('[tooltipp_text_fehler]Tooltipp-Text[/tooltipp_text]','[/tooltipp_ende]')"><img src="//files.homepagemodules.de/b104774/a_181_74b3dff7.png" width="20px"> Fehler-Tooltipps</div> 
<div onclick="xob_insert('[tooltipp_text_warnung]Tooltipp-Text[/tooltipp_text]','[/tooltipp_ende]')"><img src="//files.homepagemodules.de/b104774/a_185_f226c42e.png" width="20px"> Warn-Tooltipps</div> 
 
<div class="admin format_h">Nur f&#252;r Mitglieder</div> 
<div onclick="xob_insert('[user]','[/user]')"><img src="//files.homepagemodules.de/b2001010/a_463.png" width="25px"> Mitglieder</div> 
 
<div class="admin format_h">Hilfstexte</div> 
<div onclick="xob_insert('[br][br][welcome][br][br][h2][u]xxxxxx','[/u][/h2][br]Ich m&#246;chte Dich im Forum f&#252;r Hilfe, Tricks & Tipps herzlich [b]Willkommen[/b] hei&#223;en.[br][br][i]Auch hier:[/i] [url=https://www.hilfe-tricks-tipps.de/t666f24-Herzlich-Willkommen-im-Forum.html#mitte1]Willkommen im Forum [/url][br][br][br][br]Viel Spass, Erfolg und gutes Gelingen[br][br][style=font-family:lucida handwriting]Wolfgang[/style][br]Admin[br][br]')">Begr&#252;&#223;ung</div>
<div onclick="xob_insert('[br][1tys-fk[1]][br][br][h2][u]Hallo xxxxxx','[/u][/h2][br]Herzlichen Gl&#252;ckwunsch zum Geburtstag,[br] alles Gute und viel Spa&#223; im Forum![br][br][br][1tys-fj[1]][br][br][style=font-family:lucida handwriting]Wolfgang[/style][br]Admin[br]')">Geburtstag</div> 
<div onclick="xob_insert('[style=color:#ee8000;font-size:12px;font-weight:bold;]Aktualisiert 01.01.19[/style]','')">Aktualisiert</div>
 
<div class="admin format_h">Baustelle</div> 
<div onclick="xob_insert('[baustelle]\n\n','\n\n[/baustelle]')"><img src="//files.homepagemodules.de/b104774/a_39_5e863e71.jpg" width="30px"> Baustelle!</div> 
 
<div class="admin format_h">Google</div> 
<div onclick="xob_insert('[noTranslate]','[/noTranslate]')">No Translate!</div> 
 
<div class="format_h">Diashow</div>
<div onclick="xob_insert('[diashow]\n\n[url=https://www.server.de][img=200px]https://www.server.de/kleines_bild1.jpg[/img][/url] [url=https://www.server.de][img=200px]https://www.server.de/kleines_bild2.jpg[/img][/url]','\n[/diashow]')">Diashow horizontal</div>
 
 <div onclick="xob_insert('[diashow_v]\n\n[url=https://www.server.de][img=200px]https://www.server.de/kleines_bild1.jpg[/img][/url] [url=https://www.server.de][img=200px]https://www.server.de/kleines_bild2.jpg[/img][/url]','\n[/diashow_v]')">Diashow vertikal</div>
 
<div class="format_h">Bild vergr&#246;&#223;ern</div>
<div onclick="xob_insert('[img title=Text f&#252;r Titel style=width:200px;border:1px solid #000000;padding:5px;]','[/img]')">Frei formatieren</div> 
<div onclick="xob_insert('[img_Lupe=400px]','[/img]')">Lupe</div> 
<div onclick="xob_insert('[mouseover33][img=200px]','[/img][/mouseover33]')">Mouseover 1</div>
<div onclick="xob_insert('[mouseover3][img=200px]','[/img][/mouseover3]')">Mouseover 2</div>
<div onclick="xob_insert('[mouseover2][img=200px]https://www.server.de/bild.jpg[/img][bild][img=400px]https://www.server.de/bild.jpg[/img][/bild][/mouseover2]','')">Mouseover 3</div>
 
<div class="format_h">&#220;berblenden</div> 
<div onclick="xob_insert('[trans]','[/trans]')">Fader</div> 
<div onclick="xob_insert('[blink]','[/blink]')">Blinken</div> 
 
<div class="format_h">Lauf-Text</div> 
<div onclick="xob_insert('[move2]','[/move]')">Von rechts</div> 
<div onclick="xob_insert('[move]','[/move]')">Durchgehend</div> 
 
<div class="format_h">Bild-Textfluss</div> 
<div onclick="xob_insert('[style=float:left;padding-right:10px;]','[/style][clear]')">Float Left</div> 
<div onclick="xob_insert('[style=float:right;padding-left:8px;padding-right:10px]','[/style][clear]')">Float Right</div> 
 
<div class="format_h">Scroll-Balken</div> 
<div onclick="xob_insert('[scroll2=250px;50%]','[/scroll2]')">Horizontal <img style="position:absolute;right:7px;margin-top:-12px !important;" src="//files.homepagemodules.de/b104774/a_213_c9cb110f.png" width="40px"></div> 
 
<div class="format_h">Tabelle</div> 
<div onclick="xob_insert('[tabelle=40%]\n[ueberschrift=#eeeefe]&#220;berschrift 1[/ueberschrift]\n[ueberschrift=#eeeefe]&#220;berschrift 2[/ueberschrift]\n[ueberschrift=#eeeefe]&#220;berschrift 3[/ueberschrift]\n\n[NeueZeile]\n\n[spalte=150px]Text 1[/spalte]\n[spalte=150px]Text 2[/spalte]\n[spalte=150px]Text 3[/spalte]\n[/tabelle]','')">Formatierbare Tabelle</div> 
 
<div class="format_h">Trennlinien</div>
<div onclick="xob_insert('[center][img]//files.homepagemodules.de/b104774/f46t1197p2704n130_fOZxyvds.gif[/img][/center]','')" style="background:none;"><img src="//files.homepagemodules.de/b104774/a_198_06ba1ed1.gif" width="140px"></div>
<div onclick="xob_insert('[center][img]//files.homepagemodules.de/b104774/f46t1197p2704n128_InRdLQac.jpg[/img][/center]','')" style="background:none;"><img src="//files.homepagemodules.de/b104774/a_194_3f67eb43.jpg" width="140px"></div>
<div onclick="xob_insert('[center][img]//files.homepagemodules.de/b104774/f46t1197p2704n131_dgKtWQTI.gif[/img][/center]','')" style="background:none;"><img src="//files.homepagemodules.de/b104774/a_197_40f0635b.gif" width="140px"></div>
<div onclick="xob_insert('[center][img]//files.homepagemodules.de/b104774/f46t1197p2704n127_LFwaMgvs.jpg[/img][/center]','')" style="background:none;"><img src="//files.homepagemodules.de/b104774/a_196_56b8dc9a.jpg" width="140px"></div>
<div onclick="xob_insert('[center][img]//files.homepagemodules.de/b104774/f46t1197p2704n126_ZYGCeDSz.gif[/img][/center]','')" style="background:none;"><img src="//files.homepagemodules.de/b104774/a_192_436691ef.gif" width="140px"></div>
<div onclick="xob_insert('[center][img]//files.homepagemodules.de/b104774/f46t1197p2704n132_SwbkileN.gif[/img][/center]','')" style="background:none;"><img src="//files.homepagemodules.de/b104774/a_191_57f45bd9.gif" width="140px"></div>
 
</div>
</div>
</div>
 

Schlie�en

Wolfgang

Antworten

#8 | RE: Spezielles DropDown-Menü für verschiedene Foren-Codes - Ohne 'select & option'! datum

06.02.2024 23:16 (zuletzt bearbeitet: 06.02.2024 23:55)

Hallo Wolfgang

Ich habe jetzt mal die Schriftarten hinzugefügt.
Bei mir sehen die alle gleich aus. Oder gucke ich schief.

Frage
Muss man die Schriftarten noch ins CSS eintragen, damit sie funktionieren?
Oder muss man die Schriftarten auf dem PC haben?

Antworten

#9 | Spezielles DropDown-Menü - Wiedergabe von Schriftarten auf allen Endgeräten? datum

07.02.2024 01:46 (zuletzt bearbeitet: 07.02.2024 13:59)

Hallo AnneAlle vorgestellten Schriftarten in Beitrag #6 sollten auf einem Windows-PC gut wiedergegeben werden ohne zusätzlichen Eintrag!
Mit welchem Endgerät hast Du die Schriftenarten getestet?
Mit einem Android-Handy, einem iPhone, mit einem Tablet oder mit einem Apple PC?

Es sieht so aus, dass nur wenige Schriftarten auf allen Endgeräten laufen!
Sie sind auch nicht so ausgefallen wie in Beitrag #6!

Schriftarten die von Apple- und Microsoft OS-Versionen unterstützt werden:

Schriftarten z.B. [style=font-family: xxxxxxxx]','[/style]

Baskerville Baskerville

Baskerville Old Face Baskerville Old Face

Garamond Garamond

Times New Roman Times New Roman

Bodoni MT Bodoni MT

Century Gothic Century Gothic

Courier New Courier New

Gill Sans MT Gill Sans MT

Impact Impact

Palatino Palatino

Tahoma Tahoma

Verdana Verdana

Segoe Segoe

FrageWas passiert, wenn Du die folgende Schriftart eingibst?
Die Schriftart "Old English Text Mt" ist sehr ausgefallen!

[style=font-family:old english text mt;font-size:20px;] Old English Text Mt [/style]

Wolfgang

Antworten

#10 | RE: Spezielles DropDown-Menü - Wiedergabe von Schriftarten auf allen Endgeräten? datum

07.02.2024 12:42 (zuletzt bearbeitet: 07.02.2024 12:45)

Huhu Wolfgang

Ich habe einen IMac.
Aber bei den anderen funktioniert die Schrift.
Haben es gestern noch getestet.

Wenn ich die Schrift so teste, wie beschrieben bei dem Code, sieht es so aus

Antworten

Für den Valentinstag � � Talk im V4

�hnliche Themen

Antworten

Letzter Beitrag

Für die Iconbar: Wählbares + aktuelles Datum in Beiträgen einfügen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

06.09.2024 21:08
von

Wolfgang • Zugriffe: 486

Was mache ich hier falsch - Dropdownmenü in der Iconbar?
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Daishi

10.05.2024 18:14
von

Daishi • Zugriffe: 282

Ganze Textbausteine in der Iconbar als Dropdown
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von bienchen 12 26.01.2024 19:14
Daishi • Zugriffe: 876
Dropdown-Menü
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Magister 5 22.10.2015 18:49
Magister • Zugriffe: 2068
Besonderheiten zur Xobor-Iconbar
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 0 13.07.2015 15:58
Wolfgang • Zugriffe: 2091
"Zitat" für die neuen Iconbar erweitern und verbessern!
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 11 27.02.2022 21:00
Daishi • Zugriffe: 3742
Schriftarten über die Iconbar verändern!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 8 06.01.2022 18:27
Wolfgang • Zugriffe: 3400
Trennlinie für die Iconbar
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 1 14.02.2016 01:56
Wolfgang • Zugriffe: 3346

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

110%

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

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

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

Umsetzen von HTML-Codes in BB-CodesAktualisiert 10.12.21

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

Spezielles DropDown-Menü für die Schriftart - Ohne 'select & option'!Aktualisiert 11.12.21

Spezielles DropDown-Menü für verschiedene Foren-Codes - Ohne "select & option"!Aktualisiert 28.09.19

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

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

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

Umsetzen von HTML-Codes in BB-Codes
Aktualisiert 10.12.21

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

Spezielles DropDown-Menü für die Schriftart - Ohne 'select & option'!
Aktualisiert 11.12.21

Spezielles DropDown-Menü für verschiedene Foren-Codes - Ohne "select & option"!
Aktualisiert 28.09.19