Posted by dreamleaf on March 22, 2010 at 4:24pm
7 followers
| Project: | Bartik |
| Version: | 7.x-1.x-dev |
| Component: | Miscellaneous |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (fixed) |
Issue Summary
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.
| Attachment | Size |
|---|---|
| bartikCommentArrow.jpg | 60.77 KB |
Comments
#1
Hmmm, 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
#2
No, 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.
#3
Yeah, 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.
#4
Try 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.
#5
When we decide on the right approach we shouldn't forget comment-arrow-rtl.gif
Subscribing to take care of it.
#6
TSI, 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....
#7
Here 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:
#8
Hmm... 'edit' doesn't let you attach new images? :
#9
#10
I gotta get me a copy of Fireworks.. I just plain didn't know that!
#11
I meant I was going to take care of the RTL version if no one else will but you beat me to it ;)
#12
These look good. Are there any other images that assume there is a white background? If there are, we'll need to fix those too.
#13
Committed! 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.
#14
Automatically closed -- issue fixed for 2 weeks with no activity.