2.3.1 Template – watch as I build…

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…

33 Replies to “2.3.1 Template – watch as I build…”

  1. 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.

  2. 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).

  3. Breadcrumb completed, with a space for the search box;

    Changes made

    new image for “home”
    new “arrow” image for breadcrumd

    Next task
    Coffee. Then I will work on the Categories box.

  4. 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

    Then I decided to add arrows showing the parent and sub categories.

    Changes made
    2 new “arrow” graphics”

    Next task

    The “new products for month” module.

  5. 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
    new image for background

    Next task

    Image fader on the index page.

  6. 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

    Next task

    Add a new infobox to the bottom of the Categories infoBox.

  7. 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.

  8. The fader is linked from image to product.

    Footer area is now done – basically copied off the previous template;

    Changes made

    background graphic

    Next task

    Fill in the blanks in the header area.

  9. 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

    new “person” graphic

  10. 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

  11. 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 ]

  12. if contents in cart;

    and if nothing;

    Changes made
    couple of defines in /includes/languages/english.php
    custom code in /includes/header.php

  13. Changes made
    2 new modules taken away from the template execution
    a few new language defines

    Next task
    Search box in the header

  14. Nice looking search box!

    Changes made
    Custom coded searh module /includes/modules/header_search.php
    new search icon

    Next task
    Give the site a background. Not sure if I will use it, but want to see what it looks like.

  15. 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.

  16. 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.

  17. Nice one first up 🙂

    Do you distribute this mod or was it from contribe on oscommerce cannot find it for 2.3.1


  18. 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.

  19. On many template sites I saw that only 1 language (english) is supported by OSC 2.3.1.

    Please explain?

  20. Alen – osc 2.3.1 ships with only english. Adding another language is easy and any template should be able to cope with that.

  21. 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…

  22. 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.

  23. 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

  24. 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).

  25. 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.

  26. 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 !

Leave a Reply

Your email address will not be published. Required fields are marked *