Formatting Using Cascading Style Sheets in Drupal
Return to Drupal Cloud Landing Page
On this page:
Adding CSS styles to a Drupal Cloud Site
Drupal offers a simple process to insert CSS styles into your site to change the look of your content. This process uses the CSS Injector module. The process requires some experience with HTML and CSS coding but does avoid working directly with style sheet files. The Injector module provides you with an interface for adding your style rules.
There are two steps.
- Review the html code to find the location of the content you wish to style within the code structure.
- Create a new CSS rule using the CSS injector module.
Locating the Code Element to Style
You can use a code inspection application which helps to pinpoint the location or simply read the code directly. Once you have found the right location to add your style, you create a new CSS rule to apply at that location.
Firebug, a useful developer Add-on for the Firefox browser will be used to illustrate the process of using the CSS Injector. You may use any developer tool which lets you inspect code.
Launch Firebug – your screen will look like this.
|
Be sure that HTML is selected so you can see the html code of your document. Then click the Element Inspector button. This allows you to roll your mouse over elements on your page. As you do this, each HTML element is outlined in blue on your screen and in the code listing. The code listing also shows CSS classes which have been applied. Be sure to move your mouse slowly so you don’t miss any elements. Click the element when you find what you are looking for.
The CSS rule you create with the CSS injector may target an id or class or an element within an id or class. You can expand and contract the code to see more or less, by clicking on the + or - sign.
Notice the blue box around the a tag. Above the highlighted code is an h1 with the id site name. Remember that if you target an a (anchor) tag, for example, you’ll want to use the parent id in the selector or your rule will apply to every anchor tag on your site.
|
For example use this.
#site-name a {color: green}
Not this.
a {color: green}
You may need to experiment by creating and modifying rules until you find the correct target. The key here is to match your CSS rule to the proper selector. It's not always obvious how to do that and may take some trial and error even for people experienced with HTML.
You might want to write the id or class name or copy and paste the information. Firebug may not be visible when you create the rule. You could make a quick reference list of all the id and class styles you target.
Using the CSS Injector Module to Add Styles to Your Site
- Click Configuration, then Development, then CSS injector.
- Click Create a new rule. You can also edit existing rules or delete rules.
- Add a Title for your rule to help you remember what the rule does.
- In the CSS code box add the full CSS rule including the selector.
|
This rule, for example
#site-name a {color: green; font-size: 150%}
would change the color of your site name to green and make the text larger. The hash tag identifies an id selector.
Here is the result.
|
A few things to note:
- you can place the CSS code for one, several, or all elements in a single rule (see 1 in screenshot below)
- you can name the rule by using the name of html element (see 2 in screenshot below)
- if you place the code for a single element per rule, you can disable the rule individually (see second screenshot below)
|
|