CSS styling for drupal Amazon Associate Tools module

In working with the Amazon Associate Tools module, I found that it was not designed with CSS styling in mind. It in fact had no CSS associated with it. The default node view was a small table with the cover and basic information, which appeared above the content body. I personally float this right and give it some margin; this CSS does not appear in my patch, and instead is a part of my theme. Here's what I added to style.css:

/* amazontools */ table.amazontools { float: right; width: 25em; margin-left: 1em; margin-bottom: 0.5em; } /* end amazontools */

This will run it over to the right hand side and give it a nice gutter that scales up with the user's chosen font size. The table itself is sized based on font size, so it should fit its contents nicely - if anything, with room to spare.

This patch does three things:

1. It adds style="amazontools" to the table in the content view, as described above, making it themable.
2. It adds a
to the code that builds the "Amazon Recommends" block, which cleans it up, making it so that instead of saying "TitleReadTheReview" under the cover image, it says "Title" and then on a separate line, "Read The Review". This could have been done with CSS but that would be silly. Ultimately, it would make more sense for everything this module kicks out to be spanned and styled, but I don't feel like doing that today.
3. It replaces the tags used for ratings with a pair of nested spans, the outer of which is styled (meaning the inside one can be styled too, with a descendant descriptor.) It's styled with "amazon-rating-n", where n is the rating from 1 to 5. The following excerpt from the amazon.css file illustrates how these styles are written:
   
.amazon-rating-2 {
margin:0; padding:0;
position:relative;
width:40px; height:20px;
margin:0; padding:0;
overflow:hidden;
}
.amazon-rating-2 span {
display:block;
position:absolute; left:0; top:0; z-index:1;
width:40px; height:20px;
margin:0; padding:0;
background:url("images/rating2.gif") top left no-repeat;
}

   The result is a completely accessible rating; if the image is ignored then the text will be read, because it still exists. Elements with "display: hidden;" are typically lost, but "overflow: hidden;" simply hides the text, with screen readers (so far) ignoring the style.

This patch is meant to apply to what is currently the latest amazontools module:


/* $Id: amazon.module,v 1.29.2.18 2006/08/24 00:05:10 prometheus6 Exp $ */


To apply it, change to the amazontools directory, put the patch and the css file into that directory, and type:


patch -p0 < amazon_css.patch


After which you may delete the patch if you like - but leave the CSS there.

If you want to change rating images, don't forget to edit their sizes in the CSS.