New free website template: Variant Fashion

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.

About the author: Andreas Viklund

Professional web designer with music production as a major hobby. Founder and webmaster of andreasviklund.com, and author of the widely used andreasXX, Daleri and Variant website template series.
This entry was posted in Build, Featured and tagged , . Bookmark the permalink.
  • http://www.logisticadescomplicada.com Leandro

    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.

  • http://www.logisticadescomplicada.com Leandro

    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.

  • http://www.logouth.com.ar Facundo

    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!

  • http://www.logouth.com.ar Facundo

    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!

  • http://www.centrostudilaruna.it/huginnemuninn Alberto

    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.

  • http://www.centrostudilaruna.it/huginnemuninn Alberto

    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.

  • http://andreasviklund.com/ Andreas Viklund

    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.

  • http://andreasviklund.com/ Andreas

    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.

  • Nian

    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.

  • Nian

    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.

  • http://www.kaiserwebs.com Kaiser Mangampo

    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

  • http://www.kaiserwebs.com Kaiser Mangampo

    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

  • http://andreasviklund.com/ Andreas Viklund

    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!

  • http://andreasviklund.com/ Andreas

    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!

  • Nian

    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?

  • Nian

    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?

  • http://www.sokmotoroptimering.nu/ David

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

  • http://www.sokmotoroptimering.nu/ David

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

  • http://www.kamranweb.com Kamran

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

  • http://www.kamranweb.com Kamran

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

  • http://andreasviklund.com/ Andreas Viklund

    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.

  • http://andreasviklund.com/ Andreas

    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.

  • Nian

    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?

  • Nian

    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?

  • http://www.antivirusoffers.com.au Chris

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

  • http://www.antivirusoffers.com.au Chris

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

  • http://marcusnilsson.org Marcus Nilsson

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

  • http://marcusnilsson.org Marcus Nilsson

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

  • http://bttb.aiospace.com Martin

    It looks pretty awesome and is free! Thank you!

  • http://bttb.aiospace.com Martin

    It looks pretty awesome and is free! Thank you!

  • http://roms.g1g2.org/ Rom Guy

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

  • http://roms.g1g2.org/ Rom Guy

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

  • http://prepaidradar.de/ Mike

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

  • http://prepaidradar.de/ Mike

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

  • Patzee

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

  • Patzee

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

  • http://www.pvcfonster.n.nu J

    Looks really good, will surely try it out!

  • http://www.pvcfonster.n.nu J

    Looks really good, will surely try it out!

  • http://billiga-forsakringar.nu Simon

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

  • http://billiga-forsakringar.nu Simon

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

  • http://www.dvdcopysoftware.com.au Alex

    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 :-)

  • http://www.dvdcopysoftware.com.au Alex

    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 Jong

    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!

  • Hans Verkerk de Jong

    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!

  • http://www.rentacampervan.com.au Gruber Van de Camp

    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

  • http://www.rentacampervan.com.au Gruber Van de Camp

    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

  • http://www.faceplate.se Faceplate

    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!

  • http://www.faceplate.se Faceplate

    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!

blog comments powered by Disqus