Create a new Magento theme
23 Comments 10th OCT 2008 | Posted by Tomislav Bilic in Magento
There are many new Magento stores that are published each day. If you are with Magento for a longer time, you will also notice that many of those look similar to default or modern Magento theme. Creating an totally unique and custom one can be a difficult process, easpecially taking into consideration number of different interfaces we have. This is why many Magento developers choose to use the CSS from one of mendioned Magento themes that come with default installation and style those up. This is not a bad choice at all as it speeds up the process and those default themes are very good. But, for those of you who wish to make an extra effort, we suggest that you to take a look at Magento Blank Theme for a head start.
Before you get to this point, be sure to read Magento Designer’s Guide, where the Magento design terminology is explained in this PDF document.
Blank Theme is a sample skeleton theme for Magento designer and a perfect way to start a new one. Let’s be honest, we will rarely want to develop a totally new layout. We wish the header on the top, footer on the bottom. We wish to have 1, 2 or 3 columns, we wish to have boxes. Blank Theme does just that: provides a layout, but without any heavy styling. This makes it excellent base ground for a new Magento project. It doesn’t come with default installation, so you will have to use Magento Connect to get it.
http://www.magentocommerce.com/extension/518/blank-theme
Magento community member Ross gave a good review comment:
This is a great theme to use for wire-framing or as a base for developing a custom theme! It looks like a lot of work has gone in to slimming down the HTML and CSS, which makes it much easier to work with compared to the default theme. I particularly appreciate the well structured and commented CSS. The only things I would want different at this stage is for the ‘callouts’ to be taken out (and removal of associated media images), and for this theme to be included in the main Magento download (I would even like it to be the ‘default’). 5 stars from me!
Take a sneak peak of how does product info page looks line with no styling, but in finished layout. I’m sure that the CSS wizards will find this invaluable.
If you like what you read, please share it.
To post code in comments, place your code inside [code] and [/code] tags.
There are 23 comments (Add Yours +)
Meet The Inchooers, the funny bunch of magento developers.
October 15th, 2008 at 12:04
Excelent tip, its good to remember how to download this theme!
You need get a key from the official site for this, then go to System->Magento Connect->Magento Connect Manager, then paste the key in field! =D
October 17th, 2008 at 6:26
My second post in a matter of minutes:p
This one was sent from heaven, thank you very much. I was actually thinking of making my own – and how many endless hours would that take… This will provide a good start next time I have to setup a Magento site.
December 10th, 2008 at 13:53
Could you please send me the original file from this PDF, like the Indesign File for example?
I really wish to translate it to brazilian portuguese using the same layout.
Thanks!
Best wishes,
Eduardo
January 12th, 2009 at 16:55
Thanks for this article.. I’m starting to study Magento when I’m searching oscommerce website. Then I found magento and I’m interested to it.
please give me more link where can I donwload or read tutorials about magento.
Thanks,
Deviantz
February 28th, 2009 at 5:41
Since Magento runs on .xml and .php code, is it possible to add the date and a random quotation script using .php to the top of the header in the shopping cart? How could I create this? Feel free to email me specialtyxpress at yahoo . com please. I’m willing to pay something for the instructions if it is not freely available in the forums.
Thanks in advance
Leslie
March 13th, 2009 at 11:40
beautiful, thanks
April 7th, 2009 at 19:40
Thanks for the article, it will surely speed up our work, we often find CSS work is required to overcome odd styles set in the default, (just spent an hour on the top menu to find a background image coursing the dashed divider line). Having a wired frame to apply our styles to is a brilliant idea. Can’t wait till I can use it on our next Magento job.
July 12th, 2009 at 5:19
Is there a way to customize a non-default theme like this one by making another non-default theme? I’d like to install a theme, then create a theme that is higher in the hierarchy with just the files I want to change. Is this multiple hierarchy ability even setup yet in Magento, as they describe it in the Designer’s Guide? They give examples (default, theme1, theme2), but never spell out how to do it.
August 3rd, 2009 at 16:31
So, where is the tutorial? Thanks for misleading me.
August 4th, 2009 at 10:48
Hello Someone,
Well, you learned that having a good title is very good for attracting visitors. Just joking.
We are aware that this article is not an actual tutorial. Only one hind for a healthy start.
August 14th, 2009 at 9:45
Good advice. Is this theme also the seo friendly one?
November 4th, 2009 at 8:45
I would recommend that you change the blank theme to blank theme seo
It’s the best way to start
Blank SEO Theme:
http://www.magentocommerce.com/extension/974/yoast-blank-seo-theme
November 27th, 2009 at 17:07
Blank theme seo rules
November 27th, 2009 at 17:11
Heh.
This article was posted looong time ago and since then we changed our opinion. Although it seems like a good idea to start with it, it starts to be a real pain very soon. Basic structure is there, but you have to manually style each padding in the box, each line height, each margin, title, paragraph. Theme styling on blank one takes 3x more time that re-skining default one. To summarize: USE DEFAULT THEME as a baseground. It will be faster.
December 1st, 2009 at 16:08
links or tutorials on this would be great!
is this SEO friendly?
Thanks
January 7th, 2010 at 12:22
i had completed all my html work of my new website.
now i want to integrate these htmls with magento is there any simple way to integrate my custom theme to magento without any significant changes??
January 7th, 2010 at 13:46
@Salman
There is no simple way.
January 8th, 2010 at 11:50
salman ismail Says
January 7th, 2010 at 12:22
i had completed all my html work of my new website.
now i want to integrate these htmls with magento is there any simple way to integrate my custom theme to magento without any significant changes??
if there r no simple way then tell me how to do this??plz
February 7th, 2010 at 23:28
Once Yoast Blank SEO is installed, how do you activate it? I’ve tried setting it up under Configuration > Design > Themes >Default but can’t get the new look to appear.
February 8th, 2010 at 1:10
Is there a guide or tutorial on how to customize the blank theme?
April 28th, 2010 at 6:04
[...] Creating a new Magento Theme by Inchoo. Just a short, to the point, look at creating themes with Magento. [...]
June 20th, 2010 at 0:35
[...] [...]
August 10th, 2010 at 18:11
Is there a way to programmatically change the sites theme. My goal is to check whether the admin is logged in and if so show the new theme that is under development?
Thanks!