CSS

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

Deutsch / German

Clone this wiki locally

style.css file in the framework and the child themes

Both files are needed to give WordPress information about the used theme etc. No CSS commends are included. If you want to create a new child theme, WordPress needs these informations in the style.css:

/**
* 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: Inpsyde GmbH
* Tags: white, black, grey, theme-options, threaded-comments
* Template: xtreme-one
*/

The last line is especially important: Template: xtreme-one. WordPress uses this to tell if it is an Xtreme One child theme.

YAML

Xtreme One uses the CSS Framework YAML. Please don't change or update YAML. When a new YAML version is released, we will embed it soon. All style sheets of the framework are in /xtreme-one/css/.

Childtheme - own Stylesheets

The child theme's style sheet must be named theme.css and can be found in the child theme in css/screen/. The file is automatically added to the production(-min).css by Xtreme One. This means you don't have to register style sheets with WordPress.

Responsive Stylesheet

With the activation of the "Responsive Design"-Feature under settings, an additional file is included in the production(-min).css. This file must be created in the css folder and have the following name: theme.responsive.css All your media queries and style details for the responsive design can be added to this file. This way, no unnecessary CSS rules are loaded when deactivating the “Responsive Design” feature.

Custom navigation style sheets

Xtreme One lets you create your own navigation style sheets. You just have to create a /css/navigation/ folder in the child theme and save the style sheet there. The style sheet will then be available in the selection box in the backend. Put the file name of the style sheet before your commands (the best way is to use the existing navigation style sheet from the framework for orientation). The list elements' IDs and classes depend on whether you use pages, categories or the WP_Nav_Menu. They are created by WordPress.

Generating Style Sheets

With the settings from Generate Theme, the framework creates these 3 style sheets, which are written into the output/id_des_blogs/ folder:

  • xtreme_basemod.css - with the layout width settings, the individual layouts, etc.
  • xtreme_patch.css - for older browsers
  • production(-min).css

Style Sheet Order

These CSS files will be included in the production(-min).css in the given order:

  1. /yaml/core/slim_base.css
  2. /output/id_des_blogs/xtreme_basemod.css
  3. /css/navigation/shinybuttons.css– depending on your chosen navigation style sheet
  4. /css/navigation/descriptive.css– depending on your chosen navigation style sheet
  5. /css/screen/layout.css– predefined layout elements
  6. /css/screen/forms.css– YAMLs form elements
  7. /css/screen/content.css– general typography, widgets, comments, pictures, etc.
  8. /xtreme-indoor/css/screen/theme.css– the child theme style sheet
  9. /xtreme-indoor/css/screen/theme.responsive.css– the responsive child theme style sheet
  10. /css/print/print_003.css– print style sheet

Debugging

If you used the following setting in your wp-config.php:

define( 'SCRIPT_DEBUG', true );

the production.css will be embedded in your theme. It will import all relevant style sheets with the @import rule. That way, you can debug the provided CSS when there are displaying errors. In live operation, it is wise to use this setting:

define( 'SCRIPT_DEBUG', false );

With this setting, an optimized minimized production-min.css will be embedded in your theme. This file is generated by Xtreme One to allow the best loading times possible and contains all scripts mentioned above in the according order.