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
Gestern 21:51
Ayyanji76 hat das Thema What Is The Temu Coupon Code For $100 Off? [acs670886] erstellt
Temu , a rapidly growing global shopping platform, is renowned for its extensive collection of trending items, unbeatable prices, and exceptional customer service. As of April 2025, Temu is offering an exclusive $100 Off coupon code (acs670886) to both new and existing users, enhancing your shopping...
Gestern 21:50
Ayyanji76 hat das Thema Working $200 Off Temu Coupon Code [acs670886] First Order erstellt
Exclusive Temu Coupon Code (acs670886) – Save Big on Your Shopping!Temu has become a go-to online marketplace for shoppers looking for high-quality products at unbeatable prices. With millions of trending items, fast delivery, and free shipping available in 67 countries, Temu ensures a seamless shop...
Gestern 21:49
Ayyanji76 hat das Thema Exclusive 90% Temu Discount Code (acs670886) for Free Stuff! erstellt
Temu is changing the way we shop online with incredible deals, unbeatable prices, and exciting offers. If you're looking for a fantastic way to save, the Temu coupon code (acs670886) gives you a flat 90% discount, Temu shopping even more fun. Whether you're a new user or an existing shopper, this Te...
Gestern 21:49
Ayyanji76 hat das Thema [Updated] Temu Coupon for £100 Off [acs670886] for Existing Users erstellt
Looking to snag amazing deals on trending products with unbeatable prices? Temu is here to Temu your shopping dreams come true. With the Temu coupon code (acs670886), you can enjoy up to £100 off, whether you’re a new or existing user. April 2025 brings even more fantastic savings, so don...
Gestern 21:48
Ayyanji76 hat das Thema $200 Off Temu Coupon Code [acs670886] For New & Existing Users erstellt
IntroductionLooking for incredible savings on Temu ? Our Temu coupon code [acs670886] $200 off is here to give you unbeatable discounts on your next purchases.The [acs670886] coupon code ensures maximum benefits for shoppers across the USA, Canada, and European countries. Whether you're a new or exi...
Gestern 21:43
Ayyanji76 hat das Thema How To Get Temu Coupon Code $100 Off [acs670886] New Order erstellt
Looking to enjoy exclusive savings on your next Temu shopping spree? You're in luck! By using the special Temu coupon code (acs670886), you can unlock a flat $100 discount, score up to 40% off, and even access free gifts with your orders. Whether you're a first-time user or a loyal customer, Temu ’s...
Olaf schickt Dir bestimmt das private Plugin, das er mir geschickt hat. Da hast Du es viel leichter.
Gestern 12:33
%usernames% hat sich bedankt!
29.04.2025 19:59
Oldi, Olaf und spotter46 haben 4 neue Beiträge im Thema Probleme mit V6 und x6 geschrieben.
Hallo ihr helfenden Hände,danke für die Hinweise und Unterstützungen. Auf wundersame Weise hat sich die Korrektur von Passwörtern und Profiländerungen erledigt. Ich komme an alle neuen Felder zur Korrektur heran. Leider habe ich die Ursache nicht ergründen können. Noch bleibt das Problem mit den "do...
%usernames% hat sich bedankt!
%usernames% haben sich bedankt!
28.04.2025 22:21
Olaf und 5 weitere haben 10 neue Beiträge im Thema Probleme mit V6 und x6 geschrieben.
Wenn ich mal was zu den Fehler im Plugin "Countdown" sagen darf;es müssen alle Felder im Plugin ausgefüllt werden.Wovon soll sonst das Programm die Zeit berechnen?Bei Dir fehlt die Eingabe der Jahreszahl.Im Bild Countdown 2 ist zu sehen,wie ich die Eingabe von diesen Ostern gemacht habe.GrußOlaf
Bin begeistert mit dem Layout von x6. Wurde auch von den Usern als "nicht schlecht" angenommen. Habe allerdings einige Farben verändern müssen. Wurde so gewünscht. Dass die Smileys kleiner sind, ist zu akzeptieren, damit werden sie auch in der Gruppe übersichtlicher.Allerdings habe ich für mich leid...
27.04.2025 15:18
Mike48 und 2 weitere haben 11 neue Beiträge im Thema Header nicht sichtbar mobile Ansicht geschrieben.
Beim V1 bis V4 kommt man wie folgt in die mobilen EinstellungenAdministration → Layout → Mobil Da kannst du alle Einstellungen für die mobile Ansicht machen. Auch deine Farben in Mobil so wie im Desktop anpassen. Für den Header:Administration → Layout → Mobil →Desktop-Header Zum Beispiel so:[[File:D...
%usernames% hat sich bedankt!
Ich habe es mal probiert.Administration → Kopf- & FußzeileIm Logo Wizard nur das Logo eingetragen. Ich habe das Logo geändert und den Hintergrund transparent gemacht. Kannst du dir hier runterladen.[[File:Katzen-Logo-3.png|none|600px|600px]]Administration → Layout → Farben & Einstellungen → Desktop-...
%usernames% hat sich bedankt!
Zitat von Katzenpfote im Beitrag #11Hallo Zusammenwie kann ich das Forenlogo vergrößern?In dem Du das Bild vergrößerst und das alte Logo damit ersetzt
26.04.2025 16:19
Katzenpfote und 1 weitere haben 4 neue Beiträge im Thema Meine Forenadresse wird unter den Beiträgen falsch angezeigt? geschrieben.
Zitat von creator im Beitrag #4Wenn du bei der Signatur etwas nach unten scrollst, wirst du den Link sicher sehen können.Dankeschön für den Hinweis 👏 genauso ist es.
26.04.2025 15:37
Katzenpfote hat das Thema Meine Forenadresse wird unter den Beiträgen falsch angezeigt? erstellt
Hallo Zusammen,kann mir Jemand sagen warum die Forenadresse falsch angezeigt wird obwohl der Eintrag im Profil richtig ist?Unter den Beiträgen hier wird angezeigt www.katzenforum.dein meinem Profil steht www.katzenforum-nr1.de [[File:IMG_4343.jpeg|none|fullsize]]
26.04.2025 15:24
Katzenpfote hat einen neuen Beitrag im Thema Zugriff auf eigenen Domain geschrieben.
Danke @Ingmar für den Hinweis, das hatte ich glatt überlesen. Es hat sich gerade Jemand bei mir gemeldet. Vielen Dank
%usernames% hat sich bedankt!
25.04.2025 08:34
creator hat einen neuen Beitrag im Thema Eigene Seite auf dem Smartphone geschrieben.
Zitat von Andreas Lipske im Beitrag #4Wenn man "responsiv" einsetzt, dann haben u.a."div" u. "center" in dem Seitencode nichts mehr verloren...Wo genau hast du das gehört? Das eine hat mit dem anderen nichts zu tun.Center ist "deprecated" (zur Entfernung vormarkiert), funktioniert aber weiterhin. St...
Lieber Olaf herzlichen Dank! Das ist jetzt genau was ich wollte und funktioniert einwandfrei!
%usernames% hat sich bedankt!
24.04.2025 23:07
Olaf und 3 weitere haben 6 neue Beiträge im Thema Laufschrift über Header geschrieben.
@Rika1 Ich habe Dir mein Plugin nochmal zugesendet (Version 0.020).Da kannst Du jetzt einstellen,ob die Laufschrift unter der Navi angezeigt werden soll oder über den Header.Sehr wichtig ist,das bei der Einstellung im Plugin "Anzeigen über den Header" beim V6 das Menü von Xobor nicht fixiert sein da...
%usernames% haben sich bedankt!
Wer ist Online?
0 Mitglieder und 65 Gäste sind OnlineBesucher Statistiken
65 Aktive User
0 Mitglieder und 65 Gäste sind Online
0 Mitglieder und 65 Gäste sind Online
Besucherrekord
1274 Benutzer gleichzeitig online (11.10.2019 18:19)
Besucherzähler
Heute waren 311 Gäste , gestern 6441 Gäste online
Statistiken
| Themen | 41902 |
| Beiträge | 306902 |
| Mitglieder | 12.581 |
Forum empfehlen