[cv6] Node Icons & Tools

XF2.x [cv6] Node Icons & Tools 1.3.0

Keine Rechte zum Download
Übersicht Aktualisierungen (6) Rezensionen (1) Historie Diskussion
Hoffi

Hoffi

!important
Registriert
30. Dez. 2010
Beiträge
3.167
Punkte
248
XF Version
  1. 2.2.10 PL1
XF Instanz
Hosting
PHP-Version
8.0.8
MySQL/MariaDB
MariaDB 10.3.8
Provider/Hoster
AWS
Hoffi hat eine neue Ressource erstellt:

[cv6] Node Icons - Eigene Icons für alle Nodes und Kategorien.

NodeIcons für XenForo 2.2

Du kannst sämtlichen Foren neue Icons zuweisen, jetzt auch Kategorien.

Neben einem Font-Awesome Icon, kann man auch beliebige Bilder nutzen.

SVG Bilder werden ebenso unterstützt, diese können optional in den HTML Code eingebettet werden, dazu wird svgiject als library mitgeliefert. Diese lädt das Bild nach, um es dann im DOM einzufügen. Dadurch können die Style Farben einfluß auf das Bild nehmen, und ein homogenes Erscheinungsbild kreieren.

Auf Style Basis...
Zum Vergrößern anklicken....

Weitere Informationen zu dieser Ressource...
 
Schon mal eine schöne Idee: Würde die aber noch empfehlen ein Overlay für die FontAwesome-Icons zu entwerfen, was die Bedienung vereinfacht.
 
Teralios schrieb:
Schon mal eine schöne Idee: Würde die aber noch empfehlen ein Overlay für die FontAwesome-Icons zu entwerfen, was die Bedienung vereinfacht.
Zum Vergrößern anklicken....
Ich finde die eigentlich immer nur nervig. Ich hab extra in die Beschreibung ein Link zu FA eingebaut.
 
Hoffi schrieb:
Ich finde die eigentlich immer nur nervig. Ich hab extra in die Beschreibung ein Link zu FA eingebaut.
Zum Vergrößern anklicken....
Ja und nein:

Die Beschreibung ist durchaus gut, aber bedingt, dass XenForo wirklich auch die Icons installiert. Zudem muss man in deinem Fall, wenn man später mal was bearbeitet, auch noch mal nach schlagen, welches Icon da nun wirklich ist. Eventuell kannst du ja eine "Anzeige" einbauen, dass man das sofort erfasst.

Zudem: Wäre durchaus gut, wenn du es möglich machst auch den Icon-Stil auszuwählen.

Und eventuell auch ein Icon für Ungelesen, da kann man nämlich mit fas und far echt gut arbeiten.
 
Teralios schrieb:
Zudem: Wäre durchaus gut, wenn du es möglich machst auch den Icon-Stil auszuwählen.
Zum Vergrößern anklicken....
Einfach die Klasse mit eingeben. Nehme ich in die Doku mit auf.
Wenn du "fad fa-dice" eingibts, wird die dual-tone Version genommen. Nutze ich bei mir im Forum.

Teralios schrieb:
Und eventuell auch ein Icon für Ungelesen, da kann man nämlich mit fas und far echt gut arbeiten.
Zum Vergrößern anklicken....
Ungelesen wird standardmässig mit einer anderen Farbe dargestellt bei den Icons. Bei images setze ich das auf eine halb-transparenz.

Da mein Fokus hier primär auf SVG und FA liegt, halte ich das unread icon für einen overhead.
 
Hoffi schrieb:
Ungelesen wird standardmässig mit einer anderen Farbe dargestellt bei den Icons. Bei images setze ich das auf eine halb-transparent.
Zum Vergrößern anklicken....
Nun ein Alternatives Icon bietet sich da auch an, weil man auch mit den Stilen arbeiten kann, was auch echt schick aussieht, musst du aber wissen.
 
Hy Hoffi,
danke für dies tolle, und einfach zu bedienende Hilfsmittel!

Eine kleine Frage hätte ich dazu:
Man kann die Icons, durch hinzufügen von diversem Code, anpassen.
So kann man das Icon z.B. rotieren lassen ... oder auch die Farben (Dualtone) anpassen.
Nachdem man nur rein den "Icon Namen" eingibt, funktioniert das mit der Codeanpassung leider nicht ... sofern dieser Code nicht direkt beim Namen steht.
Beispiel:
Rotation funktioniert ...
Code: 
<i class="fas fa-sync fa-spin"></i>

Wird der Iconname getrennt vom folgenden Code angegeben, wird das Icon nicht mehr angezeigt
Code: 
<i class="fad fa-fill-drip" style="--fa-secondary-color: limegreen;"></i>

Wenn man auf Fontawesome ein Icon gefunden hat, kann man ja einfach auf den "Codeschnipsel" klicken, und der komplette Code wird in die Zwischenablage kopiert.
Würde es Sinn machen, bzw. wäre es möglich, das AddOn so zu gestalten, dass man einfach den Code in dieser Form eingibt:
Code: 
<i class="fas fa-sync"></i>
Vermutlich könnte man dann auch die anderen Classen nutzen?

