2.3.1 Template – watch as I build…

By | February 3, 2011

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 thoughts on “2.3.1 Template – watch as I build…

  1. Gary Post author

    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. Gary Post author

    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. Gary Post author

    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.

  4. Gary Post author

    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.

  5. Gary Post author

    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.

  6. Gary Post author

    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.

  7. Gary Post author

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

    looks good and an interesting read.

    The switching banner/rotator – you are making this linked for each image right?

  9. Gary Post author

    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.

  10. Gary Post author

    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

  11. Gary Post author

    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

  12. Gary Post author

    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 ]

  13. Gary Post author

    if contents in cart;

    and if nothing;

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

  14. Gary Post author

    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

  15. Gary Post author

    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.

  16. Gary Post author

    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.

  17. Gary Post author

    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.

  18. Mike

    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

  19. edward

    gary, do u have any pics of the product page?

    thx

  20. Gary Post author

    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.

  21. Alen

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

    Please explain?

  22. Gary Post author

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

  23. Xpajun

    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…

  24. Alen

    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.

  25. Ian Haney

    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

  26. Gary Post author

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

  27. Renzo

    Hi Gary

    like this one, where can this be downloaded?

    Thanks , Renzo

  28. Gary Post author

    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.

  29. Siouxie

    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 *