Dan, I'm not promising a colour picker. :) I said that early in the Quartz project, that was an idea that was being kicked around. As you pointed out, a lot of the folks who will customize will REALLY want to customize, way past anything that a simple colour picker could do.
I've uploaded a new header image to gaogaigar.wikia.com and set the main background to be aligned top right. The grid is now aligned. There are two PNG formats, 8 bit and 24 bit. 8 bit is binary transparency and 24 bit is alpha. IE6 will display either, but it will only respect the transparency of the 8 bit PNG. The transparent areas in a 24 bit PNG, even the 100% transparent areas, will render as gray. A single PNG can't be used for IE6 and 7 to render with alpha transparency in 7 and degrade to bitmap transparency in 6. I wish it were the case. Actually, I just wish that MS had done their PNG implementation correctly for IE6. I think we all do. :) The only way for IE6 to render a transparent 24 bit PNG is via the AlphaImageLoader filter, which causes the event handling bugs. It's a delicate dance, but I'm working on it. -Christian On Oct 15, 2007, at 7:14 PM, DanTMan wrote: > ^_^ Nice to see things are being changed... And interesting idea on > the > color picker generating the images. Just when that's done, please make > it also generate the CSS or otherwise make it so that you can both use > the color picker and also customize css. Cause there will be those > of us > who want to add extra css in addition to what we can get out of the > color picker. > In fact, I can guarantee you that every single Wikia ACG wiki will > require hard CSS in addition to what you can get out of the color > picker > because we have an @import at the top of the Common.css and also > currently just in Monobook.css but when quartz is done, we'll also be > including Quartz stuff. > > Nice to hear of things being converted from .gif to .png. Ya I know > that > IE 6 does not support alpha transparency, but the statement that IE 6 > does not support transparency in png's without extra hacks is > false. IE > 6 still supports the same kind of 100% or 100% off transparency > that is > supported in a .gif. And IE 7 supports that and also the alpha > transparency that other browsers have. So IE 6 still supports > transparency, and IE 7 has added alpha transparency. Also the > statement > that a .gif is better compressed or takes a smaller file size than a > .png is false. .png has very good compression, and the only reason you > see .gif's with smaller sizes is because other than people only > using it > for small images which don't even need compression, .gif does not > support more than 255 colors. The only reason you'll see a .gif with a > smaller size than a .png is because the .gif is a bad quality > image, and > the .png is a good quality image that has all the colors intact. And > still the .png still has good compression and file size. > The only valid use .gif's now have are for small buttons, and > animations. > > Ya, I know about image sprites, I've done that before and worked with > that kind of stuff. It works great in mouseovers and images that have > activation because the browser never needs to load another image when > you hover over multiple times. > > I get what is done with the halopedia, in fact, without even > looking at > that I already tried to do that. But while that works for that > image. It > didn't work for a 30x30 grid. Mostly because of the symmetry. > > About that color picker, do you think it could also generate the > Wikia_logo and Wikia_logo_small images based on a color set or > gradient > you pick. Many wiki match the logo's color to the color scheme. I did > that, but when I tried to swap the colors, it didn't work out so well. > http://gaogaigar.wikia.com/index.php? > title=MediaWiki:Quartzslate.css&useskin=quartz > My versions ended up bad quality and didn't work out to well. > Same thing for the Article_bars, as you'll see on that same page I did > one using a gradient, but I lost the curve. > ^_^ And I guess since we're on the matter... I did manage to do the > search icon, and the user_bar icon, but it was tricky and not everyone > will be able to. So why not generate those to. And just for the > heck of > it, I'll add in the bullet icons. > I notice issues with the New article/New wiki buttons, so in case > someone is customizing the sidebar/widgets coloring that might be > good to. > > ~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) > > Christian Williams wrote: >> 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 >> >> > _______________________________________________ > 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
