CSS Anpassung Generierung

Robert Windisch edited this page Jul 25, 2015 · 1 revision

Deutsch / German

Clone this wiki locally

style.css-Datei im Framework und in den Childthemes

Beide Dateien werden benötigt, um WordPress Informationen über das verwendete Theme etc. mitzuteilen. Es sind keine CSS Anweisungen darin enthalten. Möchten Sie ein neues Childtheme erstellen, benötigt WordPress in der style.css folgende Informationen:

/**
* Theme Name: Xtreme Minimalist
* Theme URI:   https://github.com/xtreme-themes/xtreme-Minimalist
* GitHub Theme URI: xtreme-themes/xtreme-Minimalist
* Description: A stylish child theme of Xtreme One.
* Version: 1.0
* Author: Inpsydde GmbH
* Tags: white, black, grey, theme-options, threaded-comments
* Template: xtreme-one
*/

Wichtig ist hier vor allem die letzte Zeile: Template: xtreme-one. Damit erkennt WordPress, das es sich um ein Childtheme von Xtreme One handelt.

YAML

Xtreme One verwendet das CSS Framework YAML. Bitte nehmen Sie keine Änderungen oder Updates an YAML vor. Sollte eine neue YAML Version erscheinen, werden wir Sie zeitnah einarbeiten. Sämtliche Stylesheets des Frameworks befinden sich in /xtreme-one/css/.

Childtheme - eigene Stylesheets

Das Stylesheet des Childthemes muss theme.css heißen und befindet sich im Childtheme in css/screen/. Diese Datei wird automatisch von Xtreme One in die production(-min).css eingefügt. Sie müssen also keine Stylesheets an WordPress registrieren.

Responsive-Stylesheet

Bei Aktivierung des "Responsive Design"-Features unter den Einstellungen, wird eine weitere Datei mit in die production(-min).css inkludiert. Diese Datei muss im css-Ordner angelegt werden und wie folgt heißen: theme.responsive.css In dieser Datei können Sie alle Media-Queries und Styleangaben für das Responsive-Design einfügen. Somit werden bei der Deaktivierung des "Responsiv Design"-Features keine unnötigen CSS-Regeln geladen.

Eigene Navigations-Stylesheets

Xtreme One ermöglicht es Ihnen eigene Navigations-Stylesheets zu erstellen. Dazu müssen Sie im Childtheme einen Ordner /css/navigation/ erstellen und dort das Stylesheet speichern. Das Stylesheet steht dann im Backend in der Auswahlbox zur Verfügung. Stellen Sie Ihren Anweisungen den Dateinamen des Stylesheets voran (orientieren Sie sich am besten an einem vorhandenen Navigations-Stylesheet aus dem Framework). Die IDs und Klassen der Listenelemente sind abhänging davon, ob Sie Seiten, Kategorien oder das WP_Nav_Menu verwenden. Diese werden von WordPress erzeugt.

Stylesheet-Generierung

Das Framework erzeugt unter den Einstellungen bei Theme generieren folgende 3 Stylesheets, welche in den Ordner output/id_des_blogs/ geschrieben werden:

  • xtreme_basemod.css - mit den Einstellungen der Layoutbreite, den einzelnen Layouts usw.
  • xtreme_patch.css - für ältere Browser
  • production(-min).css

Reihenfolge der Stylesheets

Folgende CSS-Dateien werden in die production(-min).css in der angegebenen Reihenfolge inkludiert:

  1. /yaml/core/slim_base.css
  2. /output/id_des_blogs/xtreme_basemod.css
  3. /css/navigation/shinybuttons.css– abhänig davon, welches Navigatiosstylesheet Sie gewählt haben
  4. /css/navigation/descriptive.css– abhänig davon, welches Navigationsstylesheet Sie gewählt haben
  5. /css/screen/layout.css– vordefinierte Layouteelemente
  6. /css/screen/forms.css– YAMLs Formelemente
  7. /css/screen/content.css– generelle Typografie, Widgets, Kommentare, Bilder etc.
  8. /xtreme-indoor/css/screen/theme.css– Das Childthemestylesheet
  9. /xtreme-indoor/css/screen/theme.responsive.css– Das Responsive Childthemestylesheet
  10. /css/print/print_003.css– Printstylesheet

Debugging

Haben Sie in Ihrer wp-config.php folgende Einstellung gesetzt:

define( 'SCRIPT_DEBUG', true );

wird die production.css in Ihr Theme eingebunden. Diese importiert mit der @import-Regel alle benötigen Stylesheets. Dies ermöglicht es Ihnen bei Darstellungsfehler das ausgelieferte CSS zu debuggen. Im Livebetrieb ist es ratsam folgende Einstellung zu etzen:

define( 'SCRIPT_DEBUG', false );

Durch diese Einstellung wird eine optimierte minifizierte production-min.css in Ihr Theme eingebunden. Diese Datei wird von Xtreme One generiert um die bestmöglichsten Ladezeiten zu erreichen und enthält alle oben genannten Script ein der entsprechenden Reihenfolge.