Base Layout B

Base Layout B is unique in having a broad top image placed above the navigation across all pages. The top image carries the visual identity of the site - it sets the tone and defines the look and feel. Using a visually significant top image can reduce the need for images further down the page - a trick which can be used successfully on sites where visual material is sparse.

Using the top image as background image

The top image can be added as a background image. It can be added globally (under 'site settings') so that it is displayed on all the pages of the site. It can also be added 'locally' to each individual page (under 'page settings').

If the top image is set as background image it will not be scaled in the width. This means that the user´s screen size determines how much of the image is visible. Make sure to upload an image that is broad enough to look well on both small and wide screens. Our recommendation is 2500 pixels wide.

The height of the top image

The height of the top image can be varied according to taste. We recommend a height between 200 and 500 pixels.

PLEASE NOTE: If you are using skin 4, remember to apply the following CSS snippet in the global CSS-field to ensure the right placement io the logo. The height of your top image should match the height of the top:

        .header .logo,
        .header #identity{
            top: 430px;
        .header .logo img{
            margin-top: 0 !important;

Header designs

All header designs (skins 1-6) are applicable for Base Layout B.

When using skin 1-3 you may let the background image 'continue' behind the navigation so that the navigation menu texts are displayed on top of the image - creating a unique effect. Using drop down menus is recommendable in this combination. 

You may also choose to create a visual division between the top image and the menu by applying a signicant back ground color to the navigation bar.

See examples of the different header design applied to Base Layout B below:

Mobile view

To optimize Base Layout B for mobile screens it is best to hide the background top image in the mobile view (because it will look disproportiantely large on small screens). If you wish to preserve a visual element in the same position in the mobile view - the top image can be replaced by a normal image module where the image has been adjusted and is only displayed for mobile view.