Seite 2 von 2

Re: [3.3] BBCode-Buttons: Grafik statt Text

Verfasst: 13.05.2023 16:17
von 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

Re: [3.3] BBCode-Buttons: Grafik statt Text

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

Re: [3.3] BBCode-Buttons: Grafik statt Text

Verfasst: 16.05.2023 09:40
von Joe Kolade
Vielen Dank für die schnelle Rückmeldung und die tolle Hilfe!
Funktioniert prima.

Re: [3.3] BBCode-Buttons: Grafik statt Text

Verfasst: 16.05.2023 10:57
von Talk19zehn
Hi BNa, ja, ja die weltweiten Sprachgebräuche .... - ich habe soeben so sehr geschmunzelt. :wink:
"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" .... :lol:

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