[3.3] BBCode-Buttons: Grafik statt Text

[Cowboy of Bottrop]

Hallo zusammen,

ich habe ein paar BBCodes erstellt, und zeige auch die Buttons beim Erstellen von Beiträgen. Allerdings sind die Buttons durch den Text vergleichsweise breit und brechen dadurch in eine 2. Buttonreihe um. Daher würde dich gerne Grafiken statt des Textes auf den Buttons anzeigen, aber die Zeile

Code: Alles auswählen

button.bbcode-info { background: url(./images/information.png) no-repeat; }

legt mir die Grafik nur hinter den Text. Klar, ist ja nur ein Hintergrund.

Wie bekomme ich den Text ausgeblendet und den Button auf die Breite der Grafik verkleinert?

[Kirk]

Hallo
Probier es mal mit dieser Extension: https://github.com/Crizz0/phpbb-ext-posting-img-buttons

[Cowboy of Bottrop]

Danke, aber die Ext fügt ein paar neue Buttons hinzu. Ich möchte die vorhandenen, die nur den Text enthalten, mit einer Grafik versehen.

Beispiel:
Um einen Block mit einer hervorgehobenen Information (blauer Hintergrund, Info-Symbol oben links in der Ecke), habe ich folgenden BBCode erstellt:

Code: Alles auswählen

[info]{TEXT}[/info]

Im dazugehörigen Button im Editor steht der Text „info“, ich möchte aber das Info-Symbol darauf anzeigen.

Insgesamt habe ich 5 solcher Boxen für verschiedene Zwecke erstellt, dementsprechend 5 Buttons mit Text statt einer Grafik.

[Kirk]

Diese Ext ersetzt den Text (BBCode-Benutzung) der selbsterstellten BBCodes durch FA Icon, installiere dir diese und öffne die posting_editor_buttons_custom_tags_before.html und füge dort folgendes hinzu:

Code: Alles auswählen

	<button type="button" class="button button-icon-only bbcode-info" accesskey="i" name="info" value=" Info " onclick="bbfontstyle('[info]','[/info]');" title="{L_INFO_HELP}">
		<i class="icon fa-info fa-fw" aria-hidden="true"></i>
	</button>

Das sieht dann so aus:

info.jpg (1.43 KiB) 2882 mal betrachtet

[Cowboy of Bottrop]

OK, danke. Werde ich heute Abend mal testen, wenn ich wieder zuhause bin, und dann berichten.

[Cowboy of Bottrop]

Funktioniert anders, als ich es geplant hatte, aber die Lösung funktioniert. Alle 5 Buttons ins Template aufgenommen und die Übersetzungen in die Sprachdatei eingepflegt und in der BBCode-Konfiguration die Buttons im Editor ausgebelndet. Das Ergebnis kann sich sehen lassen.

Danke für den Hinweis auf die mögliche Ergänzung der Ext. Nur nach einem Update ist alles wieder weg…

[Kirk]

Wenn du alles über diese ext regelst, ändert sich nach einem Update nichts.
Hier mal ein Beispiel mit einer Grafik:
Gehe in das Verzeichnis root/ext/crizzo/editorimgbuttons/styles/prosilver/template/event/
Erstelle dort eine Datei Namens overall_header_head_append.html mit folgendem Inhalt:

Code: Alles auswählen

{% INCLUDECSS '@crizzo_editorimgbuttons/editorimgbuttons.css' %}

Jetzt legst du im Vz root/ext/crizzo/editorimgbuttons/styles/prosilver/ ein weiteres Vz theme an, darin erstellst du eine Datei Namens editorimgbuttons.css mit folgendem Inhalt:

Code: Alles auswählen

.bbcode-info {
	background-image: url("./images/information.png");
	background-repeat: no-repeat;
	width: 14px;
	height: 14px;
	display: inline-block;
	vertical-align: middle;
	padding: 1px 0px;
}

Erstelle Im Vz theme ein weiteres Vz images dort lädst du deine Grafiken hoch.
In der posting_editor_buttons_custom_tags_before.html änderst du das hier:

Code: Alles auswählen

	<button type="button" class="button button-icon-only bbcode-info" accesskey="i" name="info" value=" Info " onclick="bbfontstyle('[info]','[/info]');" title="{L_INFO_HELP}">
		<i class="icon fa-info fa-fw" aria-hidden="true"></i>
	</button>

so um:

Code: Alles auswählen

	<button type="button" class="button button-icon-only bbcode-info" accesskey="i" name="info" value=" Info " onclick="bbfontstyle('[info]','[/info]');" title="{L_INFO_HELP}">
		<span class="bbcode-info"></span>
	</button>

Das Ergebnis sieht dann so aus:

info_img.jpg (1.46 KiB) 2847 mal betrachtet

[Cowboy of Bottrop]

OK, das werde ich ausprobieren. Dann hab ich meine Grafiken drauf, wie ich es haben wollte.

Danke Kirk!

[Joe Kolade]

Hallo,

wenn jetzt noch jemand eine Idee hat, wie ich einen größeren Abstand (Spacer) zwischen zwei Buttons definieren kann, wäre das perfekt!

Gruß Joe

[BNa]

Evtl. via CSS?

https://wiki.selfhtml.org/wiki/CSS/Tuto ... t.C3.A4nde