One of the most appreciated aspects of jAlbum is the ability to customize albums to fit your requirements. It is therefore important that we have a thriving skin developer community. These days it’s more common to see updates to a smaller set of album skins than to actually see new skins emerge. We believe this is much due to the higher expectations users have when it comes to standards compliance, features and visual appearance. It can also be a daunting task to modify existing skins as they have grown in code size and features – you easily break things. Some skins may also have a licensing model that doesn’t allow modification.
The Minimal skin was initially made to be minimal enough to encourage people to base their skins on it, but it is old, both with regards to html+css style and visual look. We have therefore designed a skin that should be the perfect blend: Basic enough to encourage you to base your modifications and new skins on it, but with a current code style, feature set and look. Welcome “Base” skin!
Base skin has a simple, well-documented HTML 4.0 / CSS 2.1 (3) structure, still sporting tons of advanced features. The features were transplanted from my other skins (e.g. Turtle) – metadata formatting by templates, breadcrumb path, custom background image, site colors, fonts and watermarking to name a few. These will spare you a lot of time, thus you can focus on the important things: the HTML stucture and styling.
Tweaking made easy
Let’s see first how easy to make Base albums match your site / company colors. No coding is necessary, just use the the skin’s user interface to define your colors – can’t be easier:
What if you want to use some background image? No problem. Just pick the image from your hard drive and the skin will manage the rest.
You might wonder how it would look like using a semi-transparent panel background? Let’s see! This needs some tweaking of the CSS files. If you prefer keeping the original styles, first make a copy of Simple.css, Simple.jap (and the Simple folder if present) under a new name, e.g. MyStyle.css, MyStyle.jap. These files are in the “styles” folder of the skin’s base folder (Ctrl-Alt-S). Now fire up jAlbum’s built-in skin editor (Ctrl-Shift-E) and open Styles / Simple.css. Add the following rule to the end of the file:
#main { background-color:rgba(255,255,255,0.5); }
Save the file, and Make again. (Please note, the semi-transparent background will not work in IE6 & 7, but thanks god even IE7 has dropped below 4% by now)
Looks cool isn’t it? And that’s not all. You can make the whole background transparent if you want your site shine through the embedded album. Use the following code to embed the album into the target page. You need to add allowtransparency=”true” to the embed code beyond jAlbum makes with its embed album tool (Album / Embed album).
<iframe src="{the path to the album}" frameborder="0" style="width:720px;height:700px;" allowtransparency="true"></iframe>
Here is the embedded (and working) album: