Skins

From ReservesDirect: Open Source EReserves System

Table of contents

1 Download the sample style sheets and images 2 What's in the Zip Archive 3 How to customize your style sheet 4 Database Configuration

Download the sample style sheets and images

Go to the downloads page and grab the zip file of sample style sheets, sample images, and image source files. The instructions on this page are all contained in a "Read Me" file in the zip.

What's in the Zip Archive

1. A /StyleSheets directory with sample style sheets to work from as you customize your own. Currently this directory contains the default style sheet (ReserveStyles.css) and a variation for a sample library (ReserveStyles-sample1.css). Everything about the look and feel of ReservesDirect is controlled by CSS, including the navigation tabs and positioning of all major layout elements. You can customize the entire display to fit your taste.
2. An /images directory for all of the images used by the style sheet to make the CSS tabs work. The images in the root of this directory are used by the default style sheet. There is a subdirectory /skins/sample1 used for the sample images. You can create your own subdirectory within /images/skins and use an appropriate abbreviation for your library (e.g., /images/skins/theo).
3. Sample HTML pages so that you can see how your changes turn out.

How to customize your style sheet

1. To start tweaking the default style sheet, just open <ReservesStyles.css> and <CSStest.html> in Dreamweaver or your favorite HTML editor. Then start tweaking styles to your heart’s content and see the effects by looking at <CSStest.html>. Working with customizing the look of the tabs will be the most “interesting” part, but it isn’t too difficult. See #4 below for more on tabs….
2. To start making “skins” for RD apart from the default style sheet: In the /StyleSheets directory, save <ReserveStyles.css> as a new css document for your library with an appropriate designation in the file name (e.g., <ReserveStyles-theo.css>). The style sheet is fairly well commented--you should be able to customize all of the colors, etc., without any problem.
3. In the root directory, save CSStest.html as a new file (e.g., CSStest-theo.html) and point it to the CSS file you just created. This page will allow you to view the changes you have made to the style sheet.
4. In the /images/skins directory, create a new subdirectory for your library (e.g., /images/skins/theo). The only images you will need to create are images branding images for the header (e.g., your library's logo) and images to make the tabs work. If you look in /images/skins/sample1, you will see the basic images you will have to create to get everything working properly. In /images/testImages there are several .png documents with source files for the default tab images and the RD logo that you can open in Fireworks (or another image editing application) and simply tweak the colors if you want to do this job quick and easy. Or you can create your own tab images from scratch. The images for the tabs are the most complicated part of the style sheet, but they shouldn't be too bad to work with. We used the "sliding doors" technique for tabs--the URL to the technique is in the style sheet. If you use images the same size as the ones in the default style sheet, you won't have to mess with any of the padding, etc, on the various elements--all you'll have to do is change the path to the images. If you use custom images, you'll have to tweak the padding to fit your images...We have tried to comment the style sheet enough to give clues on how to do this. You will definitely want to test the images and tabs (and everything else) to make sure they are working correctly *before* you load any changes into your RD installation.
5. To effect the default style sheet changes in your RD installation, edit the <ReservesStyles.css> file in /your_installation_directory/css. Also put any style sheets for skins you created in this directory. Then load any images you changed or added into /your_installation_directory/images and any skinned images into /your_installation_directory/images/your_skin_name (you’ll need to create a directories for your skins, one for each).
6. Your default stylesheet should be workable as soon as you commit the changes to your RD installation. You can finish things off by going into /your_installation_directory/secure/html/footer.inc.html and changing the address information, etc, for your institution (please consider leaving the “Powered by ReservesDirect” image or text in place and be proud of where the software comes from!).

Database Configuration

To get skins working (alternative style sheets to your default style sheet), you will have to add a definition for each one to the database. Once you do, going to the URL https://your_domain/index.php?skin=your_skin_name will set the skin in the user's cookie.

If no skin is specified, RD will use the one which is marked as a default. The default skin should also be set in the database table.