Variant Creative updated with new 2-column layout

A few days ago, the Variant Creative template was released. Today I have updated the template and added a second layout option with two columns, to show how the template can be customized in an easy way. This is what the new layout looks like:

What has been added?

Basically, all I have added is a second .HTML file, four lines of CSS and two new images. The new .HTML file is called 2-columns.html and it can be accessed by clicking the “two columns” button in the sidebar of the template. In the 2-column layout, the right sidebar has been removed and the main content area has been made wider. A body class has been added to the HTML, along with these four lines in the variant-creative.css file:

.twocolumns #header {background:url(img/front-2columns.jpg) no-repeat top left #2a5a7a;}
.twocolumns #content {margin:-95px 30px 10px 185px;}
.twocolumns #footer {background:#fff url(img/footerbg-2columns.jpg) top center no-repeat;}
.twocolumns #footer p {width:765px; margin-left:175px;}

These lines provide the 2-column layout with a different header image, make the main content area wider and adjust the footer to match the header and main content area. The included .PSD file for the header has also been updated to include the 2-column layout header design.

Same template, not a separate download

Most often when I make variations of a template layout, I release the modified version as a separate download. But for Variant Creative, I decided to update the original template and include the second layout in it, since I figured that it could be useful to have the option to use both a 2-column and a 3-column layout on the same website – in the same way as can be done with the andreas01 template (which Variant Creative was inspired by).

Download

I am working on an alternate version of this template with a different header design and with a 4-column layout option, which will possibly be released in a few days. If you would want to see something specific added to it (or to the original template), feel free to post your suggestions below.

css, templates, tutorials, variant creative