Sassy CP

Improving the ExpressionEngine 2 CP.


Project maintained by kylecotter Hosted on GitHub Pages — Theme by mattgraham

Sassy CP

Sassy CP is a twist on the common override.css. Sassy CP is built on the SASS css preprocessor. This allows for easy skinning of the CP to meet your needs.

Extending on the default CP theme, Sassy CP cleans up some rough edges, improves the user experience, and makes a great interface for your clients to use.

Installation

For an "out of the box" installation, where you won't be recompiling the SASS, follow these steps:

  1. Navigate to your "themes/cp_themes" folder.
  2. Add the "Sassy_CP" folder in to the "cp_themes" folder.
  3. Delete the "sass" folder inside the "Sassy_CP" folder.
  4. Open "system/expressionengine/config/config.php" and add " $config['cp_theme'] = 'Sassy_CP'; "
  5. Your control panel should now have the override applied.

Getting Sassy

Sassy CP is built upon the SASS preprocessor, and Compass framework.

You must be running SASS and Compass on your system to make use of the configuration of Sassy CP.

  1. Navigate to your "themes/cp_themes" folder.
  2. Add the "Sassy_CP" folder in to the "cp_themes" folder.
  3. Open "system/expressionengine/config/config.php" and add " $config['cp_theme'] = 'Sassy_CP'; "
  4. Your control panel should now have the override applied.
  5. Open Terminal, and navigate to the directory your ExpressionEngine site lives in.
  6. Navigate to "themes/cp_themes/Sassy_CP/sass" in Terminal and run "compass watch".
  7. Inside the "sass" folder, you will see all the files associated with Sassy CP. Open "_config.scss". Note this is referring to the SCSS file and not the Ruby config file.
  8. Inside ""_config.scss" you'll find a number of variables you can set and alter. In most cases, the $primaryColor and boolean variables will be the only ones you need to alter.
  9. Once you've made your change, save the config file and let Terminal recompile the CSS.
  10. Refresh the ExpressionEngine Control Panel, and your changes should be visible.
  11. If you are no longer going to alter the ExpressionEngine CP via Sass, delete the "sass" folder.

Pre v1.1.0 Updating

If you are using a version prior to v.1.1.0, where Sassy CP is no its own theme, follow these steps to update.

Screenshots

Changelog

Credits

Created by Kyle Cotter. Licensed under Creative Commons Attribution 3.0.

Check out EE Hash for the latest ExpressionEngine news and Cotter Interactive.