Usine Theme: Important Notes

Using the Background Images

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.

Why I have included a Container Background Color On/Off Style Variation

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.

The Bildpunkt Design Default

In the Usine Theme 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.

Further Customizing the Bildpunkt Design Default

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.