Rot3K Graphics and Web Design is presented according to Web standards and modern Internet technologies (e.g. HTML, CSS, DOM), some of which your browser does not properly support. Upgrade your browser to access the site layout, or view our site preview (236K JPG).

Style Sheet, or “Theme”, Information Page

Welcome to the style sheet (or theme) information page. Here we explain the reasoning behind each theme available, offer suggestions as to what sort of users we think would most enjoy any given theme, and list important browser compatibility issues.

The first section, General Information, is dedicated to the technologies used to make the themes work and their applications in the real world (as opposed to their applications on this site). The second section, Rot3K.com Information, starts with a small note on Browser Compatibility (for this site) and then proceeds to list detailed information about each style sheet, or “theme”.

General Information

Rot3K.com Information

How does it work?

Modern Internet standards provide a way of listing alternate style sheets in a page’s source code and some browsers even allow you to choose between them via the menu bar. Unfortunately, most browsers have not yet implemented this feature. We didn’t want to wait. Your selection is stored in a cookie on your computer using JavaScript, and when you return later your previous selection is automatically displayed. Learn more.

Why so many themes?

You may be wondering why we feature so many themes on this site, whether people really make use of so many options, or if it was simply a waste of our time. If that is the case, you are correct. There are very few real world projects that justify so many themes, and this site certainly isn’t one of them.

Our main objective in including so many alternate themes was to show how JavaScript, Style Sheets, and a non-table-based layout could be combined to create multiple presentations without editing individual documents. When you change themes you are not loading another page (you aren’t even going anywhere), the action you are taking is more akin to changing the site’s clothing to help it fit in with a different crowd. We can design different layouts to meet different site needs, and this gives us an efficient way of showing you an online example (even if some of these style sheets use techniques that aren’t yet realistic for most projects because they are only supported by newer browsers).

All of that aside, they really do come in handy for reading articles on this site and browsing through its contents, so no harm is done.

Real-world applications?

As a Web designer or client you may be wondering what real-world applications a feature like this can bring to your Web site (or those of your clients). In our own projects we frequently use this technique to provide a normal sans (easier to read onscreen) presentation along with a more accessible and resizable serif presentation. Here is an online example at Kongming’s Archives, one of our hobby sites focused on the Three Kingdoms era in Chinese history (Use the “Small Sans” and “Large Serif” font options in the menu). Wired News – a major technical news site – uses the same technique to provide viewers with four different font sizes, allowing more people to enjoy their content at comfortable text sizes.

With the introduction of CSS-based layouts (like the one used at Wired News) alternate style sheets can also be used to completely change a site design. If done properly, this allows the client to update their whole site’s appearance by changing a single document (which is much more cost-effective than updating every page on the web site individually every time a change needs to be made). Alltheweb – a comparatively new search engine – even accepts viewer-submitted “skins” (alternate style sheets) and allows you to choose between their default layout and the submitted options.

Also, because Alltheweb uses CSS for visual presentation (right down to table size settings) page download times are quite good (only 10.3KBs at the time of writing). It gets even more interesting when you compare Wired News (22.2KBs) to Lycos (33.1KBs), two sites that present a similar amount of information (and are both part of the Lycos network).

Browser Compatibility?

Odds are, given current traffic ratings, that at least 97% of you will be able to make full use out of the themes provided on this page (according to theCounter.com’s global records for November 2002, and not factoring in the fact that most visitors to this site will be the sort of person that upgrades their browsers). Although Opera, iCab, and Omniweb cannot access the themes due to incomplete implementation of the DOM, Internet Explorer 5+, Mozilla, and all other Gecko based browsers (e.g. Netscape, K-Meleon, Chimera) can. Opera 6 should offer proper support when it is finished as well. It is also important to note that JavaScript must be enabled and the rot3k.com cookie must be accepted (both of these things are allowed by default) for the style switcher to work.

Default – Activate

DefaultThe “Default” theme is designed for the average Internet user. Text is set in 11px Verdana and various shades of a blue marble background image are used to separate areas of the page. Most people will probably favor this theme, but if larger text or greater text/background contrast is preferred an alternate theme would probably be best.

Text may be resized in Mozilla, Netscape 6+, Internet Explorer 5+ (Macintosh), and Opera, but not in Internet Explorer (Windows). Advanced layout techniques are avoided in this theme to garnish better functionality in relatively older browsers like Internet Explorer 5 for Windows. Links are discernable by shade and color, but are not boldface or underlined.

Default (High-Resolution) – Activate

Default (High-Resolution)Not Compatible with Windows Internet Explorer
The “Default (high-resolution)” theme is designed for people using modern computers with modern browsers. Text is set in “small” Palatino (Georgia or Times are used as backups) and various shades of a blue marble background image are used to separate areas of the page. Background images and the navigation menu will remain in place as you scroll up or down in the document (read ‘Major Browser Issues’). This theme is ideal for faster computers with high-resolution monitors.

Body text may be resized in all browsers that have text resize/zoom capabilities. Advanced layout techniques are used in this theme to make it more efficient and appealing for some modern computer/browser users. Links are discernable by shade and color, but they are not boldface or underlined.

