Configuring CSS Injector

Changing the CCK Display settings for our reviews cleans things up quite a bit, but the Summary information still seems awkward. In Chapter 11, we cover some of the basics of theming the HTML that Drupal outputs, but for now we can improve things quite a bit by adding some CSS rules using CSS Injector. We'll use it to reduce the width of the Summary box and float it to the side of each review, turning it into a floating sidebar rather than a header at the top of each review. Here's how:

1. Go to Administers Site buildings-Modules (admin/build/modules) and enable the Other: CSS Injector module.

2. Go to Administer^Site configurationsCSS Injector (admin/settings/css_injector) and click the "Create a new rule" link to add a new CSS rule.

3. Name the rule "Floating Amazon fields," and enter the following text into the CSS code field. You can see the completed form in Figure 4-19.

div.fieldgroup { border: 1px solid lightgrey; float: right; padding: 10px 2px; width: 200px; font-size: .9em;

div.field-label-inline-first { float: left;

Not a fan of typing? Not to worry. This code is also available in the assets/ch04-reviews/amazon.css file in the book's source code for easy copying and pasting.

4. Click the Save button to add the new rule.

Depending on your web browser's settings, you may need to clear the browser's cache to see the changes to the stylesheet. Once you've done that, returning to one of the product reviews added earlier should look quite a bit more attractive, as shown earlier in Figure 4-18. What a difference a dash of CSS makes!

0 0

Post a comment