override.css

AUD $9.95 Requires EE2

Requirements

override.css only has a few technical requirements:

• ExpressionEngine 2.4+ w/ default CP theme.
• A modern browser: Firefox, Safari, Google Chrome or IE9+ (graceful degradation)

Installation

1. Copy /themes/cp_themes/nsm_override to /themes/cp_themes/
2. Check that the file /themes/cp_themes/default/css/override.css exists in your ExpressionEngine install. If it doesn't then create the file.
3. Add the following to /themes/cp_themes/default/css/override.css:

   @import url("../../nsm_override/css/screen.css");

4. Login to the CP… ahhh pretty!

Upgrading

Upgrading to v1.2.0

v1.2.0 introduced folder structure changes. Override.css is now @imported into ExpressionEngines override.css file rather than replacing it. This allows you to add more than one override.css or even add your own rules.

1. Empty the old override.css file
2. Follow the installation instructions above

Customising CP colors

Override.css comes with 10 pre-defined colour themes. They can be found in /themes/cp_themes/nsm_override. To choose a different colour theme update /themes/cp_themes/default/css/override.css and replace

@import url("../../nsm_override/css/screen.css");

with

@import url("../../nsm_override/css/screen_color.css");

Recompiling the .scss source with Compass

Compass is an open-source CSS Authoring Framework that uses SASS to generate CSS files.

To create a new colour theme:

1. Create a new file in /themes/cp_themes/nsm_override/src/ and paste in the following:

   @import '_lib/copyright.scss';
   
   $color-accent: red;
   $color-accent-light: lighten($color-accent, 10%);
   $color-accent-dark: darken($color-accent, 10%);
   $color-accent-text: #fff; // when $color-accent is used as a background
   
   $color-link: red;
   $color-link-light: lighten($color-link, 10%);
   $color-link-dark: darken($color-link, 10%);
   $color-link-text: #fff; // When $color-link is used as a background
   
   @import '_lib/screen.scss';

2. In the pasted code above define both $color-accent and $color-link variables.
3. Compile your new CSS files.
4. Update /themes/cp_themes/default/css/override.css