Important: Adding custom CSS to your theme can have a negative effect on the appearance of your pages. The IT Help Center does not support custom styles created using this tool. By using this tool, you agree to take full responsibility for the appearance of your website, and that your website will remain in compliance with the University branding guidelines. This new tool adds a custom CSS file linked from all pages on your site. This file is the last of the CSS links in your page header — falling at the end of the “cascade” and can overwrite existing styles. Use this tool with care.

BU WordPress themes include styles for all fonts, colors, sizes, and layouts.  If you have special content on your site that requires custom Cascading Style Sheet (CSS) styles, you can now use the BU Custom CSS plugin.

When the plugin is enabled, website administrators will have access to an additional menu option under Site Design > Custom CSS. With this tool, you can add custom rules to style any special page content. You can validate your CSS file, preview the changes you’ve made, and roll back to previous revisions — just like standard WordPress pages and posts. The tool also provides a separate custom CSS function for the new mobile versions of all standard Flexi themes (coming soon).

Custom CSS editor interface

custom-css-ui

Custom CSS – Edit your custom CSS rules in this editing box, or copy/paste from an external CSS editor. The editing box is re-sizeable via the handle in the lower right corner.

Publish – Click the Preview button to open your site in a preview window where you can browse to the page(s) with your styled content. Click the Publish button to save your changes. Use the included link to validate your CSS via the W3C’s automated validation service.

Original CSS – This option disables your theme’s original CSS. This is a powerful and advanced option that should only be used by experience interface designers.

Revisions – You can review and restore previous version of your custom CSS, in the same way you restore a previous page.

Already using a custom.css file?

If you are already using a custom.css file that was set up by IS&T, this plugin will now replace your previous workflow. The first time you use this new tool, the contents of your previous custom.css file will be imported for editing. This will happen automatically for all sites currently using a custom.css file.

How do you get it?

Click the Help link in your WordPress sidebar to submit a ticket, and request the BU Custom CSS Editor plugin be enabled for your website.

No longer using custom CSS rules?

If you are no longer using custom CSS rules on your site, it is recommended that you request that the plugin be disabled.