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
/** * 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.
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
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.
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
xtreme_basemod.css- with the layout width settings, the individual layouts, etc.
xtreme_patch.css- for older browsers
Style Sheet Order
These CSS files will be included in the
production(-min).css in the given order:
/css/navigation/shinybuttons.css– depending on your chosen navigation style sheet
/css/navigation/descriptive.css– depending on your chosen navigation style sheet
/css/screen/layout.css– predefined layout elements
/css/screen/forms.css– YAMLs form elements
/css/screen/content.css– general typography, widgets, comments, pictures, etc.
/xtreme-indoor/css/screen/theme.css– the child theme style sheet
/xtreme-indoor/css/screen/theme.responsive.css– the responsive child theme style sheet
/css/print/print_003.css– print style sheet
If you used the following setting in your
define( 'SCRIPT_DEBUG', true );
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.