oscMax Templates BTS process

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.

to have an empty div.
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}

  

  

 

 

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.

  

{content}

  

 

 

This makes the code moves correct but the stylesheet.css will need some adjustments.

/* Sidebar */
#sidebar {
float: left;
width: 210px;
padding: 25px 10px 0 20px;
}

Changes to

/* Sidebar */
#sidebar {
float: right;
width: 210px;
padding: 25px 30px 0 5px;
}

So this gets me to the middle of the page and wanting to look at the content.

To modify the content of this page, go to your Admin Panel -> Configuration -> Templates -> Information Manager or Page Modules.

The content of the main page is really part stylesheet, part code, part html and part admin functions.

To clear all the boxes and start fresh, turn off / de-activate all the info boxes and all the page modules linked to the index page.

The rest is just messing with css to get the positioning and formats correct.

Leave a Reply

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