Usine Theme: Important Notes

In the latest Usine Theme version you have a lot of Background Image Options in the Style Variations. I think most things are self-explanatory. I just want to point out one possible idea on how to use the body and container background images together:
If you are using both image options you can use a background image for the container. This image will be placed behind your content area. Using the content image options you can finetune how the image will be shown (e.g. set an overlaying color which partially covers the image for a translucent background). The body background image can be used to place a background pattern, which can be repeated. That’s the simplest usage of it. But think further: Maybe you know a good image editor application (e.g. Adobe Photoshop). In many programs you have an option to use layers. Now, you can use a layer for your content (the size of this content will depend on the size option you choose in the style variations) and one for the surrounding area (which later will be the body background image). You can design your layout so both layers together will build a very nice design and split both layers afterward. One layer will be the content background image, the other one the body background. That way you can build a design with drop shadows, stripes and frames. Got the idea?
Included with the Usine Theme is a keynote template whith very basic frames for all fixed size containers (e.g. 810x660px) and drop shadows. You can use this template to start building your own designs.

As only JPG images are supported it is vital you can match colors. Let’s say you have a content background image with a solid blue around it. You need to match this color, so there is no edge to be seen between the image and the background color. That’s why I included a background color option for the container. With this style variation you can enable/disable it. One possible task is if your container background image should be placed at either side of the container and isn’t repeated. Even the container is enlarged, the image will stay in place and will not be repeated.

Since Usine V 2.5 I include a Default to recreate the design you can see at bildpunktdesign.de. Many users asked me how to use usine to create that layout. Now, you simply have to enable this default in the style variations and everything is setup for you. There is only one thing to mention: you have to use a fixed size for this layout to work properly in IE6/Win, so no fluid design is possible if crossbrowser support is vital for you. Many styles are pre-built and if you want to further customize it (e.g. change the navbar colors) you should read the following step.

If you want to adjust some values for the Bildpunkt Design Default you can use the following example CSS code you have to put in the CSS field in the page inspector. In this section I am only going to describe how to customize the colors. If you need to change anything else (e.g. height of the navbar items) you have to dig into the bildpunkt css file and find out on your own what to change. The css file is located at the following place in the theme contents folder:
Contents/css/defaults/bildpunkt.css.

#navcontainer ul {
    border-top: 1px solid white; /*the top border of the navcontainer*/
}

#navcontainer ul li a {
    border-left: 1px solid #fff !important; /*the separating line between the navbar items*/
}

/* The several background colors for the navbar items from left to right*/
#navcontainer ul li a {
    background-color: #dddddd;
}

#navcontainer ul li+li a {
    background-color: #cccccc;
}

#navcontainer ul li+li+li a {
    background-color: #bbbbbb;
}

#navcontainer ul li+li+li+li a {
    background-color: #aaaaaa;
}

#navcontainer ul li+li+li+li+li a {
    background-color: #999999;
}

/*If you have more than 5 navbar items you can copy/paste the above entry and add another "+li" to it*/

#navcontainer ul li a:hover {
    background-color: #880000; /*The overall background hover color*/
}

To adjust the colors, just add your own color values for the proper selectors.

With some simple code you can add a rotating banner or nice slideshows to your pages. All you have to do is wrapping the images (or other containers) in a div with a class of "slides":

<div class="slides">YOUR_IMAGES_HERE</div>

If you want to use other content than images, just wrap the different part in their own div:

<div class="slides">
<div>CONTENT_SLIDE_1</div>
<div>CONTENT_SLIDE_2</div>
<div>CONTENT_SLIDE_3</div>
</div>

There are several options you can set by defining the corresponding variables using Javascript in a script block just below the slides div:

<script type="text/javascript">
var slideDur=1000;
var slideWait=8000;
var slideFX=’scrollLeft’;
</script>

Here is an explanation:
slidesDur: The transition duration between each slide (in ms)
slidesWait: How long each slide will be shown (in ms)
slidesFX: The transition effect you want to use.

Here is a list of effects you can use:
blindX
blindY
blindZ
cover
curtainX
curtainY
fade
fadeZoom
growX
growY
scrollUp
scrollDown
scrollLeft
scrollRight
scrollHorz
scrollVert
shuffle
slideX
slideY
toss
turnUp
turnDown
turnLeft
turnRight
uncover
wipe
zoom

In Usine V4 you can add some content to the navigation bar (just below it). To add content in this area, wrap your content in a div container with an ID of "addToNav". So your content should look like:

<div id="addToNav">CONTENT TO BE ADDED TO THE NAVBAR</div>

Sometimes, RW doesn’t get it right as it tries to automatically format the line above. You have two options if it doesn’t work:

a) Mark all code and select "Ignore Formatting" from the "Format" Menu
or
b) don’t use quotation marks to set the ID.

I ship Usine V4 with a free RapidAlbum Template: Galeria. If you never used RapidAlbum you really should check it out. It is one of the best free RapidWeaver Plugin available.

http://www.smackie.org/Software/rapidalbum/index.html

You have to install this plugin first before you can use the Galleria template.

When the Plugin is installed, copy the Galeria template to the following folder in your home directory: Library/Application Support/RapidWeaver/RapidAlbum/

If the RapidAlbum folder doesn’t exist yet, just create it.

Once you have copied the template into that folder, it should be available in the "Templates" list in RapidAlbum. I have included a small readme file in this template which tells you how to further customize this template. Please read it if you are interested to change the default settings (e.g. dimensions, styles, …).