Seite 1 von 2
[3.3] BBCode-Buttons: Grafik statt Text
Verfasst: 13.11.2020 00:10
von 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?
Re: [3.3] BBCode-Buttons: Grafik statt Text
Verfasst: 13.11.2020 06:29
von Kirk
Re: [3.3] BBCode-Buttons: Grafik statt Text
Verfasst: 13.11.2020 13:28
von 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:
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.
Re: [3.3] BBCode-Buttons: Grafik statt Text
Verfasst: 13.11.2020 15:37
von 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) 2881 mal betrachtet
Re: [3.3] BBCode-Buttons: Grafik statt Text
Verfasst: 13.11.2020 15:43
von Cowboy of Bottrop
OK, danke. Werde ich heute Abend mal testen, wenn ich wieder zuhause bin, und dann berichten.
Re: [3.3] BBCode-Buttons: Grafik statt Text
Verfasst: 14.11.2020 01:07
von 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…
Re: [3.3] BBCode-Buttons: Grafik statt Text
Verfasst: 14.11.2020 10:12
von 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) 2846 mal betrachtet
Re: [3.3] BBCode-Buttons: Grafik statt Text
Verfasst: 14.11.2020 13:20
von Cowboy of Bottrop
OK, das werde ich ausprobieren. Dann hab ich meine Grafiken drauf, wie ich es haben wollte.
Danke Kirk!
Re: [3.3] BBCode-Buttons: Grafik statt Text
Verfasst: 12.05.2023 19:51
von 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
Re: [3.3] BBCode-Buttons: Grafik statt Text
Verfasst: 12.05.2023 23:22
von BNa