From looking at the css it leads me to think that the comment-arrow.gif file (see attachment) should be transparent, ie. the background is declared as transparent but has an image file etc.
Looks fine as the theme is currently but if anyone changed the colour scheme or even a different tint/shade of the background colour the image would not look as neat (rather a white square with an arrow).
http://i39.tinypic.com/35n25g4.jpg - tinypic url for reference.
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | comment-arrow-rtl.png.zip | 788 bytes | inlikealion |
| #8 | comment-arrow-rtl.png | 265 bytes | inlikealion |
| #7 | comment-arrow.png.zip | 769 bytes | inlikealion |
| #7 | comment-arrow.png | 268 bytes | inlikealion |
| #4 | comment-arrow-png8.zip | 34.39 KB | dreamleaf |
Comments
Comment #1
Jeff Burnz commentedHmmm, that's a misalignment of the arrow, what browser are you using?
The arrow is meant to line up with the edge of the comment-text, like here: http://bartik.milkweedmediadesign.com/node/8
Comment #2
dreamleafNo, sorry, that was intentional... I moved it over using Firebug just to show that it wasn't transparent. The theme does actually have it sitting correctly so it's not placement but rather future usage that I was thinking of.
Comment #3
jensimmons commentedYeah, it would be good for this to be transparent — so when someone changes the background color of the site, this arrow works. Good call.
The thing is, we need to support ie6 — so it can't be a png-24 with transparency. I assume it will look pretty bad as a gif. So someone should make a png-8 with transparency. Which you can't do with Photoshop. You need either Fireworks or a command line tool.
I'll attach the original file and would love for someone to make a transparent image that will work well in ie6. That's an illustrator file, btw.
Comment #4
dreamleafTry these ones... I have photoshop cs4 and even though I've not tried before with png8 it looks like it works quite well...
One issue I thought of while doing it though is that the arrow needed whiting out over the comment border.. which is easy enough... but then the thinking comes to mind.. what if a user wants to recolour the comment boxes? Short of remaking the image I can't think of a solution...
I've attached 2 versions.. one has a totally transparent background.. the other with a white inner to match the comment box.
The problem with the arrow being totally trans is that it's inner will be recoloured by a background change, the problem with the filled version - will need editing if the comment box is altered.
Comment #5
tsi commentedWhen we decide on the right approach we shouldn't forget comment-arrow-rtl.gif
Subscribing to take care of it.
Comment #6
inlikealion commentedTSI, do you mean you are creating the image? The trick here is not just png8 as dreamleaf made with Photoshop. Fireworks can actually make what is called an ALPHA-TRANSPARENT png8.
This lets you have indexed, solid colors (think gif) but with 1 or a few transparent colors, too. In IE6 the semi-transparent colors are not rendered, so it falls back to a slightly jagged gif-like rendering, but everything else benefits from the transparency. In this case it will make the arrow blend when a new background color is applied to div#comments, though I agree that if individual comment posts get recolored a new image will have to be rendered.
I'll supply alpha-transparent png in just a second....
Comment #7
inlikealion commentedHere is the alpha-trans comment-arrow.png:
EDIT: I didn't see the comment-arrow-rtl.gif, but I assumed it was the exact same as comment-arrow.gif but horizontally reversed. If so, here is a version of that, too:
Comment #8
inlikealion commentedHmm... 'edit' doesn't let you attach new images? :
Comment #9
inlikealion commentedComment #10
dreamleafI gotta get me a copy of Fireworks.. I just plain didn't know that!
Comment #11
tsi commentedI meant I was going to take care of the RTL version if no one else will but you beat me to it ;)
Comment #12
cweagansThese look good. Are there any other images that assume there is a white background? If there are, we'll need to fix those too.
Comment #13
jensimmons commentedCommitted! Thanks everyone.
I believe I got these files into CVS properly, but let me know if I didn't. Files in CVS can be tricky.