The Stylesheets that effect https://evenzur.com
A complex theme like Bateaux obviously uses many different stylesheets. Here’s an outline. Sorted by priority.
The Parent-Theme Stylesheet
is located here
This one of course should never be changed since it will be overwritten on every update of the Bateaux theme.
The Child-Theme Stylesheet
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 stylesheet||The Header of the child stylesheet|
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.
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
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.