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
Zitat von Marlies Stockmann im Beitrag #4Danke Dir in wie fern soll ich eine aussagekräftigen Beitrag shreibenIch geb's auf
brauch mal wieder eure Hilfe,da ich nun wie gewünsch die Neue Version benutze finde ich nichts zum Bild änder wer hilft Mir Bitte
Gestern 16:01
Gabriella hat sich bedankt!
Beitrag: Text ändern bei dem Hinweis : Sie haben zu viele Links in Ihrem Beitrag
Beitrag: Text ändern bei dem Hinweis : Sie haben zu viele Links in Ihrem Beitrag
%usernames% hat sich bedankt!
Gestern 15:47
spotter46 hat einen neuen Beitrag im Thema Text ändern bei dem Hinweis : Sie haben zu viele Links in Ihrem Beitrag geschrieben.
Bei Admin > Entwicklung > SprachenA) Falls bisher dort nur "Deutsch Original" vorhanden ist, davon eine Kopie anlegen, die dann bearbeitet werden kann.oderB) Falls bereits eine Kopie vorhanden ist, diese bearbeiten.Wie folgt:Zunächst "alle" anzeigen lassen, dann mit Steuerung+F im dann erscheinenden...
Gestern 12:37
mariekulm hat das Thema Text ändern bei dem Hinweis : Sie haben zu viele Links in Ihrem Beitrag erstellt
Hallo zusammen Ich habe bei manchen Benutzergruppen (vorrangig bei Gästen) eingestellt, daß diese keine Links posten dürfen. Das klappt auch wunderbar, aber den Hinweis (wenn sie dann doch mal nen Link posten wollen), find ich irritierend und nicht aussagekräftig Dieser Hinweis erscheint: Sie ha...
28.08.2025 18:26
Olaf und Kipper-Spedition haben 2 neue Beiträge im Thema Plugin "Drei Infoboxen" geschrieben.
Zitat von Kipper-Spedition im Beitrag #221Das ich die 3 Boxen nicht auf dem Handy sehe, ist für mich jedenfalls gut. Vieles was auf einen großen Monitor gut und gefällig ausschaut, sieht auf einem Handy einfach sche..... aus.So sehe ich das auch.Zitat von Kipper-Spedition im Beitrag #221Folgende Ide...
%usernames% hat sich bedankt!
Ich habe Dir das neue Update 0.088 zugesendet.Dieses Update ist erstmal nur für das V6.Es wird in diesen Update die Forumbreite abgefragt und danach je nach Einstellung die Boxenbreite nach der Forumbreite angepasst.Die oberen 4 Einstellungen im Plugin ändern sich jetzt,weil die Eingabe in Pixel ist...
27.08.2025 21:01
spotter46, Ingmar und JanB haben 3 neue Beiträge im Thema Video Upload funktioniert wie genau? geschrieben.
Zitat von Ingmar im Beitrag #26Also von unserer Seite ist keine 30 Sekunden Längenbegrenzung vorgesehen. In meinen Testforen habe ich auch schon längere Videos hochgeladenAuch mir und meinem Freund und Admin-Kollegen ist das schon gelungen.Aber es ist uns nicht gelungen das Rätsel zu lösen, unter we...
%usernames% hat sich bedankt!
27.08.2025 18:24
spotter46 hat das Thema Bildergalerie - Bild verlinken - Alben fehlt teils das Coverbild erstellt
Ich setze als bekannt voraus, dass Alben in der Bildergalerie softwaremäßig automatisch ein Cover bekommen, das aus dem ältesten Bild im betreffenden Album generiert wird.Als Option kann aber auch ein eigenes Coverbild hochgeladen werden.Zu letzterer Möglichkeit haben wir uns entschieden, um ein ein...
%usernames% hat sich bedankt!
27.08.2025 09:42
River und 3 weitere haben 4 neue Beiträge im Thema Einstellung Position der Werbung fehlt geschrieben.
Zitat von Ingmar im Beitrag #3dass die Werbung an einer anderen Stelle erscheint als vom Admin vorgegeben.Wir haben Foren mit Werbung 'oberhalb' eingestellt. Es kommt auch Werbung oberhalb und auch unterhalb. Es wird keine Werbung seitlich eingeblendet. Vermutlich wird die Werbung schon noch 'oberha...
%usernames% hat sich bedankt!
In der neuen Admin kann ich die Einstellungen für die Position der Werbung nicht finden. In der alten Admin ist die in Layout zwischen Kop- & Fuszeile und Navigation. Es ist ärgerlich wenn man nach so langer Zeit immer wieder auf die alte Admin gehen muss.
27.08.2025 01:36
Olaf und 3 weitere haben 12 neue Beiträge im Thema Plugin "Drei Infoboxen" geschrieben.
Muß ich mal sehen,vielleicht auch die Forumsbreite jedesmal auslesen:1234567 const forumContainer = document.querySelector('.main');function updateForumWidth() {const width = forumContainer.clientWidth;console.log('Aktuelle Forenbreite:', width, 'px');}window.addEventListener('resize', updateForumWi...
%usernames% hat sich bedankt!
26.08.2025 15:15
mariekulm hat einen neuen Beitrag im Thema Mitglied offline angezeigt, obwohl im Forum angemeldet und aktiv geschrieben.
Hallo zusammen Wir, ich als Admin und Mitglieder in meinem Forum, haben es auf längere Zeit getestet und das Problem besteht nach wie vor. Wenn man sich einloggt, kann man stundenlang lesen und rum klicken wie man will, aber man bleibt als Mitglied online. Und auch wenn man sich einloggt und gar ni...
26.08.2025 13:19
Kipper-Spedition und 1 weitere haben 2 neue Beiträge im Thema Plugin "Drei Infoboxen" geschrieben.
Hallo Olaf,schick mir mal dein PI an die Boardnummer: 610439. Die Boxen passen sich in der Version: 0.085 nicht an.Lieben Dank
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
26.08.2025 00:46
Olaf und 1 weitere haben 2 neue Beiträge im Thema Plugin "Drei Infoboxen" geschrieben.
Zitat von Kipper-Spedition im Beitrag #204Könntest du das PI so umschreiben, das sich die Boxen im Verhältnis zum Bildschirm immer anpassen?Hallo Arndt,die Boxenbreite wird im Plugin in Prozent angegeben,die Box bleibt also proportional zur Bildschirmbreite.Ich habe keine verschiedene große Monitore...
%usernames% hat sich bedankt!
25.08.2025 13:02
spotter46 und 2 weitere haben 11 neue Beiträge im Thema Anklickbares Bild mit unterlegtem Link geschrieben.
Zitat von Mike48 im Beitrag #12Was wäre denn eigentlich die höflichere Variante gewesen?Älter als ich oder jünger als du?Ich bin in dieser Hinsicht ziemlich schmerzlos, Alter ist weder ein Verdienst, auch kein Anrecht auf Besserwisserei und ebenfalls kaum eine Entschuldigung für "Aussetzer".
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
25.08.2025 01:14
Olaf hat einen neuen Beitrag im Thema Anklickbares Bild mit unterlegtem Link geschrieben.
Ich habe mal was zusammengebastelt.Eingabe in der Iconbar in einen neuen HTML Baustein,ich habe ihn den Namen "Bild mit Link" gegeben und den folgenden Codedann in das Fenster setzen und speichern.In der Iconbar ist ein Kettenglied als Icon dann zu sehen.1234567891011121314151617181920212223242526 <...
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
Wer ist Online?
1 Mitglied und 113 Gäste sind Online
Besucher Statistiken
Statistiken
| Themen | 42089 |
| Beiträge | 308384 |
| Mitglieder | 12.596 |
Forum empfehlen