Thanks for the header. You mind giving a tip on the header? I'd like to know how many pixels at least vertically the header parts are offset from the background. I did it evenly when I did the Grid, but it didn't match up. So I'd like to know how far to offset a vertical grid.
~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, > > 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
