How can I load an extra CSS file to style ContentBlocks differently?

Getting fancy with realistic previews of what content might look like on the front-end, or want to make some changes to the design of the canvas or certain input types? 

ContentBlocks doesn't expose a convenience method for loading additional CSS files currently, but it's incredibly easy to do thanks to the power of plugins in MODX. 

Create a new Plugin and enable the OnDocFormRender system event. In the plugin content, call $modx->regClientCss with the url to your CSS file, like this:  

<?php
$url = $modx->getOption('base_url') . 'assets/path/to/style.css';
$modx->regClientCss($url);

(If you also use Redactor, you could also use the redactor.css system setting - that will also inject the stylesheet into the manager page and would save you using the above plugin.)

As this will inject the CSS into the full manager page, you need to be careful about scoping your CSS properly. The ContentBlocks canvas is wrapped in a .contentblocks-wrapper div, and each of the input types has its own .contentblocks-field-<input type> class. There are also lots of other classes that can be used to target styling.

If you end up making changes to the way ContentBlocks looks, we would love to hear about that and consider including them in the next release.