^_^ 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
