The Style Switcher
Wondering about the style switcher? You've come to the right place.
How Does It Work?
Well, the style switcher is basically a feature that allows you to change the look of the site. You do it using the drop-down that should be located near the top of the page. The drop-down contains a selection of styles that you can pick from, and once you've selected one, you can press the "Change" button, and BOOM! the page will refresh and the style will change. If you then browse to another section of the site, the style should remain the same, provided you have cookies enabled on your browser.
The pages of the site are given all their color and style through a CSS stylesheet, which is a kind of document that tells your browser things about what the webpage should look like. The style switcher will, through a server-side script, apply a different stylesheet to the page if you select a different style. The actual code, including the text on the page, will therefore be the same in all styles - only the stylesheet changes. There are a couple of exceptions, but they're minor, just involving a snippet of extra code for browser compatibility or other convenience.
As an extra bit of fun, some of the styles differ in the site's slogan, "Where the smallest bugs live alongside the strongest dragons." The point of the slogan (that bugs and dragons are equal) is always the same, but the presentation varies.
What Do Those  Labels Mean?
Glad you asked. Here's a basic breakdown:
- This means that the style uses some relatively modern browser features. If you are using a very old browser, styles with this label may not work properly. (There are limits to what I'll label with this - there are a couple of unlabeled styles that won't work properly in Internet Explorer 6, for instance, but thankfully almost no one still uses that nowadays, and if you do you should really get a better browser.) Moreover, it means that the style is designed to be responsive, meaning it will adjust itself to fit comfortably on mobile devices with small screens. Styles not tagged with this will be shown zoomed out and may be awkward to use on mobile devices. Why? Well, the last of the non-[mod] styles was created in 2008. When I was making them I was worrying about Internet Explorer 6 and people with 800x600 desktop screen resolutions, not the occasional person accessing the Internet from their phone for some godforsaken reason. Oh, how the Internet has changed.
- This means that the style uses multiple or very large images in the layout and is therefore not recommended if your Internet connection is very slow, your data is limited, you just don't like waiting for images to load, or you like to browse with images turned off. Styles not with this tag should be quite light on your connection.
What Is the "ID"?
On any regular page of the site (one that shows the full layout and menu), you can add ?style=styleid (replace styleid with the ID of the style, obviously) at the end of the URL, and the page will appear in that style. This will NOT set the style cookie (meaning that if you enter another page, it will go back to the style you had before); it's thought as a previewing thing, mostly, and a quick way to link to what a particular page looks like in a particular style. For example, the style names below are linked to this page with those styles applied in this way - a good way to get a preview of each style while keeping the style you're currently using.
There is also a way to actually switch your style with a link, by visiting the page /set-style?style=styleid. There is no reason to do this normally, but if you want to use some of the deprecated styles listed near the bottom of this page, they provide links that you can use to switch to them even though they aren't in the drop-down.
What Are the Different Styles?
Currently, these are the active styles on the site:
- Butterfree style [mod] (ID: butterfree)
- A minimalist, light purple style featuring Butterfree. It has a three-column layout on desktop browsers but falls back to a dropdown on smaller/mobile devices.
- Voice of the Forest style [img][mod] (ID: celebi)
- A pleasant light green, image-based responsive style, starring Celebi. This is largely based on the Modern style layout (see below), but with different colors and tweaks. Slogan is unchanged.
- Roar of Time style [mod] (ID: roaroftime)
- A dark blue and black style for the dark mode lovers, also based on the Modern style layout.
- Modern style [img][mod] (ID: modern)
- Modern style was originally created for April Fools' Day 2015; the original version, "Daybreak Recreation & Activities Group Productions style", can be found under Deprecated Styles below. It has a white background, large near-black text, a sticky drop-down menu at the top, affiliates at the bottom, and is made to be responsive with mobile devices in mind.
- Minimal Dewgong style (ID: dewgong)
- A simple, basic, minimal style; white with black text, three columns with the menu on the left and affiliates on the right. Starring (obviously) Dewgong.
- Axe-Murderer style (ID: nonie)
- This style has a black background and white text. It's a bit different because the affiliate bar is actually on the left and the menu is at the top in drop-down format. The slogan is also changed to "where nobody gets mercy, dragon or not". Starring Sneasel.
- Scyther Slash style [img] (ID: scyther)
- A Scyther-themed three-column layout, medium grayish green with black text. The slogan here is "Where the bugs don't slash up the dragons ...that much." The last two words are an addition made in this version of the style; I felt the old version (under Deprecated Styles below) needed a bit of a punchline.
- Shiny Ninetales style (ID: sninetales)
- A lavender style with black text, inspired by the colors of a shiny Ninetales. Slogan is unchanged, and the actual layout excluding the colors and banner is yet again a simple three-column setup.
- Nidoking Poison style [img] (ID: nidoking)
- Dark purple background with lighter purple navigation bars on the sides. The content stretches, but the navigation bars are fixed and use background images. Unchanged slogan.
- Bouncy Mew style (ID: mew)
- The slogan has been changed to "Where, like, everybody is nice to each other and stuff ^_^" but it keeps to the basic three-column layout of Shiny Ninetales with a couple of rather minor tweaks. It's pink, if the Mew mascot didn't tell you.
- Hellfire style [img] (ID: hellfire)
- A dark, fiery, image-based style with Houndoom and Houndour as the mascots. Slogan is "Where everybody is equally doomed". The navigation here is done by drop-downs at the top of the page while the affiliates are on the right.
- Spectrum style [img] (ID: onecol)
- Spectrum style was made in celebration of the site's fourth birthday and is the only style to feature Pokémon from multiple different families - in fact, it features 30 different Pokémon in some way or another. It has a white background and various different colors for different purposes, as the name implies. The slogan is "Where your color matters no more than whether you are an insect or a mythical reptile", which is simply adding no discrimination by color into the equation. This style does not have any columns at all - the menu is at the top in drop-down form and the affiliates are at the bottom.
- Articuno Snowflake style [img] (ID: articuno)
- A light blue, wintery style that takes on the challenge of creating an image-based three-column style that nonetheless will stretch to fit any resolution or user font size within reason. I think it came out nicely, personally. The slogan has been changed to "Where the weak and strong are sheltered from the winter cold...".
- Torkoal Lava style (ID: torkoal)
- A simple, light orange and black style that I rather like. Three images, so it doesn't qualify for an [img] style. The slogan is missing this time because I couldn't be bothered to think of one. I'll probably add it in at some point.
There are some styles that are not in the actual styleswitcher drop-down. They may be failed attempts that looked generally horrible in my opinion, be thought of as easter eggs more than anything else, or have been replaced by a newer equivalent that would seem redundant to include along with the old one.
- Oldie style (ID: oldie)
- This style is very likely to hurt your eyes. When this site started, it was called "Butterfree's Pokémon Site" and looked like this, and because of the flexibility of the styleswitcher it was possible to recreate that look almost perfectly, so I couldn't resist the opportunity to try. It's not really meant for use - more just as something to invoke nostalgia in those who visited the site way back when - but if for some ungodly reason you want to switch your style cookie to it anyway, you can do so. There is no slogan in this style, as the slogan didn't exist when the site started.
- Old Hellfire style [img][fixed] (ID: houndoom)
- This used to be Hellfire style, but I just hated just about everything about it and later figured out how to make pretty good-looking flames in Photoshop, so I started from scratch and made a new one. Like the new Hellfire style, it has a black background and features a lot of flames, but this one is fixed-width and has a three-column layout. If you really liked this one and want to use it, you can still set it as your cookied style.
- Shiny Umbreon style (ID: sumbreon)
- A simple three-column setup similar to Shiny Ninetales. Different shades of dark blue, basically, with light blue text, starring a shiny Umbreon. This was replaced by Roar of Time style as that is also a dark blue style; if you liked Shiny Umbreon better, you can still switch your cookie to it.
- Old Scyther Slash style (ID: old-scyther)
- A medium green style with black text. Slogan is changed to "where the bugs don't slash up the dragons" - basically, while the slogan is normally kind of being nice to the weaker bugs, this one implies that it is being nice to the poor dragons. Starring Scyther. The style has been remade into the current Scyther Slash style; if you preferred the old one, you can change your cookie to it here.
- Daybreak Recreation & Activities Group Productions style [img][mod] (ID: drag)
- This style was forced on everyone on April 1st 2015 as part of that year's April Fools' joke. It is essentially identical to Modern style (which originated as a modified version of this style), except that its top banner is ludicrously humongous in desktop browsers and it hides the style switcher completely (after all, the joke pretended this style was going to be the only one on the site permanently). If for some reason you really like humongous top banners, you can switch your style cookie to it here, but since it's missing the style switcher, the easiest way to switch your style again may be to return to this page.
- Sketch style [mod] (ID: sketch)
- On April 1st 2016, I claimed to be replacing all the images on the site with my own drawings, including the top banner of Modern style. This was a joke, but a lot of people liked the banner, so I decided to keep a copy of that version around. Thus, this is just Modern style but with a different banner. If you want, you can set your style cookie to it. (One neat side-effect of the different banner bit: unlike the 1.4-megabyte transparent PNG that heads Modern style, the Sketch style banner is only 89 kilobytes, removing the need for the [img] tag. If you want the site lighter on your connection, switching to Sketch style will definitely do it.)
- Old Voice of the Forest style [img][fixed] (ID: float)
- The old version of Voice of the Forest style, replaced with the new one when the fixed width was starting to feel painfully outdated. This version has a three-column layout with the menu on the left and affiliates on the right. If you preferred the old version, you can of course set your cookie to it.
- Old-School style [mod] (ID: oldschool)
- A responsive three-column layout with a black background and off-white text, based on what the site looked like in 2003, created for April Fools' Day 2018. In other words, it's a joke style, so treat it accordingly - it's got things like a cursor trailer and bright red Comic Neue for the banner and menu headers. If you like it regardless, you can set it as your cookied style.
- Old Roar of Time style [img] (ID: dialga)
- The old version of Roar of Time style. Black and dark blue with some gradients and wavy patterns, and menus on either side of the page, with an unchanged slogan.
Page last modified November 2 2021 at 20:39 GMT