Ok, nevermind I figured it out... I just didn't split up the grid... I actually have a bit of info for those using GIMP to change the colors of the Wikia Logo, a short tutorial on how to do it. I finally figured out a good way to do it since there is no direct tool that works that great.
* Open up the image and the /layers,channels,paths/ dialog. * Select Image > Mode > RGB to switch to RGB mode from Indexed so that we can work with the colors. * Right click on the "Background" layer where the logo is and select "Add Alpha Channel" * Add a new layer to the image and move it to the bottom, below the "Background" layer. * Select the color you wish to have as a background and use the fill tool to color that entire new layer the color you want as the background. * Select the "Background" layer. * Use the Color Picker tool to select the background color of the "Background" layer. (Keep the info dialog open) * Select Layer > Transparency > Color to Alpha * Click the color box, and type the Hex value from the Color Picker Dialog into the Hex value in the color selector. Ok that and the Color to Alpha dialog. (This will make the background transparent and now the layer behind it where you set the background color will define the background color) * Select Layer > Colors > Desaturate (This will remove the color from the Wikia logo and make it various shades of white so that you can easily colorize the logo) * Return to the Fill tool and select the color you want the logo to be. * In the options for the Fill tool, use the Mode drop-down to select "color" and also select "Fill whole selection" instead of "Fill similar colors" to make it do everything. * Fill the image... Instead of filling everything, it will colorize the whitened logo with the color you picked. ^_^ After that it would be a good idea to return your settings... And just before you save, select Image > Mode > Indexed and hit ok to return it to a optimized indexed format suitable for a .gif. ~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) DanTMan wrote: > 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 > > _______________________________________________ Wikia-l mailing list [email protected] http://lists.wikia.com/mailman/listinfo/wikia-l
