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.

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 special 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 necessary 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 it can be put forward quite a bit differently.

What Do Those [] Labels Mean?

Glad you asked. Here are the definitions for them:

[!ie]: This means that the style will or may not have its full features in Internet Explorer 6.0 or below. Some of its intended 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 hopefully work fine in Internet Explorer 7.
[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 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 page looks like in a particular style. To make things even easier, the style names below are linked to this page with those styles applied - a good way to get a preview of each style.

If you for some reason want to switch your style without using the styleswitcher dropdown, 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 styles are up:

Minimal Dewgong style (ID: dewgong): A simple style, basically white with black text, the menu on the left, and the 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.
Shiny Umbreon style (ID: sumbreon): Different shades of dark blue, basically, with light blue text, starring a shiny Umbreon. Duh.
Scyther Slash style (ID: 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. Gee, how could you guess?
Shiny Ninetales style (ID: sninetales): A lavender style with black text, based on the shiny Ninetales. Slogan is unchanged, and the actual layout excluding the colors and banner is the same as Scyther Slash style.
Voice of the Forest style [img][res] (ID: float): An pleasant light green, image-based style with fixed 800x600 width. Pretty for the eye, but takes longer to load. Slogan is unchanged. Starring Celebi.
Nidoking Poison style [img] (ID: nidoking): Dark purple background with lighter purple navigation bars. The content stretches, but the navigation bars are fixed and use background images.
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 layout of Shiny Ninetales, Shiny Umbreon and Scyther Slash, with a couple of rather minor tweaks. It's pink, which is rather easy to guess considering its Mew cameo.
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 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 - 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 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 style that nonetheless will stretch to fit any resolution or user font size within reason. I think it came out great, 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 licence to do this as Internet Explorer 7 is out and it 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 on 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 stupid to include along with the old one.

Oldie style (ID: oldie): This style is very likely to hurt your eyes. This style 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. 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 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 the old Hellfire style and want to use it, you can still set it as your cookied style.

Page last modified May 27 2008 at 01:23 GMT