The Stylesheets that effect https://evenzur.com

A complex theme like Bateaux obviously uses many different stylesheets. Here’s an outline. Sorted by priority.

inlinehighest priority
definitions in here will overwrite all others
Change in Customizer/ Additional CSS
/themes/bateaux-child-rse01/style-custom.csswill overwrite all stylesheets belowChange here 
/themes/bateaux-child-rse01/style.csswill overwrite the parent stylesheet definitions
it is desirable to have all custom CSS definitions in here
Change here 
/themes/bateaux/style.cssdo not edit, this stylesheet will be overwritten on every update of the Bateaux theme/

The Parent-Theme Stylesheet

is located here /themes/bateaux/style.css

This one of course should never be changed since it will be overwritten on every update of the Bateaux theme.

The Child-Theme Stylesheet

located here /themes/bateaux-child-rse01/style.css

This stylesheet is edited served-sided, in our case via Dreamweaver. It basically should be used to overwrite styles defined in the parent-theme stylesheet of Bateaux. But, after every update of Bateaux, it may need to be adjusted, since the parent-theme stylesheet may have changed.

For this stylesheet to take effect, it is crucial that the version number of this stylesheet matches the version number of the parent stylesheet.

The Header of the parent stylesheetThe Header of the child stylesheet
/*
Theme Name: Bateaux
Theme URI: http://www.bateauxtheme.com/bateaux
Description: A creative multi-purpose theme deliberately designed to fit any website.
Author: Twisttheme
Author URI: http://www.twisttheme.com
Version: 1.2.4
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, full-width-template, post-formats, sticky-post, theme-options, threaded-comments, translation-ready
Text Domain: bateaux
*/
/*
Theme Name: Bateaux Child RSE01
Theme URI: http://www.bateauxtheme.com
Description: Bateaux Child Theme.
Author: Twisttheme
Template: bateaux
Version: 1.2.4
Text Domain: bateaux-child-rse01
*/

Secondly, to check modifications done to child stylesheet, you need to empty your browser cache, to force your browser to reload all styles. If you don’t it may take several rounds until the child stylesheet is actually read out.

The Customizer-Stylesheet

located here /themes/bateaux-child-rse01/style-custom.css

Normally, in a clean install of a the Bateaux Child-Theme that ships with Bateaux, it sits inside your uploads folder. If you change your upload folder, like we do on evenzur.com, it sits in custom upload folder, in our case /files/style-custom.css.

This stylesheet contains all style modifications done in the Customizer inside WordPress admin, and also contains all custom styles edited in Customize/ Custom Code.

This stylesheets is recreated and/or overwritten every time you change settings in the Customizer, the Font Manager, and probably the Customizer Manager as well. So again, and even though this stylesheet is available in Dreamweaver, it should not be changed server-sided, as changes will be overwritten at some point.

The Inline-Stylesheet inside every page

This stylesheet isn’t a file in its own, it’s rather written into every head of every page of your website. It contains

This stylesheet contains all custom styles edited in Customize/ Additional CSS.

In a perfect world, it is blank, and all customization is done in the stylesheets mentioned above, to reduce loaded stylesheets. Anyway, this stylesheet can be used to quickly test new style definitions without emptying the browser cache. But after testing, these styles should be ported to either to the Bateaux Child-Theme Stylesheet or Customizer Stylesheet.

Changing Stylesheet definitions

When changing stylesheet definitions, make sure you

  • use the same selectors as in the parent style sheets, that you want to overwrite
  • be aware to address the styles specifically or generally, depending on how global you want to styles the be applied.

 

The active child theme CSS of Bateaux Child RSE01 is located inside the child themes folder in Themes. All custom CSS is located inside style.css in that folder. We don’t use the feature of Additional CSS in the Customizer of Bateaux (currently, there are still CSS fragments there that need to be ported to style.css in the child theme folder).

Important

  • For the style.css to work, make sure it is the same version of the parent theme CSS file. To check, look inside the header where all style sheets are referenced. Our child theme needs to have the same version number.
  • Style definitions in style.css mostly take effect only after deleting the browser cache! So if you don’t immediately see the new style definitions working, you might have to delete the cache first. To quickly test style definitions, use Customizer/ Additional CSS from within the WordPress Backend – they take effect immediately – and port them to style.css at a later stage.

Comment

There is no comment on this post. Be the first one.

Leave a comment