Iconbar aufmotzen - Mit diesen Codes geht´s / User helfen User

31.05.2020 16:17
avatar  844er
#1 Iconbar aufmotzen - Mit diesen Codes geht´s / User helfen User
avatar
User

Hallo Xobor-Forenbetreiber

Viele von euch haben sicherlich die Standdart-Iconbar oder diese auch schon mit zusätzlichen Funktionen aufgemotzt.
Ich denke auch, das es viele von euch gibt, die sich mit den ganzen Befehlen (worunter auch ich zähle) nicht so auskennen. Da wäre es doch schön, wenn wir uns hier gegenseitig ein wenig austauschen. Mit diesem Thema möchte ich aber auch all diejenigen ansprechen, die sich mit den Befehlen auskennen um die Iconbar noch besser zu gestalten oder mit zusätzlichen Funktionen auszustatten.

Ich mache mal den Anfang und habe mal folgende Frage:
Ich bräuchte für die Iconbar die Möglichkeit für Aufzählungen in nummerische Reihenfolge / alphabetische Reihenfolge / Aufzählung mit Punkten.
Gedacht ist, das man eine gesamte Textpassage (die durch Entertaste getrennt ist) markiert und dann durch einen Klick auf ein Funktionszeichen in der Iconbar die markierte Textpassage in einen Rutsch einrückt und mit Zahlen, Buchstaben oder Punkten versieht. Habe da schon einiges selbst versucht, aber das klappt irgendwie nicht so, wie gewünscht....

Gruß 844er

Fehlende PS werden durch Wahnsinn ersetzt

 Antworten

 Beitrag melden
31.05.2020 18:50 (zuletzt bearbeitet: 31.05.2020 18:55)
#2 RE: Iconbar aufmotzen - Mit diesen Codes geht´s / User helfen User
avatar
User

Hallo 844er,
wenn ich Dich da richtig verstanden habe ......

Punkte und Zahlen für die Aufzählung gibt es bereit als fertigen "BB-Code / Foren-Code":

  • Aufzählung mit Punkten
  • Aufzählung mit Punkten
[ul]
[li]Aufzählung mit Punkten[/li]
[li]Aufzählung mit Punkten[/li]
[/ul]


*************************

  1. Aufzählung mit Zahlen
  2. Aufzählung mit Zahlen
[ol]
[li]Aufzählung mit Zahlen[/li]
[li]Aufzählung mit Zahlen[/li]
[/ol]

*************************

Sonderfall mit kleinen Buchstaben, müsste als Foren-Code umgesetzt werden:
<ol style="list-style-type:lower-alpha;">
<li>Diese Liste sollte mit kleinen Buchstaben nummeriert sein</li>
<li>Diese Liste sollte mit kleinen Buchstaben nummeriert sein</li>
<li>Diese Liste sollte mit kleinen Buchstaben nummeriert sein</li>
</ol>


*************************

Sonderfall mit großen Buchstaben, müsste als Foren-Code umgesetzt werden:
<ol style="list-style-type:upper-alpha;">
<li>Diese Liste sollte mit großen Buchstaben nummeriert sein</li>
<li>Diese Liste sollte mit großen Buchstaben nummeriert sein</li>
<li>Diese Liste sollte mit großen Buchstaben nummeriert sein</li>
</ol>


*************************

Sonderfall mit Römischen Zeichen, müsste als Foren-Code umgesetzt werden:
<ol style="list-style:upper-roman">
<li>Montag</li>
<li>Dienstag</li>
<li>Mittwoch</li>
</ol>


Weitere Möglichkeiten findest Du überall im Netz, hier z.B.:
https://www.w3schools.com/CSS/css_list.asp



Bis dann
Wolfgang

31.05.2020 21:48
avatar  844er
#3 RE: Iconbar aufmotzen - Mit diesen Codes geht´s / User helfen User
avatar
User

Hallo @Wolfgang

Danke für deine schnelle Antwort.
Ich habe da mal eine Gruppe mit der Bezeichnung "Auflistungen" erstellt und dort die vorhanden Codes hineingeschoben (Bild2). Leider sind die Codes der vorhandenen/vorgefertigten Aufzählungen nicht nutzbar und verursachen sowas:


