Altering and Creating Styles in BPP

Styles determine the basic “look and feel” of a generated album. After becoming familiar with altering BPP style sheets, it is not difficult to take the next step and create a completely new style. Altering or creating a JAlbum style requires at least a rudimentary knowledge of CSS (Cascading Style Sheets). Some links to information about CSS appears on the Resources page.

How JAlbum handles styles

A JAlbum style consists of a CSS file (a file with the extension .css) that resides in the ‘styles’ folder within the ‘res’ folder inside a skin folder (that is, in JAlbum-->Skins-->skin folder-->styles). Styles are picked up automatically by JAlbum and are available in the Style drop-down menu on the JAlbum main window.

How BPP handles styles

In order to allow for styles to change in subalbums (a feature not generally available in most skins), BPP handles style files differently than the standard JAlbum method. In BPP, there are two ‘styles’ folders (a “real” style file and a “placeholder” style file); both play an important role. BPP styles consist of a css file and, optionally, image files for backgrounds, rulers, icons, etc. These optional image files are placed in a folder that is given the same name as the CSS file.

Location of Style files in BPP

There are two “styles” folders in BPP: one contains the “real” style files and the other contains “placeholder” style files. To alter a BPP style, find the appropriate “real” style file.

“Real” style CSS files are in a folder called ‘styles’ within the ‘res’ folder. The ‘res’ folder is found in this path: JAlbum-->Skins-->BluPlusPlus-->res. On a PC, the default location of the JAlbum folder is inside the ‘Programs’ folder on the hard drive. On a Mac running OS X, the JAlbum folder is placed by default in the main Applications folder, but can be placed anywhere on the drive.

“Placeholder” style files can be ignored if one wishes only to alter an existing file. Those interested in creating a new style should refer to the ‘Creating a new style’ section below.

A detailed example

This example contains an annotated listing of the stock version of the Arcs.css file with a screenshot of a slide image page showing which parts of the page are controlled by which css selectors. To show the effects of changes to the css file, an annotated listing of an altered version of the Arcs.css file is given; partial screenshots are presented.

Each link below opens a new browser window. It is helpful to read the file listing while referring to the corresponding screenshot:

• annotated listing of the original arcs.css file
• screenshot of the original slide image page
• annotated listing of an altered arcs.css file
• screenshot of the altered slide image page

Creating a New Style

Creating a new style in BPP is not much more difficult than altering an existing style. In addition to a css file (and optional accompanying image file) in the ‘styles’ folder inside the ‘res’ folder, an empty ‘placeholder’ css file must be placed in the ‘styles’ within the main BluPlusPlus folder.

In order for JAlbum to recognize a user-created style, an empty file is created with the same name as the style file in the ‘styles’ folder; this empty, placeholder file is placed within the ‘styles’ folder that is NOT within the ‘res’ folder. That is, the placeholder style file goes in JAlbum-->Skins-->BluPlusPlus-->styles whereas the actual style file goes in JAlbum-->Skins-->BluPlusPlus-->res-->styles. This is important! If this is not done correctly, either (1) JAlbum will not ‘pick up’ the new style and make it available in the Styles pull-down menu on the Main JAlbum tab, or (2) the new style will not work. See folder listing screenshot above.