How do I use the CSS Injector module to change my site name, slogan and block background colors?

To use the CSS Injector module:

  1. Click Configuration, then Development, then CSS injector.
  2. Click Create a new rule. You can also edit existing rules or delete rules.
  3. Add a Title for your rule to help you remember what the rule does.
  4. In the CSS code box add the full CSS rule including the selector e.g.,

#site-name a {color: black} – the hash tag identifies an id selector.

To change the site Name color and Slogan name

Here is what the Name and Slogan of a new Drupal site look like. The slogan was added for this demonstration.

Here is a rule which changes the color of the name, and makes the slogan text larger and blue. Notice you can add multiple CSS rules.

Here is the result.

To add a background color to the main menu block

Below,  the mouse is hovered over the main menu block. Notice the blue outline. But in the Firebug listing the highlighted text shows the unordered list (ul) and not the menu block div. Further up in the listing, you find the menu block id “block-system-main-menu”. This is the appropriate selector for adding a background color to the main menu block.

Here is a rule to change the background color of the main menu block.

Here is the result.