What kind of event handling bugs? I'd set the hack for all images on es.pokemon <http://es.pokemon.wikia.com/wiki/MediaWiki:Common.js#Transparencia_en_im.C3.A1genes_PNG_en_IE> and I didn't had any problem about events
2007/10/16, Christian Williams wrote: > 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 > _______________________________________________ Wikia-l mailing list [email protected] http://lists.wikia.com/mailman/listinfo/wikia-l
