Konzern Theme: Add Content to the Header Section

Settings you should choose first

[1] You first should decide on the page width and navbar height, as these two settings will give you the right dimensions for the content you like to import into the header. If you choose a width of 840px and a navbar height of 160px - as an example - your content has to be 840x160 pixels.
[2] Also, you have to set the Navbar 2nd Level Transparency to "Transparent", else, your content will be hidden behind the navbar section colors.
[3] I recommend (even it will work without) to set the Navbar Second Level Placement to In Sidebar.
[4] I also do recommend to set the Navbar Active Border to Hide

Creating your content

Now, you know your dimensions for the custom header and you can start designing the content. Blocks is a great plugin for this purpose, as it lets you layout all content exactly how you want it. I don't want to give you a full description about how you should design your header, just some quick notes:

- If you are using Blocks, set the page dimensions and enable the option "Show Overflowing Content" under the Page tab. That way, your content will fit exactly
- Don't use Flash (even not a Flash Slideshow from the photo page). See below for the reason why you shouldn't
- You should disable the option "Show in Menu" in the Page Inspector -> General Section, so the "header-only page" won't show up in the navigation

Importing your content

The next step will be to import your custom header to the target page. I really recommend you use the PlusKit plugin for this, as it makes this step very easy:

1) Add the following code anywhere on the page you wan't to import your header:

<div id="addToHeader">@import((PageHeader))</div>

The String in brackets (PageHeader) is the name of the page header page you have. It's the best to copy/paste it so you won't make any mistake here. Note that it's the name displayed in the page drawer at the right and not the folder or file name in the page inspector.

2) Mark the code above and select Format->Ignore Formatting from the menu bar

Now, preview the page and if you haven't made any mistake, the header should be imported on the page

If you don't use the PlusKit Plugin, you have to manually insert the HTML code:

1) Enter the Source View Preview of the header page
2) Select all code between the opening and closing div with the ID "contentWrapper" and copy it
3) Switch to the target page and insert the copied code into the opening and closing div of the "addToHeader" section. Here's an example:

<div id="addToHeader"><p>This text will be shown in the Header</p></div>

4) Mark all code and select Format->Ignore Formatting from the menu bar

Now, preview the page and if you haven't made any mistake, the header should be imported on the page

Don't use Flash!

Even Flash is a very cool thing: don't use it! Why?

1) Mobile Devices often don't support Flash (e.g. iPhone) and so, they can't see it at all
2) There are many problems with IE/Win and using a flash header
3) There are some users without a Flash Plugin (even not many)

If you do like to add a slideshow, you can use the technique described in the next step.

How to add a slideshow to the header

So, you shouldn't use Flash, but you really like to add a slideshow to the page header? Here is an easy way to add one:

First you should download and install the great and free RW Plugin called "RapidAlbum":

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

This plugin allows you do add a lot of different photoalbums to your RW project. We are using the template "Smooth Gallery" to add a slideshow. To do so, switch to the "Template" tab and select the "SmoothGallery" Template and click on the "Apply" button.

Now, we should make some changes, so that the actual size of the gallery matches the header size.
1) Switch to the "HTML" tab
2) Select "Header" from the drop down menu
3) Add the following example code (for a dimension of 840x160 pixels):

<style type="text/css"
media="all">
/*<![CDATA[*/
#myGallery
{
width: 840px !important;
height: 160px !important;
overflow: hidden;
border: 0 !important;
z-index: 0 !important;
}
/*]]>*/
</style>

Now, preview your slideshow and make sure it looks OK. Well, actually it doesn't but make sure that the dimensions of the slideshow seems to be correct.

If it looks fine, you can add it to your header by using the technique described above (or by placing it into a blocks page).

If you like to further adjust the slideshow, you can access and change several options by choosing "Index" from the HTLM drop-down list. Search for the following line of code:

timed: true, embedLinks: false, showInfopane: false, showCarousel: false, showArrows: false, delay: 5000

just try out setting different values (e.g. setting false to true, add another value for delay, ...) and see what happens ;-)

Dynamic Content and IE6/Win

IE6/Win seems to have some problems with dynamic content in the page header. Adding content to the page header using javascript may throw an error (e.g. using the technique to add a slideshow in the step above). So if IE6/Win support is vital for you, you should limit the page header to static content only (images, text, ...).