WBCE CMS – Way Better Content Editing.
Du bist nicht angemeldet.
Servus,
wie kann ich Font Awesome Symbole verwenden im Modul Teasers, anstelle eines Bildes?
Geht wohl nur entweder oder, oder?
Also, in etwa so wie auf der WBCE-Startseite.
Da wird, denke ich, zwar kein Teasers verwendet, aber das Prinzip ist das Gleiche.
Oder wäre Topics in diesem Falle die bessere Alternative.
Weil, da kann ich bei den Optionen dies per Inline-Style einbauen.
Kleiner Tip oder Lösungsansatz wäre super.
Dankeschön.
Jeder meint, seine Wahrheit ist die Richtige.
Offline
Beim Modul Teasers (aktuelle Version) kannst Du in einem sehr komfortablen Auswahlfeld das gewünschte FontAwesome-Symbol auswählen.
Die Links auf der WBCE-Homepage sind mit Itemz erstellt.
Code allein macht nicht glücklich. Jetzt spenden!
Offline
Hallo Florian,
die Aktuelle (0.5.5_1) habe ich eigentlich.
Wo kann ich dies einstellen?
Jeder meint, seine Wahrheit ist die Richtige.
Offline
Im Frontend, einer von den vielen bunten Buttons. Ich bin gerade nicht am PC. Einfach mal selbst herumprobieren. Irgendwie ging das jedenfalls.
Code allein macht nicht glücklich. Jetzt spenden!
Offline
herbi
Beim Modul Teasers (aktuelle Version) kannst Du in einem sehr komfortablen Auswahlfeld das gewünschte FontAwesome-Symbol auswählen.
Die Links auf der WBCE-Homepage sind mit Itemz erstellt.
Hallo Florian,
nochmal wg. der FAW-Symbole.
Leider gelingt es mir nicht, nachzuvollziehen, wie und an welcher Stelle beim Modul Teasers, die Symbole eingepflegt werden müssen.
Dies müsste ja für jede Box ein unterschiedliches Symbol sein.
Auch mit dem Modul "Itemz" ist es mir nicht gelungen den Dschungel zu durchschauen.
Gib mir bitte noch mal einen/ einige Denkanstöße.
Dankeschön.
Jeder meint, seine Wahrheit ist die Richtige.
Offline
Also, im Template muss FontAwesome eingebunden sein; oder einfach das Awesomesnippet installieren.
Bei Teasers:
Ins Frontend wechseln (im Backend geht's nicht) und auf den "Bearbeiten"-Stift oben rechts klicken. Auf das Wort "Icon" klicken und gewünschten FA-Icon auswählen und mit "Apply" bestätigen und Speichern. I.d.R. möchtest Du die Anordnung "normal" verwenden, also dass das Icon nicht vom Text umflossen wird.
Die Icons sind standardmäßig linksbündig. Das sieht natürlich nicht so prickelnd aus. In der CSS-Datei des Templates also noch die Anweisung
.tsrs_picture_box {
text-align:center;
}
ergänzen.
Bei Itemz:
Das ist abhängig von dem Template, was Du benutzt, d.h. ob da bereits ein CSS-Grid eingebaut ist, also wie das Preset für einen Item aussehen muss, damit diese hübsch nebeneinander stehen. Auf wbce.org kommt das Responsee-Framework zum Einsatz, deshalb sind die Icons auch nicht Font-Awesome, sondern Simple Line Icons, deren Syntax zwar vergleichbar ist, aber etwas anders aussieht.
So sehen die Einstellungen auf wbce.org aus:
Kopfzeile:
<div class="block">
<div class="line">
<div class="margin">
Fußzeile:
</div>
</div>
</div>
Item:
<div class="s-12 m-12 l-3 margin-bottom">
<a href="[SHORT2]"><i class="[SHORT1] icon3x"></i></a>
<h2><a href="[SHORT2]">[NAME]</a></h2>
<p>[LONG1]</p>
</div>
Short1: Icon
Short2: Link
Long1: Text
Wie gesagt, das funktioniert nur mit Templates auf der Basis von Responsee. Aber vom Prinzip her lässt sich das so dann für andere CSS-Grids und FA übernehmen.
Code allein macht nicht glücklich. Jetzt spenden!
Offline
Jetzt ist Licht in der Dunkelheit...
Danke.
Jeder meint, seine Wahrheit ist die Richtige.
Offline
Update:
Mögliche Ursache.
Beim Klick auf den Editieren-Button, wird das grüne Select-Symbol zum Einfügen eines Bildes sehr groß dargestellt. Dadurch werden die beiden anderen Symbole, graues Upload und das FA-Symbol, verdrängt.
Frage, was kann man(n) tun?
Hallo Florian,
nachdem ich gestern noch einen Erfolg verbuchen konnte, die Symbole waren auswählbar, ist es heute nicht mehr möglich. Auch die gestern erstellten Teasers konnte ich heute nicht ändern.
Aus den Anhängen ist ersichtlich, wie ich FA anspreche.
Das FontAwesomeSnippet Version:0.1 - Entwicklungsstatus:Stable wird eingebunden (Abb. anhang_2_teaser_fa.jpg).
Im Frontend sieht es beim Editieren wie bei Abb. anhang_1_teaser_fa.
Die FA-Symbole sind nicht sichtbar. Seltsamerweise hat es gestern mal funktioniert. Die Nachtruhe war damit gewährleistet.
Hier mal ein Link zu meiner Testseite: Testseite
Nachtrag:
Seltsam seltsam... auf dieser Seite : Teaser-Beispiel 1 geht´s plötzlich.
Auf dieser Teaser Test 2 nicht.
Beitrag geändert von herbi (05.12.2019 12:20:14)
Jeder meint, seine Wahrheit ist die Richtige.
Offline
Welche Version von Global Upload ist installiert?
Der Icon für die Bildauswahl ist "etwas" zu groß. Normal (mit dem Template Weh Be Zeh Eh, Awesomesnippet, Teasers 0.5.5 und GlobalUpload 0.6.0) müsste es so wie im Anhang aussehen.
Beitrag geändert von florian (05.12.2019 12:15:45)
Code allein macht nicht glücklich. Jetzt spenden!
Offline
Servus,
die 0.5.2...
Ja, in der Tat, es sind die Bildchen in der DIV-Classe: "gup_img_toolbox img".
Ok, werde mal die 0.6.0 installieren.
Gebe Bescheid...
Jeder meint, seine Wahrheit ist die Richtige.
Offline
Im AOR ist nur die 5er.
Nicht die 0.6.0???
Jeder meint, seine Wahrheit ist die Richtige.
Offline
Code allein macht nicht glücklich. Jetzt spenden!
Offline
Update:
Also, die 0.6.0 installiert.
1. drüber installiert, kein Ergebnis
2. install-php und upgrade-php ausgeführt, kein Ergebnis
3. deinstalliert und wieder neu installiert, die 0.6.0, kein Ergebnis
4. teaser-Section gelöscht und wieder neu angelegt, kein Ergebnis
ich bin ratlos...
Jeder meint, seine Wahrheit ist die Richtige.
Offline
Verstehe nicht, was Du meinst.
Was Du als "Teaser mit Symbol" bezeichnest, *ist* FontAwesome.
Beitrag geändert von florian (05.12.2019 13:02:58)
Code allein macht nicht glücklich. Jetzt spenden!
Offline
Update II:
Legt man die TeaserBoxen beim Template "webzeh" in den Abschnitt "Teaserbild", tritt das diskutierte Problem auf. Im Hauptblock des Templates ist alles in Ordnung. Vielleicht kann da künftig Abhilfe geschaffen werden.
Danke jedenfalls für die Hilfe.
Update:
Habe die Seite gelöscht,
neu angelegt,
Teaser-Section angelegt,
geht.
Verstehe nicht, was Du meinst.
Was Du als "Teaser mit Symbol" bezeichnest, *ist* FontAwesome.
Ja, ist mir klar.
Es soll nur verdeutlichen, dass es auf dieser Seite funktioniert.
Auf der anderen nicht.
Deswegen auch die beiden Links.
Beitrag geändert von herbi (05.12.2019 13:56:19)
Jeder meint, seine Wahrheit ist die Richtige.
Offline
Eventuell liegt's an Styleangaben in der template.css. Versuch mal, auf der Seite, wo es nicht funktioniert, über Seiteneinstellungen > Template ein anderes Template (WBCEZon o.ä.) auszuwählen und schau, ob der Fehler dann auch auftritt.
Oder klicke mit der rechten Maustaste den zu großen Bildauswahlbutton an und klicke dann auf "Element untersuchen" und prüfe, welche Styleanweisungen darauf angewendet werden. Wenn etwas aus der styles.css kommt, könnte das Problem dadurch verursacht werden.
Code allein macht nicht glücklich. Jetzt spenden!
Offline
Eventuell liegt's an Styleangaben in der template.css. Versuch mal, auf der Seite, wo es nicht funktioniert, über Seiteneinstellungen > Template ein anderes Template (WBCEZon o.ä.) auszuwählen und schau, ob der Fehler dann auch auftritt.
Oder klicke mit der rechten Maustaste den zu großen Bildauswahlbutton an und klicke dann auf "Element untersuchen" und prüfe, welche Styleanweisungen darauf angewendet werden. Wenn etwas aus der styles.css kommt, könnte das Problem dadurch verursacht werden.
Ja, du vermutest richtig.
In der Zeile 146 der Style-CSS funkt diese Classe dazwischen:
[== CSS ==]
.eyecatcher img {
width:100%;
height:auto !important;
}
Deaktiviert man im Untersuchungsmodus das Attribut "width:100%", werden die Symbole richtig angezeigt.
Ok, werde dies, für meinen Fall, deaktivieren.
Danke.
Jeder meint, seine Wahrheit ist die Richtige.
Offline