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 here which 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, since that is not what is being changed. (Therefore, I don't need to make all the pages for every style.) There are a couple of exceptions, but they're minor - and nowhere is there more than just a snippet of code added in a style to achieve full compatibility.

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:

[!ie]: This means that the style may not work as intended in Internet Explorer 6.0 or below; some of its features work only in standards-compliant browsers. They may have been at least partially patched by Javascript if they are absolutely necessary for it to be possible to browse the site. Another browser such as Firefox or Opera (both free for download for those interested) will render these styles in their full glory. They should also hopefully work fine in Internet Explorer 7 and 8.
[img]: This means that the style uses multiple background images in the layout and is therefore not recommended for those with a slow Internet connection, those who don't like background images and those who browse with images turned off. Styles not with this tag will only have maybe two or three images in all and therefore be especially easy on your connection.
[res]: This means that the style has a fixed width designed to fill a full-screen window on a resolution of 800x600. Smaller resolutions will still work, but the page will have a horizontal scrollbar, and larger will leave empty spaces on either side of the actual page. Any style not with this tag will simply fill your browser window no matter how big it is.

What Is the "ID"?

Well, this site has a feature where you can simply specify ?style=styleid (replace styleid with the ID of the style, obviously) after the URL of any page that includes the styleswitcher, and the page will then 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.

If you want to switch your style without using the styleswitcher dropdown (such as if you want to use one of the deprecated styles, which aren't in the drop-down), you can go to http://www.dragonflycave.com/styleswitcher.aspx?style=styleid, again replacing styleid with the ID of the style, and it will change your style cookie and redirect you to the front page.

What Are the Different Styles?

Currently, these are the active styles on the site:

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 [!ie] (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. Internet Explorer 6 or lower will have the normally pure-CSS dropdowns patched by Javascript to behave as they should, so disabling Javascript in IE6 or under will render the dropdowns unusable and the user will be forced to navigate through the section indexes. The slogan is also changed to "where nobody gets mercy, dragon or not". Starring Sneasel.
Roar of Time style [!ie][img] (ID: dialga): Black and dark blue with some gradients and wavy patterns - essentially a remake of Deep Sea style, a style that was on an old version of the site, but changed and with Dialga as its mascot. The menus are just the ordinary lists, sitting on the left and right sides of the page, and the slogan is unchanged.
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.
Voice of the Forest style [img][res] (ID: float): A pleasant light green, image-based style with a fixed width designed to fit on the screen in a resolution of 800x600. Pretty for the eye, but takes longer to load. Three columns with the menu on the left and affiliates on the right as usual. Slogan is unchanged. Starring Celebi.
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 [!ie][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 is special in that it does not have any columns at all - the menu is at the top in drop-down form and the affiliates are at the bottom, meaning that it should be nice for lower resolutions as the menus do not take up valuable horizontal space on the screen.
Articuno Snowflake style [!ie][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..." It is also notable for excessive use of alpha-transparent PNG images. I took the license to do this as Internet Explorer 7 is out and it (along with Internet Explorer 8) supports alpha-transparent PNGs unlike Internet Explorer 6; however, this means that it will without a doubt look absolutely horrid in IE6, so I really mean that [!ie] tag. It also uses snowflake brushes from 500ml Brushes.
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.

Deprecated Styles

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. It isn't really "deprecated"; it's more just there for the fun of it. 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. There is no slogan in this style, as the slogan didn't exist when the site started.
Old Hellfire style [img][res] (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 similar to Voice of the Forest style. 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.

Page last modified December 12 2009 at 20:36 GMT