For some reason after finishing the Video Games theme I decided that AQ really needed a website theme based on the old version of MSPaint, so if you are also fond of the now-defunct graphics program and love using disorienting and confusing web interfaces, this theme is for you!!

I might continue de-evolving some features of the site so they look even more like they were drawn in MSPaint, but I've spent maybe 5 hours doing this so I think I'd better stop for today.

Enjoy!!

I'm laughing... MS Paint and Windows 3.1 is OLD... ha... ha...
But I'm watching... and just finished doodling on the Paint update from last week... on W10. They also have a 3D version I haven't tried at all...
What is intriguing to me in both this one and the prior one... is the css coding
never had any experience with that before becoming just a user...
Will continue to just observe... perhaps you could also define how much image degrading is what... 8 colour? heavily pixelated or what... I did see the smaller 'peep' image... I can see that it might be hard to make a current resolution image look like an older res... a spec on what that would fit might be helpful... could you post a before and after shot of a simple one... to play with.

I loved drawing in MS Paint as a kid so looking at the interface is really nostalgic for me. As for future changes, I'm mostly done but I'd like to figure out how to change some of the site graphics (icons, etc) to look like they were drawn in Paint. Maybe add some more doodles off to the side.

Those are really amazing!

I haven't found a quick or easy way to change some of the site graphics like the icons purely with CSS. The background graphics are easy to change with CSS (which I see you've done!), but the foreground graphics are embedded directly into the HTML and aren't so easily changed (although I'd like to!)

I thought about turning a lot of those foreground images into background images like the attributes for boxes, but then they wouldn't print out on most people's clues since background images usually don't print.

So.... you're pretty much stuck with the foreground images that are provided. Although there is an interesting "filter" property you can use in CSS to tweak some of the images. For instance, in the 9-11 theme, I could use "img { filter:grayscale(100%) }" to turn all of the images into grayscale versions of themselves. But it's not so much that I'm using a different image in place of the default one, but rather just tweaking the current image to take out the color.

There aren't any filters available to turn images into 8-bit graphics or anything like that, though, so I don't think it'll help with your themes. But any of those CSS filters will work: blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate() and sepia(). (There's also a url() for "applying SVG filters" but I'm not entirely sure what that includes.)

Anyhow, while none of those will turn an icon into 8-bit images or Paint-like graphics, they might still help set an ambiance you're looking for. You could use the saturate() filter to over-saturate the colors which might give it a more 8-bit look or something. In any case, those filters are your best options for tweaking icons.

-- Ryan

Thanks for the tips! I haven't had much cause to use the image filters before, but they ARE fun. While I can get some pretty extreme results on the icons, it does make photographs on the site look truly terrible. I settled for a level of terrible-looking that allows you to at least see what the photographs are of while still giving the rest of the site's images a more 8-bit-looking color scheme.

I would be surprised if anyone used this theme long-term as their main theme on the site, but you could probably get used to it! Maybe next I'll make a theme whose point is to actually look good???

While I can get some pretty extreme results on the icons, it does make photographs on the site look truly terrible.

You can control which images the filters apply to--to a degree, at least. The icons, for instance, include the class "icon" and are usually PNG images while the images that are not icons usually don't specify any classes at all and usually aren't PNGs.

So you could apply a filter to just images that are icons with something like:

img.icon { filter:grayscale(100%); }

OR (which targets all links that point to PNGs)

img[src$=".png"] { filter:grayscale(100%); }

You could also target non-icons with something like which targets all img links that point to JPGs:

img[src$=".jpg] { filter:grayscale(100%); }

It's pretty amazing how much you can fine-tune a theme!

-- Ryan