Usage and Settings


Once installed, a new toolbar button will appear on while navigating your site. Clicking this button opens a code editor where you can write CSS. Click the 'Save and Refresh' button or Ctrl/Command + S to save your CSS and apply it to your site immediately. You can leave the the editing window open while navigating your site, to continue to add custom styles.

Dashboard configuration options

The Settings page under Theme Styling Tool in the dashboard provides some further configuration options:

Allow CSS Editing

This option enables the additional toolbar button on the toolbar. You can disable this to hide the button from editors. Once you have finished styling a site it is recommended to uncheck this option.

Additional Stylesheet Enabled

This option controls whether the additional CSS styles you have written will be applied to the site. You can disable this option to turn off the styles withoout deleting them.

Storage Location 

By default the styles are stored in concrete5's configuration file, but this option allows you to save the additional CSS in a file. You will need to ensure that you have the correct permissions set to create and save to this file.

Prevent Caching

If your server has caching enabled and you are finding that styles are not refreshing during development, you can check this option to ensure that styles are served uncached.

CSS Tips

  • To avoid directly styling concrete5's interface, it is advised that you prefix all of styles you define with .ccm-page
  • You may need to write CSS with a higher specificity than existing styles to apply the changes you need
  • Note that CSS styles will apply to all concrete5 pages, including dashboard pages.