Hier die Auflistungen der verstecken Codes aus meiner Iconbar


Genau das ist der Knackpunkt. Die vorhandenen Foren-Codes sind falsch und ich weiß nicht, wie ich die einzelnen Codes ganz genau erstellen muss, damit das dann so aussieht wie in deinem Beispiel.
Am liebsten wären mir persönlich ja HTML-Befehle. Aber ich habe mir schon die Augen Quadratisch gegoogelt. Auch die Foren-Codes bekomme ich nicht hin, damit z. B. bei Zahlen oder Römischen Zeichen diese Fortlaufend sind....

Gruß 844er

Fehlende PS werden durch Wahnsinn ersetzt

 Antworten

 Beitrag melden
31.05.2020 23:55 (zuletzt bearbeitet: 31.05.2020 23:58)
#4 RE: Iconbar aufmotzen - Mit diesen Codes geht´s / User helfen User
avatar
User

Hallo 844er,
zur Aufzählung gehören zwei Codes!
"[ul]" und "[ol]" alleine funktionieren nicht!

[ul][li]Test[/li][/ul]

  • Test

Willst Du in der Iconbar eine Aufzählung fest installieren, könntest Du eine Vorgabe machen mit 3x [li][/li], die mit [ul][/ul] oder [ol][/ol] beginnen und enden!

Folgenden Code unter HTML erstellen:

1
2
 
<div onclick="xob_insert('[ul][li]', '[/li]\n[li] [/li]\n[li] [/li][/ul]')" class="xob_icon_cont"><img title="Aufzählung mit Punkten einfügen" alt="" class="xob_icon" src="//files.homepagemodules.de/b104774/f46t1197p2704n120_HJyEkgjm.png"></div>
<div onclick="xob_insert('[ol][li]', '[/li]\n[li] [/li]\n[li] [/li][/ol]')" class="xob_icon_cont"><img title="Aufzählung mit Nummern einfügen" alt="" class="xob_icon" src="//files.homepagemodules.de/b104774/f46t1197p2704n122_XdzHQVtG.png"></div>
 



Bei einem Klick auf das jeweilige Symbol, werden die zwei Aufzählungen im Beitrag eingefügt!

[ul][li] [/li]
[li] [/li]
[li] [/li][/ul]

[ol][li] [/li]
[li] [/li]
[li] [/li][/ol]




Gruß
Wolfgang

01.06.2020 02:16 (zuletzt bearbeitet: 01.06.2020 02:16)
avatar  844er
#5 RE: Iconbar aufmotzen - Mit diesen Codes geht´s / User helfen User
avatar
User

Hallo Wolfgang
Danke für den HTML-Befehl für die Aufzählungen. Leider ist es nicht ganz das, was ich mir für die Aufzählung gedacht habe. Vielleicht habe ich mich oben nicht ganz richtig ausgedrückt.

Gibt es einen HTML-Befehl der markierte Textpassagen (die durch Entertaste getrennt sind) als Aufzählung erkennt, sobald man das jeweilige Symbol für Punkte oder Nummerische Auflistung anklickt (siehe Bild).


Kann man den HTML-Befehl variabel machen ?
Dein Befehl bezieht sich auf 3 Punkte oder die Nummerische Aufzählung von 1 bis 3. Habe ich jetzt aber mehr Punkte, dann fehlt mir da was, oder wenn ich weniger Punkte habe, dann habe ich da immer einen über, wenn du verstehst was ich meine.
Genau das ist der Knackpunkt woran ich mit meinen HTML-Befehlen scheitere und ich nicht weiter komme....

Gruß 844er

Fehlende PS werden durch Wahnsinn ersetzt

 Antworten

 Beitrag melden
01.06.2020 10:47 (zuletzt bearbeitet: 01.06.2020 11:00)
#6 RE: Iconbar aufmotzen - Mit diesen Codes geht´s / User helfen User
avatar
User

Hallo 844er,
die Iconbar ist eher für manuelle Formatierungen gedacht.
Das, was Du suchst ist eher so etwas wie der "TinyMCE-Editor".

Gibt es bereits als Plugin im Plugin-Store.
Leider ohne Aufzählungen!

Lösung:
Aber man könnte sich den Editor unter "Eigene Seiten", unter "Admin > Layout > Eigene Seiten" zu nutze machen!
Allerdings sehr umfangreich und man braucht Zeit zum Einarbeiten und Eingewöhnen!
Der Editor zeigt alles in "Echtzeit" an!
Klickt man auf Vorschau, wird der BB-Code angezeigt!

Fürs Business-Template folgendes Script zum Testen in die Fußzeile (Admin > Layout > Kopf- & Fußzeile) kopieren.
Fürs V6-Template in "Eigenes HMTL/JS > Eigenes Javascript" kopieren!

  • Zeile 1 blendet den Standard-Editor aus!
  • In Zeile 11 wird die Höhe des Textfeldes bestimmt!
  • In Zeile 12 kann sogar eine andere Sprachen eingestellt werden!
  • In Zeile 16+17 könnten evtl. Funktionen herausgenommen werden, die nicht gebraucht 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
 
<style>.iconbar{display:none}</style>

<script type="text/javascript" src="../js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">

tinyMCE.init({
// General options
mode : "exact",
elements : "messagetext",
theme : "advanced", // advanced
height : "280", // Höhe Textfeld
language : "de", //en = Englisch fr= französisch it = italienisch
plugins : "safari,layer,table,advhr,advimage,advlink,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,xhtmlxtras,template",

// Theme options
theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,code,|,insertdate,inserttime,|,forecolor,backcolor",
theme_advanced_buttons2 : "tablecontrols,|,hr,removeformat,visualaid,|,charmap,media,|,ltr,rtl,|,cite,abbr,acronym,attribs",

theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : true,

extended_valid_elements : "iframe[class|frameborder|height|width|id|name|class|scrolling|src|title]",

// Example content CSS (should be your site CSS)
content_css : "style48421-t104774-1183-global-144-global-1.css",

// Drop lists for link/image/media/template dialogs
template_external_list_url : "js/template_list.js",
external_link_list_url : "js/link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js"
});
</script>
 




Gruß
Wolfgang

01.06.2020 23:35
avatar  844er
#7 RE: Iconbar aufmotzen - Mit diesen Codes geht´s / User helfen User
avatar
User

Hallo Wolfgang
Danke für die viele Arbeit die du dir gemacht hast. Leider ist die Idee nicht ganz so das Gelbe vom Ei, siehe Bild:


Wie man sieht, hat er das Hintergrundbild meines Testforum in das Textfeld gelegt...
Mit deinem Befehl in Zeile 1 blendet er ja den Standard-Editor aus. Welchen Befehl muss ich eingeben, damit er diesen trotzdem beibehält und was bewirkt es dann ? Kann ich dann beides nutzen oder beißt sich das ganze miteinander ?

Leider wird der TinyMCE-Editor nicht auf die Bedürfnisse angepasst, was ich schon mehrfach angesprochen hatte. Darum versuche ich ja mit Hilfe anderer die Standard-Iconbar mit zusätzlichen Foren-Codes oder HTML-Befehlen aufzumotzen, damit es den Usern der Foren mit einem Klick möglich gemacht wird, Texte ohne Forencode Kenntnisse einfach zu gestalten.

Ich habe jetzt mal für mein Übungsforum folgenden Foren-Code für eine unsortierte Liste mit Punksymbol erstellt und hoffe, das der so richtig ist ? Oder könnte man diesen noch optimieren/verbessern ?


Was eine Nummerierte Listenanzeige anbelangt, so habe den vorhanden Foren-Code übernommen

und werde dann bei einer Nummerierten Liste halt die Zahlen davor schreiben. Schade, das es da keinen Foren-Code gibt, mit dem man ganz komfortabel eine entsprechende Liste in einen Rutsch erstellen kann.. Habe es jetzt den ganzen Tag mit vielen Codes probiert und werfe jetzt die Flinte ins Korn. Dafür bin ich einfach zuviel Laie, obwohl Programmierung ein absolut spannendes Thema ist...

Gruß 844er

Fehlende PS werden durch Wahnsinn ersetzt

 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!