I thought it might be interesting for you to “watch” a template build as I do it. So what I will do is screenshot every so often so you can see how it is coming on.
This is a mockup that I am going to attempt to come close to;
After I am finished, I -might- try Julians idea of creating some cheat sheets for the different component parts of the template. I also will be selling the template, of course.
The result
Read on for a bit of info as to how it was done. If you compare it against my sketch that I made this morning, I think it stacks up fairly well!
Let me know what you think about this blog post (and the comments!), and what you think about the template that I created today…
Step 1 is to make the top part of the Header area. You can plainly see that the header area contains the logo and 3 boxes (1 for currencies/language, 1 for some links and 1 for a cart summary). That is my first task, to get the foundation in place…the content for the 3 boxes will be added later.
This promises to be really interesting, I look forward to reading more. 🙂
So, that first part of the header area was quite simple, using the 960 grid system to get the “boxes” in place, then adding a bit of extra style to make them blue. The logo came from creatr.cc.
Changes made
1. /includes/header.php
2. /stylesheet.css
3. New Logo, uploaded using admin functionality
4. New white graphic, used as a border for two of the blue boxes
Next task
Change the usual breadcrumb to make it a little better looking AND open up a space for a searchbox (in the right side of the breadcrumb).
Breadcrumb completed, with a space for the search box;
Changes made
/includes/header.php
/stylesheet.css
new image for “home”
new “arrow” image for breadcrumd
/includes/application_top.php
Next task
Coffee. Then I will work on the Categories box.
Making the change to the Categories box was very simple as I only wanted to make the whole column wider and give the category box rounded corners.
Changes made
includes/classes/osc_template.php
includes/modules/boxes/bm_categories.php
stylesheet.css
Then I decided to add arrows showing the parent and sub categories.
Changes made
2 new “arrow” graphics”
includes/modules/boxes/bm_categories.php
Next task
The “new products for month” module.
Recoding the “new products” was a bit more complicated than I anticipated as I wanted to give it a much nicer look (more like the infoBoxes). I also wanted to present more information, namely a short description of the product – notice that this description does not cut off words halfway…
Changes made
/includes/modules/new_products.php
stylesheet.css
new image for background
/includes/languages/english.php
Next task
Image fader on the index page.
The image fader on the index page was really simple as I just re-used some code that I previusly made. I also re-used a sample image (obviously in real use, the shop owner would create images to use in the fader);
Changes made
addition of jquery innerfade
index.php
stylesheet.css
/includes/template_top.php
Next task
Add a new infobox to the bottom of the Categories infoBox.
So that was fairly easy – a new infoBox just containing a graphic. Obviously the shopowner would make a prettier graphic lol
Changes made
add infobox /includes/modules/boxes/bm_banner.php & language file
add new grey background graphic
add new “special offers” graphic (links to special offers page)
Next task
Footer area. NOt shown in my original graphic.
looks good and an interesting read.
The switching banner/rotator – you are making this linked for each image right?
The fader is linked from image to product.
Footer area is now done – basically copied off the previous template;
Changes made
/includes/footer.php
background graphic
stylesheet.css
Next task
Fill in the blanks in the header area.
Quite a lot of work to fill in the blanks in the header area, so I will do it one by one.
A. Add in a log in/log off link. Decided to do this at the end of the breadcrumb bar. Looks decent I think;
Obviously the text changes to “log off” when the customer is logged in. It’s very important to give customers an easy way to logoff, as one of my clients foind this week after we amended the look and removed the logoff link (without thinking about it!). Ooops.
Changes made
/includes/header.php
new “person” graphic
B. The information box. Made some new language defines for this, as well as it’s own module, taken away from the template execution class for ease of use. Looks OK;
Changes made
new infobox (not using execution class) /includes/modules/header_information.php
few new language defines
new green “dot” graphic
/includes/header.php
stylesheet.css
For the shopping cart box, I want to keep this fairly simple;
If there are any items in the cart;
You have x item(s) in your cart, totalling $xxx
[ view cart button ] [ chekcout button ]
And if there is nothing in the cart;
You have nothing in your cart 🙁
[special offers button ]
if contents in cart;
and if nothing;
Changes made
couple of defines in /includes/languages/english.php
custom code in /includes/header.php
Changes made
/includes/header.php
2 new modules taken away from the template execution
a few new language defines
Next task
Search box in the header
Nice looking search box!
Changes made
Custom coded searh module /includes/modules/header_search.php
new search icon
/includes/header.php
Next task
Give the site a background. Not sure if I will use it, but want to see what it looks like.
1 final small detail – I recoded the new bm_banner.php file to use the banners functionality in the Admin section. Now the shop-owner can control the image how he wants.
In the end, this whole theme only modified 10 core oscommerce files. Numerous new files (mainly images) were added. But for anyone looking to buy a template, the amount of core files that are modified is an important thing to know – the less there are, the easier the install!
Next job is to get the template wrapped up, ready for download. And decide upon a cost.
I’m going to price this template really low; $49, including installation for a limited time. Interested? Email me on oscshops AT gmail DOT com
Remember, this is a template for the latest 2.3.1 release of osCommerce, not older versions.
Nice one first up 🙂
header_search.php
Do you distribute this mod or was it from contribe on oscommerce cannot find it for 2.3.1
Mike
gary, do u have any pics of the product page?
thx
Ed;
Mike – there is a contribution that allows a search box in the header. If you want to DIY, all you need to do is rip out the search functions from the search box.
On many template sites I saw that only 1 language (english) is supported by OSC 2.3.1.
Why?
Please explain?
Alen – osc 2.3.1 ships with only english. Adding another language is easy and any template should be able to cope with that.
There is a possibility with many templates that the language is hard coded so adding additional languages to English is not easily possible – unless of course you rewrite the template…
Thanx Gary and Xpajun.
I have shop since 2003 (2.2. MS2) :)))
I translate every file.
I want to install another one for my friend so I was scared that 2.3.1 version with premium template dont support classic translation procedure.
What part of the coding do I change to widen the category box, I have got the files open now that you said the changes were made to
Ian – the template class file. /includes/classes/osc_template.php – play with var $_grid_column_width but remember that 2 * $_grid_column_width + $_grid_content_width MUST equal 24.
Eg: 6 and 12. 4 and 16. 1 and 22
Also, you might want to consider getting a pro design (cost from $275) or a template on which to base your changes (from $99).
Hi Gary
like this one, where can this be downloaded?
Thanks , Renzo
Hi Renzo – it’s a template I am now selling over at my other site. Price is $99, but I am still honouring the $49 price for a few more sales.
Hi,
Thanks for your great blog, it helped me well !
Well i customized the header ( oscommerce 2.31 )and add a new layer at the top where i would like to move the currencies form into this layer, like you did on your example.
Could you help me ?
Many thanks !
Hi, my osCommerce Design eBook shows exactly how to do this, and a lot more. You will learn a lot from it. Cheers, Gary
very good