Gruß Chris
 
Alles was im Bereich Klasse steht, kannst du einfügen.

Den ganzen HTML einfügen, werde ich nicht bauen, das ist eine Potentielle Schwachstelle mit der zu viel kaputt gehen kann wenn man das falsch bedient.

Die Farben bei Dualtone anpassen geht nicht direkt, da es keine Klassen sind. (Siehe weiter unten wie das geht).

Was geht:
  • fas
  • fad
  • fal
  • fab (für branded)
  • fa-spin
  • fa-pulse
  • fa-swap-opacity

Willst du die einfärben, ist das wie folgt möglich:
Erstelle eine Klasse in einer .less Datei deiner Wahl (extra.less, oder einer eigenen die du per TemplateMod an die core.less anhängst).

CSS: 
  .my-iconclass {
    --fa-primary-color: darkgreen;
    --fa-secondary-color: silver;
  }

Und dann einfach in das Feld noch my-iconclass hinzufügen.
 
Zuletzt bearbeitet:
Hoffi schrieb:
Den ganzen HTML einfügen, werde ich nicht bauen, das ist eine Potentielle Schwachstelle mit der zu viel kaputt gehen kann wenn man das falsch bedient.
Zum Vergrößern anklicken....
ja gut, das leuchtet ein.
Danke für die Erklärung, wie man es dennoch realisieren kann.

Gruß Chris
 
Aber du hast mich auf eine Idee gebracht, ich werde kleine Bonusfunktionen einbauen und etwas mehr Erklärungstext.
 
das ist MEGA!
Sehr einfach gehalten, ich finds gut

Gruß Chris
 
Sehr nice und Anwenderfreundlich noch dazu. :)
 
OK, dann setz ich das mal in meine Queue. Die Optik steht ja fast, fehlt nur noch das JavaScript.

Das wird dann der Start meiner CoreLib sein, da ich dies FA Feld in diversen AddOns nutze.
 
Bitte hier noch eine Phrase hinzufügen:
upload_2021-6-8_19-8-19.png
Grund: im deutschen sprechen wir ja von "Elementen" statt von "nodes" - folglich würde ich das hier gern mit Element Icons übersetzen um nicht abzuweichen.
Und gleich eine erste Frage; die Größe des Icons in Pixel, betrifft das sowohl width als auch height oder nur eines von beiden? Denke mal beides :)

Weiter...
upload_2021-6-8_19-12-47.png
Gäbe es hier irgendwie ne bessere Möglichkeit die Breite und Höhe vorzugeben? Ich mein Pagespeed und Konsorten bemängeln gern wenn Bilder keine festen Größen zugewiesen bekommen haben. max_height und max_width zählen dabei halt nicht als fix (was ja korrekt ist).
Ich weiß, mancher wird gern breitere oder schmalere Icons nutzen wollen also nicht quadratische, aber wäre es zugunsten SEO eventuell nicht sinnvoller auf ein einstellbares fixes Quadrat-Maß mit fixer height und width Angabe zu setzen? Stichwort CLS (Cumulative Layout Shift).
Oder als Option, sich entscheiden zu können ob man quadratische Icons oder unegale nutzen möchte?
Oder übertreibts hier Google und co und ich mach mich sinnlos zum Ei gerade? :D ;)
 
otto schrieb:
Bitte hier noch eine Phrase hinzufügen:
Zum Vergrößern anklicken....
Für die nächste Version vorgesehen.
otto schrieb:
Und gleich eine erste Frage; die Größe des Icons in Pixel, betrifft das sowohl width als auch height oder nur eines von beiden? Denke mal beides
Zum Vergrößern anklicken....
Hier kommt mal wieder die beste Antwort:
It depends. :D
Aber ja in der Regel beides.

otto schrieb:
Gäbe es hier irgendwie ne bessere Möglichkeit die Breite und Höhe vorzugeben?
Zum Vergrößern anklicken....
Du kannst das CSS anpassen wie du es brauchst, ich habe das bewusst nicht vorgegeben und eine größere Flexibilität zu haben.

Ich habe sogar unterschiedliche Größen je Style.

An SEO hatte ich dabei keine Sekunde verschwendet, das ist bei mir nicht (mehr) im Fokus.

Du kannst ja einfach das CSS entsprechend anpassen, die IconSize wird an vielen Stellen verwendet, zum Teil auch als feste width.

Ich kann nicht mit festen Werten arbeiten. Wenn ich das mal wieder anfasse denke ich mal drüber nach ob ich eine flexiblere Lösung finde.
 
Ja, in der less einfach die Angaben anpassen und fertig. Wobei das eventuell dann im Mobile-Mode Probleme machen könnte. Selbes Dilemma bei den Informationen - ohne max_width und max_height gehts eigentlich nur, wenn man im Template einzelne fixe Größen anhängig von der Bildschirmbreite vorgibt, was die Sache gleich wieder komplexer macht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben