Hinzufügen eines benutzerdefinierten Style Sheets

(Adding a Custom Style Sheet)

Das Hinzufügen eines benutzerdefinierten Stylesheets ist ein ziemlich unkomplizierter Prozess. Das erste, was Sie tun sollten, ist, die benutzerdefinierte SCSS/CSS-Datei zu erstellen. Sie können dies in fast jedem Texteditor tun.

Navigieren Sie dazu in der Verzeichnisstruktur zu THEME_DIR/custom/scss und erstellen Sie eine Datei namens custom.scss, falls diese nicht bereits existiert. Wenn das Verzeichnis /scss/ in Ihrem benutzerdefinierten Ordner nicht vorhanden ist, müssen Sie auch dieses erstellen. Wenn es das bereits tut, öffnen Sie es einfach und machen Sie Ihre Ergänzungen/Änderungen direkt in der Datei.

Diese Datei wird dann als Override zu den zentralen Stylesheet-Dateien des Themas kompiliert. Alles, was Sie in dieser Datei angeben, überschreibt Klassen und Standardwerte, die in anderen Bereichen des Designs zugewiesen wurden.

Sie können den Inhalt der Datei entweder im SCSS oder CSS formatieren. Gantry nimmt es automatisch auf und kompiliert es richtig.

Sobald Sie diese Datei hinzugefügt und Ihr benutzerdefiniertes CSS/SCSS eingefügt haben, wird Gantry eines von zwei Dingen tun. Diese Funktion wird durch die Einstellung des Produktionsmodus bestimmt. Sie erreichen diese Einstellung, indem Sie zu Gantry 5 Administrator > Extras navigieren.

Wenn Sie den Produktionsmodus auf Ja gesetzt haben: Sie müssen dann zum Gantry 5-Administrator navigieren, das Verwaltungspanel Styles auswählen und auf CSS neu kompilieren klicken, um die Outlines anzuzeigen, für die Sie das benutzerdefinierte Styling anwenden möchten.

Wenn der Produktionsmodus auf Nein gesetzt ist, kompiliert Gantry das CSS/SCSS automatisch neu, wenn Änderungen vorgenommen werden. In Zukunft werden mehr Entwicklungs- als Produktionsaktionen an dieselbe Einstellung gebunden sein, wie z.B. Cache, minifizierte oder erweiterte JS/CSS, etc.

Wir empfehlen nicht, die Dateien css/custom.css oder css-compiled/custom.css zu bearbeiten oder zu überschreiben, da jede dieser Änderungen beim erneuten Kompilieren der custom.scss-Datei verloren geht und/oder überschrieben wird. Du kannst reines CSS in die custom.scss-Datei einfügen und es wird gut funktionieren.

Dadurch wird Gantry angewiesen, das neue Styling zu übernehmen und auf die Seite(n) anzuwenden. Sobald Sie dies getan haben, sollten Sie Ihre Änderungen am Frontend sehen können.

Wenn Sie beim Klicken auf CSS neu kompilieren auf einen Fehler stoßen, liegt dies wahrscheinlich an einem Problem im SCSS/CSS. In diesem Stadium ist der Compiler ziemlich unversöhnlich und alle Syntaxprobleme können zu Problemen führen. Überprüfen Sie Ihren Code noch einmal, speichern Sie Ihre Änderungen in der Datei custom.scss und versuchen Sie es erneut.

Abhängigkeiten.scss / Dependencies.scss

Wir haben die Includes für Bourbon, Nucleus, Theme Mixins und Variablen in einer _dependencies.scss-Datei zusammengefasst. Sie können nun einfach diese eine Datei importieren, um alles zu haben. Verwenden Sie @import "dependencies "; in Ihrer custom.scss-Datei, um es zu importieren.

Weitere Informationen über Sass und SCSS

Wenn Sie neu bei Sass oder SCSS (Sassy CSS) sind, machen Sie sich keine Sorgen. Wir haben alles im Griff! Nachfolgend finden Sie einige Ressourcen, die Ihnen helfen, SCSS kennenzulernen und herauszufinden, warum es sich schnell zur bevorzugten Styling-Lösung für Webentwickler überall entwickelt.

Die SCSS-Syntax basiert zunächst auf dem traditionellen CSS. Es fügt in einigen der Funktionen und Abkürzungen, die durch Sass ermöglicht werden, hinzu und gibt ihm die Fähigkeit, in beiden Welten zu leben. Sie können traditionelles CSS in einer SCSS-Datei verwenden, aber Sie haben den zusätzlichen Nutzen von Verschachtelung, Mixins und anderen leistungsstarken Funktionen, die es einfacher machen, sofort loszulegen.

• Sass Grundlagen: Eine Einführung in die Funktionen von Sass, einschließlich Side-by-Side Vergleiche von SASS- und SCSS-Syntax.
• Erste Schritte mit Sass: Ein großartiger Führer für Sass-Anfänger.