Awesome Symbole für Modul Teasers

herbi · 03.12.2019 20:22:16

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. smile

florian · 03.12.2019 20:39:24

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.

herbi · 03.12.2019 20:54:02

Hallo Florian,

die Aktuelle (0.5.5_1) habe ich eigentlich.
Wo kann ich dies einstellen?

florian · 03.12.2019 21:05:05

Im Frontend, einer von den vielen bunten Buttons. Ich bin gerade nicht am PC. Einfach mal selbst herumprobieren. Irgendwie ging das jedenfalls.

herbi

herbi · 04.12.2019 18:46:11

florian schrieb:

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.

florian · 04.12.2019 19:30:33

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.
attachment.php?item=2069&download=1
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.

herbi · 04.12.2019 19:35:34

Jetzt ist Licht in der Dunkelheit... smile

Danke. thumb_up

herbi · 05.12.2019 11:58:39

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. sad
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. smile

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)

florian · 05.12.2019 12:11:54

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)

herbi · 05.12.2019 12:33:14

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...

herbi · 05.12.2019 12:37:18

Im AOR ist nur die 5er.
Nicht die 0.6.0???
sad

florian · 05.12.2019 12:44:16

http://wbce.at/downloads/globalupload.zip

herbi · 05.12.2019 12:58:53

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

Teaser mit FA - geht nicht

Teaser mit Symbol - geht -

ich bin ratlos... sad sad

florian · 05.12.2019 13:01:44

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)

herbi · 05.12.2019 13:07:59

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. thumb_up

Update:
Habe die Seite gelöscht,
neu angelegt,
Teaser-Section angelegt,
geht.

smile

florian schrieb:

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)

florian · 05.12.2019 13:16:34

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.

herbi · 05.12.2019 14:14:23

florian schrieb:

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.

WBCE CMS Forum

#1 03.12.2019 20:22:16

Awesome Symbole für Modul Teasers

#2 03.12.2019 20:39:24

Re: Awesome Symbole für Modul Teasers

#3 03.12.2019 20:54:02

Re: Awesome Symbole für Modul Teasers

#4 03.12.2019 21:05:05

Re: Awesome Symbole für Modul Teasers

#5 04.12.2019 18:46:11

Re: Awesome Symbole für Modul Teasers

#6 04.12.2019 19:30:33

Re: Awesome Symbole für Modul Teasers

#7 04.12.2019 19:35:34

Re: Awesome Symbole für Modul Teasers

#8 05.12.2019 11:58:39

Re: Awesome Symbole für Modul Teasers

#9 05.12.2019 12:11:54

Re: Awesome Symbole für Modul Teasers

#10 05.12.2019 12:33:14

Re: Awesome Symbole für Modul Teasers

#11 05.12.2019 12:37:18

Re: Awesome Symbole für Modul Teasers

#12 05.12.2019 12:44:16

Re: Awesome Symbole für Modul Teasers

#13 05.12.2019 12:58:53

Re: Awesome Symbole für Modul Teasers

#14 05.12.2019 13:01:44

Re: Awesome Symbole für Modul Teasers

#15 05.12.2019 13:07:59

Re: Awesome Symbole für Modul Teasers

#16 05.12.2019 13:16:34

Re: Awesome Symbole für Modul Teasers

#17 05.12.2019 14:14:23

Re: Awesome Symbole für Modul Teasers

Fußzeile des Forums