New free website template: Variant Fashion

Post 253 of 262

I have just uploaded a new free XHTML/CSS template, this time a somewhat different kind of design called Variant Fashion. It is not as simple as you may be used to, but it should still be easy to get familiar with. The primary difference compared to previous designs is that Variant Fashion includes a number of different layout options, as well as visual style options. You can combine any of the layouts with any of the color schemes, and you make the changes by editing a few IDs and classes in the HTML source. The template has all CSS in one single file, meaning that the stylesheet includes examples of how to customize a template into something different.

Below you can see what Variant Fashion looks like (all four screens are taken from the included HTML examples, click the image to download the template):

I will soon write a tutorial on how to use the included layout variations and color schemes, as well as explaining how to make your own adjustments. Until then, you can look at the differences between the examples, for example how the sidebar and the content divs are marked up in the two left/right sidebar examples: Moving the sidebar to the right is simply a matter of changing the sidebar div ID from “sidebar” to “sidebaralt” and the content div ID from “content” to “contentalt”. In a similar fashion, to use the light style you only need to apply class=”lightstyle” to the body tag. The CSS will take care of the rest.

If you find any errors or things that can be improved, feel free to post a comment or send me an e-mail through the contact page. I will add more visual styles and color schemes to this template in the future, this first version is just a basic release to see if this kind of code organization works well for template users.

,

This article was written by Andreas Viklund

Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.

34 comments:

LeandroJuly 9, 2010 at 02:35Reply

I guess I’m the first one to comment here again!
I can see you’ve been working hard as it’s late in the night in Sweden now.
Nice one with different options to customize it.

I remember from a couple weeks ago when you came back posting on this site that you mentioned you had to keep up-to-date to the latest WP developments to keep up w/ the good job in your private/paid ones. As a suggestion, it could be interesting to discuss a little bit of what WP 3.0 features (or 2.9 or whatever) you explore in these new themes that weren’t available before.

To the inexperienced eye (myself), I only pay attention to the layout, but I expect things to be efficient/safe/smart/SEO’ed behind the curtains.

Anyway, congrats! And I’ll be back soon to be part of the discussions that will follow.

FacundoJuly 9, 2010 at 03:11Reply

I have found a bug. All files, except “clear.html” does not center on the browser if the resolution is higher at 1024 x 768. I do not know if it will be a mistake (as you know I dont get along with CSS) but I noticed that (at least with Mozilla Firefox).
I await your response, either to give me a “congratulations” or to explain that it is “natural.”
Surely it is easy to fix, but it is a detail to consider.
Greetings!

AlbertoJuly 9, 2010 at 08:04Reply

Very beautiful.
It could be important to have a last option: “Standard (colors), centered and wide style”.
I think users with an high resolution do normally prefer the screenwide template then a little one on the left on their screen.

Andreas ViklundJuly 9, 2010 at 08:11Reply

Leandro: Good point, I’ll write that down for a future blog post!

Facundo: That is not a bug, it is intentional. As the clear.html example shows, it is perfectly possible to make a small change to the CSS to make the layout centered. Or wider. Or to make the color scheme lighter. Centering the layout will require some changes to the background image. Perhaps I should include a center-friendly background and another example in the next version?

Alberto: Yes, I’ll consider that for the next version. I may also add more color options, depending on what reactions the first version of the template gets.

NianJuly 9, 2010 at 09:11Reply

I really love it, the best one if you ask me. What i want to know is how to use this version http://andreasviklund.com/files/demo/variant-fashion/light.html and to get it centered without having to get it wider. I want to keep the size as it is.

Kaiser MangampoJuly 9, 2010 at 09:48Reply

Hi Andreas,

WOW! Another design in the market. Hey guys, what are you waiting for, go try it out. Thanks to this genius!

I definitely like your new design. The example color is perfectly combined- black and yellow. But what impress me most is by being dynamic such as adding color schemes and be able to do modifications. For me, it is such a plus factor. You really have a talent in designing.

Also, Alberto got a point, “Standard (colors), centered and wide style” is also one of the main factor. I am glad you’ve consider his idea.

Cheers,
Kaiser

Andreas ViklundJuly 9, 2010 at 11:07Reply

Nian: Not through any default setting, as it will require some additional modifications to the background image. But I will probably re-work the template and release an updated version with the design centered by default in a few days.

Kaiser Mangampo: Thanks a lot!

NianJuly 9, 2010 at 11:30Reply

No i did understand that is was not any settings for it. When you release the new version with the site centered, will that version keep the width then or will that be wider just as the demo is now?

DavidJuly 9, 2010 at 14:30Reply

“Den som väntar på något gott, väntar aldrig för länge” :)

KamranJuly 9, 2010 at 16:48Reply

Wow, this template is totally beautiful!! Thank you so much!
Any chance of converting one of these for blogger?

Andreas ViklundJuly 9, 2010 at 18:25Reply

