The amazontools module is not big into using CSS. Many items don't even have classes so they can't be styled.

This patch makes two modifications to the current 4.7.0 version (amazon.module,v 1.29.2.18 2006/08/24 00:05:10 prometheus6). One is that it gives a class of "amazontools" (otherwise unused, I checked) to the block of information that includes the cover image and such. I personally use this to align that block to the right, because otherwise it craps up your layout. The other is that instead of just inserting an IMG tag for ratings, it kicks out <span class="amazon-rating-n" alt="n"></span> where n is the rating, 1 to 5. I also developed a style sheet to utilize the original ratings images. It looks something like this:

.amazon-rating-1 {
  width: 20px;
  height: 20px;
  background: url(images/rating1.gif);
  display: -moz-inline-box;
  display: inline-block;
  vertical-align: top;
}

The only difference between this style and -2 (and so on) is that the width is the rating times 20px (rating of 5 has a width of 100) and both the end of the name of the style and the ratingn.gif are incremented. Instead of filling the span's contents with these images, you could instead fill it with repetitions of a single image. You could also use javascript to set the span's contents instead of CSS.

CommentFileSizeAuthor
#7 amazon.css_0.txt1.63 KBhyperlogos
#6 amazon_css.patch2.78 KBhyperlogos
#1 amazon.css.txt836 byteshyperlogos
css_21.patch2.09 KBhyperlogos

Comments

hyperlogos’s picture

hyperlogos commented
StatusFileSize
new amazon.css.txt836 bytes

Here's the CSS file I promised.

hyperlogos’s picture

hyperlogos commented

And, incidentally, here's the style I use to style the table in the node layout:

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

I put this style into my theme. I didn't want to include it in the provided CSS file because it's a stylistic decision. Note that it's a good idea to have your node view clear floats, perhaps with a span at the top, if you plan to use floats in node bodies.

Prometheus6’s picture

Prometheus6 commented

I'm not ignoring you, just got my hands full for a while.

hyperlogos’s picture

hyperlogos commented

No worries, as long as the patches are here, they are available to people. I rolled my other patch into this patch, since they were both addressing the same issue.

hyperlogos’s picture

hyperlogos commented

Uhh, and maybe the alt attribute for the span should go. I didn't even notice I was doing that. Then again, how is it replaced? I want to preserve accessibility. I'll look into this, and maybe produce an alternative patch.

hyperlogos’s picture

hyperlogos commented
StatusFileSize
new amazon_css.patch2.78 KB

Okay, I re-redid my patch. The CSS sucks more (for some reason, I can't split the styles up; I'm not sure why these work but I just lifted them) but the layout is now accessible.

Since you can't set alt tags on background images, they have no screen reader support. This version replaces the img tag with the following code:

rating: <span class="amazon-rating-3">3<span></span></span><br />

(at least as an example for an item with a rating of 3.)

This lets us use the replacing text by an image technique; the number is there, and will show up if the image does not load; the image is loaded in its own span, and z-index'd to lie on top of the number. It degrades gracefully (so far) back to the digit if nothing else.

If someone else wants to fix the style sheet (to be attached to my next comment) to be less bloated that would be great, it's 1667 bytes right now. I doubt it will hurt anyone though :)

This is sort of a patch rollup for me; it includes my block-br patch, the amazontools class on the table in the middle of your node content, and the above-described modification for styling ratings. css file in the next comment, goes in the module dir.

hyperlogos’s picture

hyperlogos commented
StatusFileSize
new amazon.css_0.txt1.63 KB

Enclosed is the amazon.css file to go with the above patch. This is the accessible version.

GC_Chi’s picture

GC_Chi commented
Status: Active » Needs work

This patch does not properly pass the the Associate ID (specfied in admin > settings > amazon) to the linking URL that gives credit for the sales referrals. Users will not make money from this.

Prometheus6’s picture

Prometheus6 commented

I don't think it's this patch...haven't looked yet but there IS a bug with the associate id in the process of being fixed.

http://drupal.org/node/88759

Prometheus6’s picture

Prometheus6 commented
Assigned: Unassigned » Prometheus6
Status: Needs work » Closed (won't fix)

Okay, I'm not using thi spatch because I want to be a simple as poosible. I wrapped css classes around the three types of output (block = amazontools_block (a div tag), prepended to node body = amazontools_table (a table, obviously) and related product link = amazontools_related (this is also a table). Folks can use the 'cascading' part of CSS to get more specific.

MGParisi’s picture

MGParisi commented
Status: Closed (won't fix) » Closed (fixed)

sorry 4.7 is no longer supported!, work has been done to support CSS in version 5.X.Dev