Speciallayout 7210

The Layout 7210 is currently available in 6 variations and supports three different image sizes. It consists of a divided navigation with the main navigation on top and an additional navigation right or left. The blog navigation and the sidebar elements are located underneath the lateral navigation. The total width is 1000 Pixel, 250 Pixel of these are used for the sidebar/navigation and 750 Pixel for the content of the website. The concept comes from CSS Templates. Due to this reason there are two copyright lines underneath the website that cannot be hidden. The layout uses CSS3 functions (colour courses) to simulate that the area of lateral navigation and content seem equally high, independent of the content of the two areas. This function is only active in the current Firefox, Chrome, and Safari. All other browsers do not support CSS3 so that sidebar and content are only as high as the content itself. You do have the option of integrating an image to simulate this effect for all browsers.

The Layout 7210 convinces with a number of adaptation options. Hereafter some examples to show which options are available.

Original version: Even though the main image is 1000 Pixel wide, the right part is covered by a coloured area. The background is dark grey, the navigation and the footer are slightly highlighted in black. Left and right of the image there is a cream-coloured area. As the page is shown in Firefox, the column with the sidebar and lateral navigation is just as high as the content of the website. In Explorer the right column with the sidebar would be shorter, as the content stops after the counter.

Variation 1: We changed the design slightly. The area above the main image was made transparent (colour deleted) and we integrated an image at this position, a transparent png. You could also integrate a logo there. We centred the image. In addition, we changed the colour of the navigation to green. That is all. The main image is fully visible now and the logo gives the overall picture an additional touch.

Variation 2: Here we were slightly more radical. We coloured the main navigation (No. 2), the special colour No. 5 and the background in a uniform green. We used the same colour as in the navigation, which therefore blends with the background. Only the sidebar and the content stay white. Then we loaded a transparent tile for the main image and made the area above the main mage transparent like in Variation 1 (Colour No. 4). Instead of a logo we uploaded an image for image 3, to the fullest size possible (230 x 350 Pixel). This now appears more open and the font of the headline is no longer on an image but in an open space. If you make the sidebar and the content green too (it is enough to delete the colours so that the background shines through) the page becomes even more open. In Variation 4 you can see that in this case, you can also work with a discreet background.

Variation 3: This version uses image 2 to create a coloured areas or like here a pattern for the entire width of the page. We set the background, the main navigation and the special colour No. 5 to black, so that the wood pattern is set off. We left the small image to the right, made the main image „invisible“ again by using a transparent tile. The design looks especially good on large screens as the wood strip stretched along the entire screen and is therefore perceived as carrying surface.

Variation 4: In this variant we emphasized the topic from Variation Nr. 3 even better. We also replaced the small decorating image with a transparent area, so that now only the wood pattern has an effect. The dark wood has an especially good effect on a light area, which is why we set the background to a pattern. In order for this pattern to be visible over the entire website we deleted all colours and thus made all areas transparent. The headline „Welcome“ cannot be centred as only the space to the second (now invisible) image is available, which is why you should keep the font aligned to the left. As in the last example you can keep the navigation more open here also and make all areas transparent.

Variation 5: In the last example we want to show which options you have if you use the image No. 4 (which actually serves to create visually equally high areas) to deepen the separation between sidebar and content. We created an own image with an ornament in green. As we cannot change the width of the sidebar and we did not want the ornament to be too much under the content of the sidebar, we relocated the ornament nearly completely into the area of the content. Of course we also wanted to avoid that the content is located too much over the ornament. So we went on the first icon design, there on -> design settings (last entry) and then on -> content elements (second tab). Here we set the left inner distance to 140 Pixel which makes the entire content of the website start 140 Pixel more to the right. This way the ornament can be seen very well. However, you must pay attention that you do not overwrite this setting in an element (or already overwrote it) as this element otherwise uses the distances stated there and not the superior values. To get an impression that you can already design the website with the main image we decorated the left and right side of the image with the ornament and then saved the image as a transparent png. With a little imagination you can already create much more beautiful effects here and give the main image an adequate frame and a corresponding form. We have already shown you how to remove the other elements and adapt the colours in the other examples.

Variation 6: To round it off we want to show you how the design looks in a browser that does not support CSS3. The original design above was opened in Camino. You can see clearly that the column with the sidebar and the lateral navigation is shorter than the column with the content. This is usually not tragic as nearly all kits we know that work with Div-elements offer such design templates and therefore, such „effects“ are common. Still you have the option of creating visually equally high columns via the image 4, no matter for which browser. How this is done is explained below in this article.

We hope that the examples gave you a few ideas to adapt the design to your own wishes. If you created an especially beautiful design, let us know. Maybe we can publish an article about it and present a selection of the pages. To keep it comparable, you should only use the Design 7210. Of course many of our other templates can be changed just as much. If you have a purchase version, you can save the different variants and reload them anytime.