Nian: I will keep the width as it is. Possibly add an optional extra column outside of the main wrapper, like the third column that I added in the andreas07 template some time ago. We’ll see, I’ll try to get an updated version online until tomorrow.

Kamran: I do not use Blogger, so I will not be able to make a port myself. But I would be happy to link to a public Blogger theme based on the design if someone else would make it.

In any case, I will fix an error in the character encoding within the next couple of hours. The charset used is UTF-8 but the example files are saved as iso-8859-1 – which is not a good combination.

NianJuly 9, 2010 at 19:13Reply

Thank you very much Andreas for the answer and for your work. Will we maybe see a WordPress version of this template in the future?

ChrisJuly 9, 2010 at 22:35Reply

Andreas – wow! Just wanted to quickly say thanks for continually contributing your designs so generously. Hope you are well.

Marcus NilssonJuly 10, 2010 at 16:54Reply

Good job on this new template. I love the fact that you can choose between a number of different layouts.

MartinJuly 10, 2010 at 18:53Reply

It looks pretty awesome and is free! Thank you!

Rom GuyJuly 11, 2010 at 03:27Reply

OMG, this is a very pretty design, great work. Thanks.

MikeJuly 11, 2010 at 22:10Reply

This template is nice! Thanks for your work! :)

PatzeeJuly 12, 2010 at 06:41Reply

Wow! You’ve sure been busy. Many thanks for the template.

JJuly 12, 2010 at 12:12Reply

Looks really good, will surely try it out!

SimonJuly 12, 2010 at 14:09Reply

I like this template because of its simplicity even if my favourite of your templates is wp-andreas01, that one is great!

AlexJuly 13, 2010 at 00:49Reply

Hi Andreas, thanks for the new template just installed it and love the fact that there is only one CSS file to hunt around in. Even though you have mentioned that it’s more complex, I think everyone will find it easy to use due to the examples in the CSS. Good work :-)

Hans Verkerk de JongJuly 13, 2010 at 09:44Reply

Once again, you’re KING, Andreas! I love the simplicity of the Variant Portal and love the richness of this latest Variant Fashion! The fact that you offer that many options within a single example like Variant Fashion, makes your work a must for every developper! Best greetings from Amsterdam, Holland!

Gruber Van de CampJuly 13, 2010 at 14:54Reply

Amazing work once again Andreas, great to see you are well again. I was afraid you had stopped producing them. So glad you’re back! @ Alex, indeed that singular CSS file makes customisation of the theme (not that much is needed) really easy!

Thanks Heaps, Van

FaceplateJuly 13, 2010 at 21:36Reply

Awesome work Andreas!

And just one other thing i want to mention. You are a huge idol of many many people in Sweden, atleast you are my idol! You should be proud!

Thanks, best Andreas!

Nguyen Van CongSeptember 10, 2010 at 01:51Reply

Hey, great template. Thanks for sharing.
Also, you can get more template here http://vietsolutions.org/category/templates
Thanks again!

AnonymousSeptember 14, 2010 at 19:50Reply

Is this template sin html5 and working to drupal? i’m running wordpress with html5 here http://www.nordiskabadrum.se but preffer drupal

Andreas ViklundSeptember 14, 2010 at 22:50Reply

No, it is a plain website template (no scripting or CMS-specific features) in XHTML 1.0 Strict. I will probably update all templates to html5, as well as releasing new html5 and CSS3 templates. But for now all my templates are XHTML.

Variant Fashion has not been ported into a Drupal theme yet, atleast not that I have seen. Most of my older templates (the andreasXX and Daleri series) are available as Drupal themes on drupal.org. If some Drupal designer decides to make public theme versions of the Variant templates, I will post links to the theme versions in the forum for each template.

BadrumSeptember 14, 2010 at 23:18Reply

Thank’s for the fast reply, I will test your new templates in the next project.

LuxiaoxiaocitySeptember 15, 2010 at 04:29Reply

Variant Fashion has not been ported into a Drupal affair yet, atleast not that I accept seen. Most of my earlier templates (the andreasXX and Daleri series) are accessible as Drupal capacity on drupal.org. If some Drupal artist decides to accomplish accessible affair versions of the Variant templates, I will column links to the affair versions in the appointment for anniversary template. http://www.uk-power-battery.co.uk

InfoSeptember 24, 2010 at 07:18Reply

Hi! Thks for template, we also design web sites http://belnet.biz

CharlieJanuary 25, 2011 at 15:04Reply

Andreas, thank you for this template. It is very interesting how many peaople used it…

EndystApril 8, 2011 at 08:58Reply

Thank you for template, it is very useful. ;) I would like to see more.

FredrikJanuary 23, 2012 at 14:17Reply

Nice, will have to try it on one of my comming websites.

JohanFebruary 24, 2012 at 13:04Reply

Looks very nice, I surely will try it out.

Menu