In osCmax 2.5 templates how do all the files relate to each other?

From the various sources that I have found (see my osCmax templates documentation listing) the following relationships exist.

The templates directory contains a master template called fallback. As the name implies this is the template that the system will ‘fall back to’ if there is no specific template instruction. It is not just the default template. As you will find, if you make your own custom template, and in that template for a particular page you do not specify a design then the system will check your custom template, find nothing, and will fall back to using any design controls for that page from the fallback template.

So if your template is called yoursite and it wants to use a content template called your_page it will look first for:
[php]
/templates/yoursite/content/your_page.tpl.php
[/php]
and if it is not found it will look next in the fallback template for the same file
[php]
/templates/fallback/content/your_page.tpl.php
[/php]
The assumption is that your_page is a standard page in osCmax and that for each page a content template exists. In your own template area, you only need to have a content template for the pages that you want to modify to be different from the default fallback template. The osCmax Wiki has some similar & related information on this topic.
So what is fallback vs fallback_html in the templates directory? Searched for hours and cannot see how fallback-html is used. The fallback template directory is fallback, not fallback-html. There is no reference to the fallback-html file in any file in osCmax and there is no reference to indicate that there is code to append -html to an existing fallback value.

So why does fallback-html exist and how is it meant to be used?  No idea at this time. Perhaps it is just an html tagged version of the fallback template. But that implies that for it to be effective, you have to link to it?

I raised it in the osCmax forums and it is, as I suggested above, a tagged version of the fallback template. A more appropriate title appears to be ‘sample-html-tagging’ and apparently 2.5RC1 includes files in the content directory that should be removed. You only want control files in the content directory for the pages that you want to modify from the default (fallback) settings.

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.

Compromise for osCMax

original design by <a href="http://www.freecsstemplates.org/”><br />
Free CSS Templates

#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;

}

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}

  

&nbsp;

 

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}

  

&nbsp;

 

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.