Internet Explorer (Windows) does not support CSS fixed positioning, something this layout requires. If you activate this theme using a version of IE Windows the menu will break from the layout and move to the top pushing body content down below it. Activate another theme to reverse the effect. This is a limitation on Internet Explorer for Windows, there are no reasonable workarounds at this time.
Internet Explorer 5 (Macintosh): mouseover effects in the menu do not work, but other than that it is fully functional.
Slower Computers: scrolling and menu highlighting may slow because the fixed position graphics require more work from your CPU and video card.

Seasonal (Sans) – Activate

SeasonalThe “Seasonal (Sans)” theme is designed for average Internet users with good computers and fairly modern browsers. Text is set in 11px Verdana and background images, which change from season to season, are used to separate areas of the page. Background Images will stay in place while scrolling in modern browsers. If you like an attractive theme and don’t have special requirements you may like this option the most, but if larger text or greater contrast is preferred another selection may be best.

Text may be resized in Mozilla, Netscape 6+, Internet Explorer 5+ (Macintosh), and Opera, but not in Internet Explorer (Windows). Some advanced layout techniques are used in this them, but they should not present layout issues in older browsers. Noticeable highlight delays may occur when viewing with slow computers. Links are discernable by shade and color, but are not boldface or underlined.

Slower Computers: scrolling and may slow because the fixed position background images require more work from your CPU and video card.

Paper (Serif) – Activate

PaperThe “Paper (Serif)” theme was designed with the average Internet user in mind, and is a little more accessible than the default theme. Text is set in 12px Georgia (Times New Roman and Times are used as backups) and will probably look best with anti-aliasing (text smoothing) enabled (a feature of Mac OS and Windows XP). Text and background colors mimic the appearance of an old document and are easy on the eyes. If you like Serif fonts and the color scheme you may be happy with this option, but if the text is too small consider the alternate theme “Accessible (Serif)”.

Text may be resized in Mozilla, Netscape 6+, Internet Explorer 5+ (Macintosh), and Opera, but not in Internet Explorer (Windows). Advanced layout techniques are avoided in this theme to garnish better functionality in relatively older browsers like Internet Explorer 5 for Windows. Scrolling and mouseovers should function quickly in slower computers. Links are discernable by shade, color, and are boldface, but not underlined.

Accessible (Sans) – Activate

Accessible (Sans)The “Accessible (Sans)” theme is a user-friendlier version of the “Default” theme. Text is set in “small” Verdana, (Trebuchet MS and Helvetica are used as backups); soft shades of blue are used in the background. If you like the “Default” theme, but wish it were more accessible (resizable text, underlined links, etc.) this theme may be your best option.

Body text may be resized in all browsers that have text resize/zoom capabilities. Advanced layout techniques are avoided in this theme to garnish better functionality in relatively older browsers like Internet Explorer 5 for Windows. Scrolling and mouseovers should function quickly in both slow and fast computers. Links are discernable by color, are underlined, and light up bright blue when you mouse over them, but the unvisited shade is similar to that of normal text.

Accessible (Serif) – Activate

Accessible (Serif)The “Accessible (Serif)” theme is a user-friendlier version of the “Paper (Serif)” theme. Text is set in “small” Georgia, (Palatino, Times New Roman, and Times are used as backups) and will probably look best with anti-aliasing (text smoothing) enabled (a feature of Mac OS and Windows XP). Text and background colors mimic the appearance of an old document and are easy on the eyes. If you like the “Paper (Serif)” theme, but wish it were more accessible (resizable text, underlined links, etc.) this theme may be your best option.

Body text may be resized in all browsers that have text resize/zoom capabilities. Advanced layout techniques are avoided in this theme to garnish better functionality in relatively older browsers like Windows Internet Explorer. Scrolling and mouseovers should function quickly in both slow and fast computers. Links are discernable by color, are underlined, and light up brightly when you mouse over them, but the unvisited shade is similar to that of normal text.

Skeleton (Sans) – Activate

Skeleton (Sans)The “Skeleton (Sans)” theme is completely dedicated to usability and accessibility at the cost of eye candy. Text is black, set in a resizable “small” Verdana, (Trebuchet MS and Helvetica are used as backups), and everything is placed on a white background so pages are easier to read. If the other themes were not as accessible as you would have liked, or you just want a good theme for on-screen reading, this may be the best choice.

Body text may be resized in all browsers that have text resize/zoom capabilities. Advanced layout techniques are avoided in this theme to garnish better functionality in relatively older browsers like Windows Internet Explorer. Theme images and mouseover effects are not present for faster browsing and download times (ideal for dialup users or people with slow computers). Links are all underlined and use the default link colors specified in your browser preferences (this gives you complete control over how much they stand out or blend in).

General Information: Many users may find this theme unattractive because it does not include this site’s visual effects; it is barebones version of the other themes, thus the name “Skeleton” (then again, many people believe in the “simple is beautiful” statement). Also, because the link colors are determined by your user preferences the theme will not look good if you have chosen odd colors. The “Skeleton” theme uses a white background regardless of your preferences, so if your default colors are light text on a dark background it may make links difficult to see.