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.
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:
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.
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!
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.
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.
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.
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
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!
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?
“Den som väntar på något gott, väntar aldrig för länge” :)
Wow, this template is totally beautiful!! Thank you so much!
Any chance of converting one of these for blogger?
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.
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?
Andreas – wow! Just wanted to quickly say thanks for continually contributing your designs so generously. Hope you are well.
Good job on this new template. I love the fact that you can choose between a number of different layouts.
It looks pretty awesome and is free! Thank you!
OMG, this is a very pretty design, great work. Thanks.
This template is nice! Thanks for your work! :)
Wow! You’ve sure been busy. Many thanks for the template.
Looks really good, will surely try it out!
I like this template because of its simplicity even if my favourite of your templates is wp-andreas01, that one is great!
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 :-)
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!
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
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!
Hey, great template. Thanks for sharing.
Also, you can get more template here http://vietsolutions.org/category/templates
Thanks again!
Is this template sin html5 and working to drupal? i’m running wordpress with html5 here http://www.nordiskabadrum.se but preffer drupal
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.
Thank’s for the fast reply, I will test your new templates in the next project.
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
Hi! Thks for template, we also design web sites http://belnet.biz
Andreas, thank you for this template. It is very interesting how many peaople used it…
Thank you for template, it is very useful. ;) I would like to see more.
Nice, will have to try it on one of my comming websites.
Looks very nice, I surely will try it out.