The previous post on BTS in osCmax consisted of running notes as I worked. Having done all of that I realised that I was mis-directed in what I was doing.
Applying all the changes to the main_page.html and it’s siblings I found that this applied it to every page in the site. Hmm, not the desired result. So I’ve delved further and read further and while I am still not clear there are several posts that help, if you put them all together.
The first reference in the osCmax forums is this lengthy tutorial on modifying a osCommerce style template to suit. It probably still applies or adds knowledge but it is getting a bit dated.
I’ll add other links here as I find them.
Searching for free or even retail osCmax templates appears to generate few results with almost none available, or at least I ain’t found them. Sites proclaiming to have them return blank results when searching or checking the osCmax category. So I need to be able to roll-my-own.
My first blog entry on Modifying Templates in osCmax was a helpful learning exercise for me albeit misguided and I’ve used that as the kick-off for the next steps which is to ensure that I can control all pages in the site with minimal coding edits (i.e. I don’t want to modify the core product if I can avoid it.) and using the database entries and template process as much as possible.
Update 24th June 2011: I’ve now done more with templates in osCmax and the following is informative but not entirely correct. If you are working with osCmax templates start at my documentation entry.
These are just my running notes on using the template system in oscMax.
I use a dev server at home and edit all my websites as copies from the live servers. This makes it easy to get to the files either as a hosted site or as a Windows Explorer fileshare. So I setup a new oscMax dev site specifically for template creation.
For me the easiest thing to do is not use an existing osCommerce or similar template. If you are swapping to oscMax from osCommerce or any of the forks of that application then take the opportunity to learn the new template process and refresh your website. I dithered on and off for a month trying to find a way to convert from old to new. Waste of time I think.
So I grabbed one of the existing templates in the oscMax install, copied it to a new directory under templates, and set my dev install of oscMax to use the new one as the default. Where? In the admin for the store:
[php]Configuration->Templates->Template Setup-> top item is Default Template Directory[/php]
Not exactly obvious but you probably do not need to use it too often.
Ok so I now have a directory. What do I need to edit? Potentially everything and possibly little. It will be tweaking the css and the controller scripts.
I use EditPlus as my script editor and have done for 8 or more years (I cannot remember but its a long time) for php and html.
What I do is have my EditPlus open and set for the template folder and I use the Search in Files option to find the references I need to change. In tandem with Chrome or a browser with element analysis option you can pretty quickly work out what the scripts call the item that you want to change and then find it in the appropriate script or css file. If you are a newbie then try using the w3schools site for basic css and html lessons.
So into the templates for oscMax. The default option I copied is a template called Compromise. It has a distinct WordPress feel and suited the template design that I wanted to develop. Note that I am working from a template or design in Photoshop.
The first edit was the logo image. Open the main_page.html file and around line 23 is the html element for the logo. Remove this.
Then open the stylesheet.css file and locate the #logo section and edit it to the appropriate dimensions and image link.
#logo {
float: left;
width: 350px;
height: 80px;
margin: 25px 0px 0px 1px;
color: #000000;
background: url(images/my_new_logo.png) no-repeat left top;
}
If you wanted text to be shown with the image enter it in the html logo div section. But I prefer to just use a formatted image. When working from Photoshop breaking up the main sections of the design is easy with pixel based measurement during the slice’n’dice work.
Next I wanted to use a similar menu bar across the top
Just modify the items in the unordered list (ul) between the line item (li) tags to whatever menu title and link. This is not a fancy drop-down menu, it is just a simple 5 or 6 top links to drive users to the main sections of your site.
Once the names are changed in the main_page.html you will want to modify the menu section in the stylesheet.css to change colours, background images and positioning.
I wanted to remove the breadcrumbs from the home page so I removed the reference around line 40 in the main_page.html
{breadcrumbs}
to just be
So that took care of the header layout with the exception of a search or login option which I will come back to.
The next step was the main body of the page. In the main_page.html this looks like:
{content}
{columnleft}
So there are 3 effective div controls in wrapper, btm and page which will all influence the information within the two actual div containers of content and sidebar.
I wanted a right sidebar not left for this template so I simply swapped the relevant divs.
{columnleft}
{content}
This makes the code moves correct but the stylesheet.css will need some adjustments.
