Show Sidebar Log in
Commons In A Box Logo
  • Home
  • About
    • Project Team
    • Logos and Graphics
  • Showcase
    • CBOX Classic Showcase
    • CBOX OpenLab Showcase
  • Demo
  • Get Started
  • Documentation
    • Technical Guide
    • CBOX Classic Guide
    • CBOX OpenLab Guide
  • Support Forums
    • CBOX Classic
    • CBOX OpenLab
    • Developers Forum
  • News

Adding and overwriting custom CSS

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.css from the Parent CBOX Classic Theme
  • Drop/Paste the file in assets/css of your Child Theme
  • Open design.css and 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/css in 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.ini found in /engine/config in 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!

To the next tutorial: Overwriting theme templates and using hooks

CBOX Classic Guide

  • Overview
  • FAQ
  • Installation Guide
  • Plugins
    • Core Plugins
    • Optional Plugins
    • Expert Mode
  • Configuring CBOX Classic
    • CBOX Classic Theme
      • Dashboard
      • Homepage and Slider
      • Widget Areas
      • Sitewide Wiki
      • BuddyPress vs. bbPress Forums
      • Handling Registration
  • CBOX Classic Theme Developer Guide

CBOX has its roots in the CUNY Academic Commons, which in turn was made possible through funding from The City University of New York itself.

CUNY Logo

CUNY Academic Commons Logo

City Tech logo

The Commons In A Box was made possible through the generous support of the Alfred P. Sloan Foundation.

Alfred P. Sloan Foundation Logo

NEH Logo

The CUNY Graduate Center has directly contributed to the CUNY Academic Commons, housing the project since its inception, and has contributed to CBOX through its GC Digital Initiatives.

CUNY Graduate Center Logo

CUNY Graduate Center Digital Initiatives Logo

Powered by Commons In A Box
css.php
Skip to toolbar
  • About WordPress
    • WordPress.org
    • Documentation
    • Learn WordPress
    • Support
    • Feedback
  • Log In
  • Register