Dan, You're almost absolutely right. :) First, here's some background on the Quartz skin project. When we were putting the Quartz skins together, there was a grand plan to have a colour picker page which would automatically generate the images for you. Smoke and Slate, along with Beach, Brick, Sapphire, and Gaming (which will roll out shortly) are all fairly straightforward colour combinations (no patterns or background images... well, I guess Gaming does). Anyway, the thought was that the colour picker would mask the image complexity.
I realize that the header graphic and the article bar graphic are difficult to understand because the images don't really look like the page elements that they construct. I'm using a CSS technique referred to as "image sprites". With sprites, a single image is repurposed through CSS positioning to increase load time and decrease file counts and server roundtrips. Part of this technique often requires for portions of an image to overlap other portions of the image. Transparency causes big problems when trying to do this, because as you noticed, the other part of the image shows through the transparency. PNG images are great because they allow alpha transparency, not the bitmap transparency that can be achieved with GIF images. Bitmap transparency is either 100% transparent or 100% opaque, alpha transparency can be any percentage which allows the edges of an image to blend into its background. The problem lies in Internet Explorer 6.0's support for PNG. Natively, IE6 does not support alpha transparency in PNGs. There is a hack though, by using Internet Explorer's own proprietary AlphaImageLoader filter, but it once again defeats itself by leading to event handler troubles (clicks won't be detected). Once again, there's another somewhat recently discovered hack to overcome the event capturing bug. In short, it's possible, but a big pain for all involved. It means more CSS for you and I to write to customize the skin elements. After realizing the problems with blending the header into a background image, I started a project to convert the GIF images used in Quartz to PNG. The header is working, but the other parts aren't ready yet. Before releasing this change, we'd have to figure out a good way to roll the changes out to the Quartz skin so that everyone who has already customized their skins with GIF images aren't affected. There is a way to achieve what you're trying to do with the current infrastructure of the Quartz skin. Take a look at halo.wikia.com. I included a portion of the background image in the header image. Then, to keep the two in-step, the main background image is aligned to the top right. When the browser is resized, the background image shifts to the right, so the separation between the two images can't be noticed. I've learned a lot from the whole Quartz skin project. When taking designs from Photoshop to XHTML and CSS, I've always been able to spot the most technically efficient ways to implement the designs. In trying to customize my own work and from working with Annie on the Quartz customization guide (on inside.wikia.com), and of course reading your email this morning, I've learned that technical efficiency isn't enough when others need to build upon my work. I'll press to get the header PNG change fully tested and rolled out, since it is probably the most difficult piece to customize, and will of course apply my learnings from this project toward future projects. Thanks Dan. -Christian On Oct 14, 2007, at 5:39 AM, DanTMan wrote: > I find the image setup used to make the headers in the Quarts skins to > be /*extremely*/ poor. > > Other than my absolute dislike of the .gif which has been replaced in > nearly every good design spot you can find on the internet with the > .png format. The way the image for the header itself is split up is > extremely poorly done. > > It's nearly impossible to line things up to fit pixel by pixel with > the > other parts of the header and even worse you can't match it with a > background, furthermore the way the header image splitting is designed > causes it to be impossible for you to fix that by adding transparency, > because if you add transparency then other parts of the image show > through. (If you make the background area of the curve in the header > transparent, then the strait background of the header shows > through) and > you can't make that spot transparent, because if you do, then > blocks of > transparency start showing up inside the header area and also in > the top > bar. (Which makes me note, shouldn't be tiny menu area up top get it's > background image from a different area of the image, not the same one > used for the bulk of the search area so you can style that with > something special to, and especially since they are shared it's > impossible to line things up) > > It took me probably about an hour of fooling around with the image > trying to find out where the badly positioned parts of the image > went in > the header to finally give up on giving the GaoGaiGar wiki a nice > header. > http://gaogaigar.wikia.com/index.php? > title=MediaWiki:Quartzslate.css&useskin=quartzslate > > I first tried with a transparent curve background, but the search > area's > background showed through. > I tried adding the grid background to the header, but nothing lined up > with each other, and worse the image wasn't even evenly distributed > horizontally so it's impossible to get a sane grid out of the header > because it is broken by the non-uniform repeat. > Then I tried removing the vertical bars from the grid, and just going > for something horizontal. Unfortunately because the top menu and the > bottom of the search area's background use the same area, it was > impossible for me to create even a uniform set of lines, I tried to > create a bit of an odd one, but the positioning was so poor that I > couldn't even get it to work putting the lines in odd places just so > that they could line up with each other in the header. > Then before giving up, I tried going back to transparency and > making the > curved background transparent, this time I tried to make a part of the > search area background transparent, and found out that the entire > thing > is repeated in the search area and also repeated inside of the top bar > giving me transparent areas all over the place. > > It just doesn't work out right. You can't create anything good with > the > header. > > -- > ~Daniel Friesen(Dantman) of: > -The Gaiapedia (http://gaia.wikia.com) > -Wikia ACG on Wikia.com (http://wikia.com/wiki/Wikia_ACG) > -and Wiki-Tools.com (http://wiki-tools.com) > > _______________________________________________ > Wikia-l mailing list > [email protected] > http://lists.wikia.com/mailman/listinfo/wikia-l > _______________________________________________ Wikia-l mailing list [email protected] http://lists.wikia.com/mailman/listinfo/wikia-l
