CSS Injector

Module Type: 
Sitewide Tags: 

YaleSites standard themes provide a basic layout and color scheme but can be somewhat limited. To modify the styles in your basic stylesheet, you can use the CSS Injector module which allows administrators to “inject” CSS styles into specific regions or pages. 

Important Note: While this module is helpful in making minor adjustments to CSS styles on your site, it is not a replacement for Theming. It does provide a relatively easy way to make adjustments to your site for specific areas. Knowledge of CSS is required in order to use this module.

Enabling the CSS Injector module

The first thing you need to do is to enable the CSS Injector module:

  1. Click on Modules from the toolbar and locate the CSS Injector module
  2. Click on the check box and then the Save Configuration button at the bottom of the page.  

Adding a rule to the CSS Injector

Once the CSS Injector module is enabled, you can add a rule to define the style you want to create:

  1. Select Configuration from the Administration toolbar then Development -> CSS Injector.
  2. Click on the link Create a new rule to begin the process.
  3. Enter the title for the CSS rule.
  4. Enter the code that you want to use to define your style.
  5. You can indicate which pages you want to change the style of or if you want the change to affect all pages. It is highly recommended to check All pages except those listed and list admin*, node/*/edit and node/add* as pages to restrict. This prevents the admin interface from taking on the styling properties created in the CSS Injector Rules. 
  6. IMPORTANT: Uncheck the Preprocess CSS checkbox.