S5 File Map

Pretty much everything you need outside of the slide file itself is found in the ui directory, which sits next to the slide file. That's where you find the various CSS files and JavaScript that makes S5 go. It's also where you'd put any background images you'll need in creating your own slide show theme.

The files in the ui directory are:

slides.js

The JavaScript that drives the dynamic side of the slide show. It automatically IDs the slides when the document loads, builds the navigation menu, handles the hiding and showing of slides, and so on. The script also manages the fallback to Opera Show if you're using Opera.

slides.css

This is really just a hub file that points to the three files that drive S5. Those files are:

S5-core.css

Contains a few rules that make the system run. If you mess with this file, you're likely to break the slide show unless you really know what you're doing.

framing.css

Contains some rules that place and size the various slide components—things like the header, footer, slide controls, and so on. If you want to change the basic slide layout, this is where to go.

pretty.css

The CSS that adds the visual pizazz to the slide show—colors, fonts, text alignment, margins, and all that other good stuff. You can make a whole new theme just by editing this file, and not touching the other two.

opera.css

This file is what allows Opera Show to do its thing, assigning a few CSS rules that break the file up into slides. It should never have to be edited unless you go messing with the rules in S5-core.css (not recommended, but hey, it's your slide show).

print.css

This is what makes the printer-friendly version work. There are a couple of rules at the beginning of the file you should be careful about changing, but otherwise, it's all up to you.