Ressourcen-Icon

XF2.1 Buttons in Themen und Beiträgen - CSS Hack 2.1

Keine Rechte zum Download

Tamara-Jasmin

Bekanntes Mitglied
Registriert
30. Mai 2018
Beiträge
593
Punkte
88
XF Version
  1. 2.2.10 PL1
XF Instanz
Hosting
PHP-Version
8.9
MySQL/MariaDB
8.033
Provider/Hoster
Artfiles.de
Tamara-Jasmin hat eine neue Ressource erstellt:

Buttons in Themen und Beiträgen - CSS Hack - Buttons in Beiträgen verfeinern

XF 2.1 !!!!!!

Ihr kennt ja alle die langweiligen Links unten ... Bearbeiten, Löschen, Geschichte usw...
Das hebt sich einfach nicht ab, ja ist sogar richtig langweilig.
Hab heute Nacht ein wenig gebastelt und auch das Umbruchproblem mit den Symbolen gelöst,

Im Anhang das neue Design - die Farben müsst ihr halt an eure eigene Umgebung anpassen.

Wenn es euch gefällt, lasst doch einfach ein Danke da ;)

Code (einzutragen in extra.less (Templates):

Code:
/* Buttonleiste...

Weitere Informationen zu dieser Ressource...
 
Bitte achte bei deinen Ressourcen auf die richtige Kategorie. Dies ist kein Sprachpaket sondern eine Template-Änderung. Ich habe deine beiden Ressourcen mal verschoben.
 
Sorry ;) hatte nur AddOns und Hacks gelesen ...
Übrigens ist die Schrift so gut wie nicht lesbar : klicke auf dieses Feld um den code in voller Grösse anzuzeigen. Hellstes Gelb auf weissem Hintergrund ... hmmmm

LG: Tammy
 
Für die einfache Variante kannst du dir mal als Beispiel den Code anschauen. Das ist der XF2.1 Syntax für die FontAwesome Integration in die LESS.
CSS:
.actionBar-action
{
    &.actionBar-action--report:before {.m-faContent("@{fa-var-bell}\20");}
    &.actionBar-action--edit:before {.m-faContent("@{fa-var-pencil}\20");}
    &.actionBar-action--delete:before {.m-faContent("@{fa-var-eraser}\20");}
    &.actionBar-action--warn:before {.m-faContent("@{fa-var-exclamation-triangle}\20");}
}

Screenshot 2018-12-01 23.14.53.png

XenForo hat in der Version 2.1 alle Icons von FontAwesome in der setup_fa.less deklariert und du brauchst nicht die \f5f2 als content nutzen. Du kannst direkt im Syntax bleiben und die Icons beim Namen nennen. Auch brauchst du nicht jedesmal den font-style aufrufen, dies wird auch schon in der core_fa.less gemacht. Somit kannst du einfach im Stil einer LESS arbeiten.
 
Zuletzt bearbeitet:
Zurück
Oben