[3.3] BBCode-Buttons: Grafik statt Text

[Talk19zehn]

BBCode-Format-Buttons - Abstand schaffen ....

Hi, mir erscheint derzeit diese einzige Idee ggf. praktikabel: Beispiel --> CSS, eine Hinzunahme ...

Code: Alles auswählen

.format-buttons .button, select.bbcode-size {margin-right: 5px;}

oder beispielsweise

Code: Alles auswählen

.format-buttons .button, select.bbcode-size {margin-left: 6px;}

Ich habe jedoch keine Beschau aller Browser in responsiven Ansichten und deren Auswirkungen (Templates etc.) getestet. Eventuell ein erster Denkansatz ...

LG

====
Edit: 1

16:46, 13.05.2023 eine Idee, die im Zusammenhang durchaus ihren Sinn erfüllt:

Um eine (Zeilen)-Trennung vor den eigenen BBCodes zu verwenden, habe ich oftmals einfachheitshalber lediglich einen "Break und eine Trennlinie" verwendet:

posting_buttons.html

finde:

<!-- EVENT posting_editor_buttons_custom_tags_before -->

davor fügte ich ein:

Code: Alles auswählen

<br />
<hr>

Das machte für mich insofern Sinn, da ich erkennen kann - hier bin ich tätig und schaffte einen für mich besseren Überblick. Der Einzelfall entscheidet selbstverständlich.

Grüße

====
Edit: 2

10:44, 14. Mai 2023 - nachdem ich in der heutigen sonntäglichen Ruhe ein wenig Zeit fand, sah ich mir im Browsertool die responsiven Ansichten an.

BBCode-Format-Buttons - Abstand schaffen und aufhübschen:
Ein margin-bottom mit wenigen px kann aus meiner Sicht zudem hilfreich sein. In den (kleineren) responsiven Ansichten kleben die format-buttons nicht so dicht aneinander und meiner Auffassung nach wird die Größe eines Sichtfensters auf Bildschirmen nicht beschädigt.

Also fügte ich margin-bottom hinzu: Beispiel ....

Code: Alles auswählen

.format-buttons .button, select.bbcode-size {margin-left: 6px; margin-bottom: 5px;}

Aufhübschen:
Eine Idee mit border-bottom, border-radius. Ausgehend von margin-left ergänzte ich jenes CSS (direkt in einer neuen Zeile) nach der zuvor genannten Zeile: Beispiel ....

Code: Alles auswählen

div#format-buttons {border-bottom: 3px solid; border-radius: 4px;}

Zusammengefasst könnte das CSS so aussehen:

Code: Alles auswählen

.format-buttons .button, select.bbcode-size {margin-left: 6px; margin-bottom: 5px;}
div#format-buttons {border-bottom: 3px solid; border-radius: 4px;}

LG

[BNa]

Das war jetzt mal 'n cooler Crash-Kurs. Wenn da keine Lösung drin ist, ist keine Lösung erwünscht
Zauberwort ist "margin". "Margine" heißt auf italienisch übrigens "Rand".
Also: "Halt Deinen Margine" heißt dann: "Halt den Rand"

[Joe Kolade]

Vielen Dank für die schnelle Rückmeldung und die tolle Hilfe!
Funktioniert prima.

[Talk19zehn]

Hi BNa, ja, ja die weltweiten Sprachgebräuche .... - ich habe soeben so sehr geschmunzelt.
"Rand halten" - ...., stimmt. Wobei es eine ziemlich hohe Anzahl von Synonymen gäbe. Augenscheinlich wurde etwas gesucht und fällt dennoch in die Kategorie "Dinge, die die Welt nicht braucht" ....

Prima Joe Kolade und Dank für die Rückmeldung.

Aufhübschen:
in dem obigen Beispiel wird die Farbe für border-bottom aus der Klasse "panel" gesogen. Wem das zu mächtig ist, kann sinngemäß in Anlehnung an "hr" agieren.

Beispielsweise wie folgt:

Code: Alles auswählen

div#format-buttons {border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: rgba(181, 181, 181, 0.7);} 

oder das Code-Beispiel für´s Aufhübschen auch gänzlich weglassen und in Folge auf das beispielhafte margin-right, margin-bottom switchen.

Code: Alles auswählen

.format-buttons .button, select.bbcode-size {margin-right: 5px; margin-bottom: 5px;}

Herzliche Grüße @All


P.S.: 14:35, 16.05.2023
Grafische Ergebnisse aus meinen Designs und dem phpBB-Standarddesign prosilver könnt ihr euch bei Interesse in meiner Stylearea anschauen.

LG