Before you get started with your development always turn on the special “Developer Mode”. Developer Mode turns on some behind the scenes magic that makes your life easier as a developer. To turn it on add the following to functions.php of your Child Theme or to wp-config.php
define( 'INFINITY_DEV_MODE', true );
One of the first things most people want to do, is create a unique looking theme for your project. Change the colors, replace some images and finally add that nice colory animated .gif as your body background (that was a joke, please don’t do that!).
Normally you would start overwriting the parent theme CSS through style.css in your Child Theme for this type of stuff. This is perfectly fine to do in CBOX Classic as well, if you’re planning to make just a few adjustments. But if you need to make more changes and want to create something from a blank slate, we’ve created a better solution for you. You can completely overwrite specific part of the CBOX Classic CSS by something we like to call Cascading Assets
Overwriting CSS files from assets/css
If you took a look at the parent CBOX Classic theme you’ll find a folder called assets/css
In that folder you’ll see the following files.
buddypress.css buttons.css CBOX-wireframe.css design.css global.css grid.css icons.css layout.css responsive.css typography.css wordpress.css
These files contain all the CSS for the theme, split into smaller files. These files get automatically merged and written to a file called dynamic.css. This file is then cached and enqueued on the front end of the site. When you have Development Mode turned on this happens on every page request, so that it’s easy for you to develop/debug your CSS.
The real magic happens if you want to change one of these CSS files. All you need to do is copy over the CSS file from the Parent Theme to the Child Theme and CBOX Classic will automatically use that file instead of the one found in the Parent Theme. Go ahead and try it!
- Copy the file
assets/css/design.cssfrom the Parent CBOX Classic Theme - Drop/Paste the file in
assets/cssof your Child Theme - Open
design.cssand make changes to it. - Witness the Magic and get yourself a white russian!
What you’ve done now is overwritten all the design elements while keeping all the core wire-framing CSS that holds the theme together. This makes it incredibly easy for you to create theme variations without having to dive in and learn all the in and outs of the CSS.
You could create several Child Themes that simply overwrite the design.css file and add some new images and textures to quickly create theme variations. This can be incredibly handy in Multisite Networks for example (where you can let your students choose different theme variations while still maintaining your one Parent CBOX Classic Theme).
You can overwrite every single stylesheet in the list. Overwrite the default icons, buttons or change the global typography. It’s all really easy.
Completely Disabling CSS files
There are several occasions where you might have a bunch of previously written CSS from an existing project. Usually that CSS is in style.css of your old theme. In a lot of cases that CSS already has styling for global elements like buttons, list styles and such. In these cases sometimes it’s easier to completely disable certain stylesheets from CBOX Classic from loading and add your old CSS to style.css of your chilld theme. We made it very easy for you to do this using our powerful ini files.
Open up engine/config/infinity.ini in your Child Theme and add the following snippet to it:
[feature] ; Stylesheets infinity-global-style = on infinity-typography-style = on infinity-layout-style = on infinity-wordpress-style = on infinity-buttons-style = on infinity-grid-style = on infinity-design-style = on infinity-icon-font = on infinity-icons = on cbox-wireframe = on
All you need to do is flip the switch for the stylesheet you would like to turn off. This could not be easier;
infinity-icons= off infinity-buttons-style = off
Would get rid of all the icons and the buttons. Disable as much as you need to make your life easier.
Pro Developer Tip
You can easily create new “features” for your child themes. These features can trigger stylesheet/scripts/theme options or snippets of code from being loaded. You can read all about it in the last section of this tutorial series!
What we’ve learned in this tutorial
- Always turn on “Developer Mode” when you start making changes
- Easily overwrite stylesheets located in
assets/cssin your child theme by creating a new css file in your child theme which has the exact same name as the core stylesheet - Completely disable a stylesheet from loading by using
infinity.inifound in/engine/configin your Child Theme
That was fun wasn’t it? Let’s move on to the next tutorial where we look at overwriting templates and using the WordPress hooks system!
