icons-v6
Icons im V6-template anpassen
Im Gegensatz zu den früheren Templates werden die Foren-Icons im V6 nicht als einzelne Grafik-Dateien hochgeladen, sondern in einer eigenen Schriftart verwaltet. Dies bietet viele neue Möglichkeiten - z.B. können Icons bei Bedarf je nach Endgerät und Schriftgröße "mitwachsen", ohne dabei unschön verzerrt zu werden. Auch können Icons z.B. per CSS in der Größe und Farbe angepasst werden.
Ein Liste der Xobor Icon Klassen gibt es hier: https://www.hpm-support.de/wiki:appicons
Das Problem
Will man nun einzelne Foren-Icons austauschen, kann man dazu nicht einfach ein Grafik in der Administration ändern.
Die Lösung
Eine eigene Icon-Schrift.
Theoretisch könnte man sich eine eigene Schriftart erstellen, die die benötigten Icons enthält und diese dann verwenden. Da die Erstellung einer Schriftart vermutlich für viele Admins etwas zu kompliziert ist, werden die Icons von Fontawesome im Forum automatisch mitgeladen. Es ist daher möglich per CSS-Addon jedes Xobor-Icon durch ein Fontawesome Icon zu tauschen.
Ein Beispiel
Auf der Startseite des Forums gibt es die "Einklappen/Ausklappen"-Pfeile bei den Kategorien. Diese sollen durch neue Icons getauscht werden.
Unter https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free finden sich alle kostenlosen Icons, die im Forum bereits zur Verfügung stehen.
Aus der Liste der Xobor Icons lässt sich erkennen, dass die Icons mit den Klassen "angle-up" und "angle-down" dazu angepasst werden müssen.
1) Zunächst suche ich das neue gewünschte Icon bei FontAwesome
2) In der Detail-Seite des Icons findet sich der "Unicode"-Code für das Icon (in diesem Fall ist das "f107"):
3) Im SCSS-Addon des Forums erstelle ich eine neue CSS-Regel:
1
2
3
4
5
2
3
4
5
.xob.xob-angle-down:before{
font-family: 'Font Awesome 5 Free' !important;
font-weight: 900 !important;
content: '\f107';
}
4) Fertig - statt dem Xobor icon wird nun das von Fontawesome verwendet!
Tipps:
Klassen wiederverwenden
Sollen mehrere Icons durch die Fontawesome Icons getauscht werden kann man das noch etwas abkürzen:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
.fa {
font-family: 'Font Awesome 5 Free' !important;
font-weight: 900 !important;
}
.xob.xob-angle-down:before{
@extend .fa;
content: '\f107';
}
.xob.xob-angle-up:before{
@extend .fa;
content: '\f101';
}
Andere Schriftarten
Es gibt hunderte so genannte "Iconic Fonts", die Icons bereitsstellen. Wir stellen FontAwesome von Haus aus zur Verfügung, es kann aber natürlich jede beliebige Schriftart verwendet werden. Dazu muss lediglich die externe Schrift eingebunden werden. Z.b. könnte man für den obigen "angle-down" auch ein Icon von Ionic verwenden:
Dazu wird zunächst die Schriftart im Head bereich Addon geladen:
1
<link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
Und dann entsprechend die Icons im CSS-Addon überschrieben:
1
2
3
4
2
3
4
.xob.xob-angle-up:before{
font-family: "Ionicons" !important;
content: '\f126';
}
Selbst erstellen
Wer möchte kann sich auch eine eigene Schriftart für die Foren-Icons erstellen und diese verwenden. Das geht z.B. bei https://app.fontastic.me/
Login
Activity Feed
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
Zitat von creator im Beitrag #8Ich habe daher den fehlenden Code von einem Testforum mit identischem Template kopiert (Per Strg + U, nicht Entwicklertools), die Action-URL geändert und per local override eingesetzt. Vor dem Abschicken vom Formular habe ich das local override deaktiviert, damit der e...
%usernames% haben sich bedankt!
%usernames% hat sich bedankt!
%usernames% haben sich bedankt!
%usernames% hat sich bedankt!
Gestern 18:37
Ingmar und 3 weitere haben 7 neue Beiträge im Thema Plugin: obere Leiste - Header geschrieben.
Technisch ist das wie die anderen schon schreiben identisch mit jedem anderen Template-Element.Du kannst plugin-code VOR (header), NACH (footer) oder INNERHALB (inline) eines Templates ausführen.Im Falle des Template elements foben gibt es wenig Fälle, bei denen es Sinn macht, Code vor dem Header au...
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
wenn ich in der Pluginentwicklung ein neues Template-Element "obere Leiste - Header" erzeuge, hat das unerwartete Folgenals Inhalt wähle ich:1 <h2>foben_header {{template}}</h2> und erhalte im V4 Quelltext12345678 <h2>foben_header 144</h2><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml...
Gestern 13:27
Ingmar hat einen neuen Beitrag im Thema JavaScript-Fehler bei deaktiviertem Chat geschrieben.
Das chat-system wird im Hintergrund für die Anzeige der Live-Updates (XY hat soeben in diesem Thema einen neuen Beitrag geschrieben" etc) verwendet. Was für Fehlermeldungen gibt es denn bei euch in der Chat-Oberfläche?
Bei deinem Beispiel würde ich tippen, dass es sich um ein stark angepasstes Template handelt.Da müsstest du ggf. die Admins selbst anschreiben und fragen, ob Sie ihre Änderungen mit dir teilen möchten.
%usernames% hat sich bedankt!
Gestern 11:46
%usernames% hat sich bedankt!
Gestern 10:17
creator und 2 weitere haben 3 neue Beiträge im Thema Header nicht sichtbar mobile Ansicht geschrieben.
Zitat von Kaninchenraum im Beitrag #1wie kann ich den Header in der mobilen Ansicht sichtbar machen?Indem du den HTML-Fehler im Logo-Wizard behebst.
Zitat von Ingmar im Beitrag #6Ich habe dir vorhin geantwortet...Perfekt Danke
%usernames% hat sich bedankt!
Und die Frage ist, wie der Unterschied zustande kommt?Die einfachen Statistiken sind nichts als ein "Hit-Counter". Auch bots z.B. von Suchmaschienen können dort ggf. auftauchen,Die Premium-Statistiken sind die einzig verlässliche Quelle für die tatsächlichen Zugriffe.
Zitat von Katzenpfote im Beitrag #5Ich habe doch einen eigen Domain angemeldet, auf den ich doch Zugriff haben sollte? Der läuft doch auf meinen Namen.Wie Johannes schon schrieb:ZitatEine Verwaltung der DNS Einstellungen bieten wir nicht an.Die Domain bei uns ist für den Zugriff aufs Forum konfiguri...
17.04.2025 21:24
Ingmar hat einen neuen Beitrag im Thema Header nicht sichtbar mobile Ansicht geschrieben.
Zitat von Kaninchenraum im Beitrag #1wie kann ich den Header in der mobilen Ansicht sichtbar machen?Dein Header aus den anderen Templates wird in der mobilen Ansicht nicht verwendet, da das in den wenigsten Fällen ins Layout passen würde (ein mobiltelefon hat eben sehr viel weniger PLatz zur Verfügu...
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
Hallo zusammen ,wie kann ich den Header in der mobilen Ansicht sichtbar machen?Support konnte bisher nicht helfen und hat mich hierher verwiesen.Weiter kann ich im Forum in der mobilen Ansicht nicht auf meinen Adminbereich zugreifen, sondern muss zuerst die mobile Ansicht aktivieren.[[File:Screensho...
17.04.2025 14:24
Katzenpfote und 1 weitere haben 4 neue Beiträge im Thema Zugriff auf eigenen Domain geschrieben.
Zitat von Johannes im Beitrag #4Zitat von Katzenpfote im Beitrag #3Gewünschte Einstellungen kann ich doch erst festlegen wenn ich die jetzigen Einstellungen des DNS kenne, oder nicht?Wozu wollen Sie die DNS Einstelungen ändern?Ich habe doch einen eigen Domain angemeldet, auf den ich doch Zugriff hab...
@allBysterstorfer kann neue animierte GIF selbst erstellen.Zwei Bilder gleichzeitig in das Feld für's Logo funktioniert nicht.Man kann höchstens Zusatzbild und Text unter dem Logo anzeigen lassen, so wie bei uns >> www.zur-blende.deDa steht dann der Blumenstrauß und darunter das mit dem Geburtstag.K...
Hallo liebe Forengemeinde,Wie komme ich zu meiner eigenen Domain Verwaltung um DNS Einträge zu prüfen ggf. anzupassen?
%usernames% haben sich bedankt!
16.04.2025 20:59
spotter46 und 1 weitere haben 2 neue Beiträge im Thema Iconbar wechselt Position bei PN geschrieben.
Ich habe mal bei unserem Technik-Admin "geklingelt", denn ich finde keine Fehler.Melde mich dann.
Wahrscheinlich ist das schon etwas länger so, aufgefallen aber erst heute.Sobald ich ein PN (Persönliche Nachricht) schreiben will, sieht das noch "jungfräulich" so aus, die Iconbar wie erwartet oberhalb des Textfeldes.[[File:PN_Iconbar1.jpg|none|auto]]Sobald jedoch in's Textfeld geklickt wird um zu...
16.04.2025 17:24
cleo und 1 weitere haben 2 neue Beiträge im Thema Abo Kündigung und Sicherheit geschrieben.
Hallo Dreimal Ja. LG
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
Besucher Statistiken
Heute waren Online
balea, BeaBielecki, Gabriella, heart-of-fire, Ingmar, Johannes, kacz, Katja23101971, Katzenpfote, Kipper-Spedition, Lady of the light, m3ontour, Mike48, nobody, old-smokey, Rika1, spotter46, Stefan5547, Wolfgang
balea, BeaBielecki, Gabriella, heart-of-fire, Ingmar, Johannes, kacz, Katja23101971, Katzenpfote, Kipper-Spedition, Lady of the light, m3ontour, Mike48, nobody, old-smokey, Rika1, spotter46, Stefan5547, Wolfgang
Besucherrekord
1274 Benutzer gleichzeitig online (11.10.2019 18:19)
Besucherzähler
Heute waren 4114 Gäste und 19 Mitglieder, gestern 5326 Gäste und 32 Mitglieder online.
Statistiken
| Themen | 41887 |
| Beiträge | 306808 |
| Mitglieder | 12.570 |
Forum empfehlen