First, create a nice header image. To use it in all the layout modes of the NatSkin the image should have an appropriate width, so that it will always fill the screen up to a certain width that you want to support. Currently header images have a dimension of up to 1280x200 pixel. But for example the Subway image is smaller and backs off to pure black to the right being covered by the background html color of the header so that you don't notice that it does not span the complete width in styleborder=off layout mode.

Second, you attach the image to the NatSkin topic.

Third, create a stylesheet named "FooBarVariation.css". Note, it must end on *Variation.css to be recognized as such by the NatSkin. Here's a minimal skeleton:

.natHeaderArt {
  background-image:url(FooBarBar.jpg);
  background-repeat:no-repeat;
  background-position:top left;
}
.natTopBarSizer {
  height:140px;
  max-height:140px;
}

Fourth, attach the FooBarVariation.css to the NatSkin. That's it. From now on you will get it in the TWiki.NatSkinStyleBrowser. Take a look at the stylevariations in pub/TWiki/Natskin/*Variations.css for more examples.

… reply