[gb2world]

I've got the debugging console open but I see files like head_admin.tpl instead of just head.tpl

Be careful, the pop up goes with the page that was last loaded - including administrative pages. When you turn it on - the pop up applies to the administration page where you turned it on. You need to go to the page you care about, and reload it - then the pop up will reload for that page. So - the pop up gets reloaded as you move around and applies to the last page loaded.

I noticed in webmaster mode you can click on text and replace it with things but you can't actually delete the text but haven't found to much use for it yet.

Look up Language Variables in the documentation - that will explain the text you are editing in Webmaster mode. (While you are at it - take a look at the webmaster mode documentation.)

I've read the smarty crashcourse and most of that makes sense but I'm not 100% how it relates to the .tpl

The web master mode console also has another important function that hopefully will help you to get what the smarty is doing. In the section called "assigned template variables" of the webmaster mode pop up, you are provided all the smarty variables that are being passed to the template, and what each of those variable's value is set to. Smarty is the template designers tool for manipulating the variables to get the effect they want.

Think of it this way - Say you have two people working on your project - A php programmer who does not care too much about the look-and-feel, but is very interested in getting data from the database and programming the functionality to control all the page builds. You also have a designer who does not have time to learn php, but really wants to focus on the the site layout and presentation. (You can take the designer role in this scenario).

The webmaster mode console is one of the ways that the php programmer tells you all the variables that she has made available to you on a particular page load, as well as, all the templates used to build the page.

An example: Say you are the designer again, and you are on the product page, and you want to display a pretty image if the product has been assigned to the main category 2. You already know the html and css to do it, but you don't know how to tell when the product is from the category in question, and you don't know what template to edit.

First - you reload a product page while in webmaster mode - and take a look at the pop up.

The "Included templates & config files" section is among all the good advise Tal has provided to you. You run your mouse over the file names and find the one that puts a border around where you want to place the image. You go look at that template and you can recognize the html and css classes because you have firebug open and are also looking at the html/css of the generated page. You also see smarty code in the template that is making if/than type decisions and looping through arrays and displaying variables. You save understanding that for later.

Now you scroll down in the webmaster mode pop up to the "assigned template variables" section to see all the variables your php programmer has made available to you on this page. You see that she has given you a variable called $cat that is set to the products main category. You snoop around a little more, and see she has given you an array called $current_category with other information about the category that you might be able to use later. You remember that you had seen the variable {$ImagesDir} in one of your templates - and you see it in here and that it is set to /skin1/images, and you recognize that this is the path to where you have been putting your graphics.

Now, you don't even have to call her, she is kind of grumpy. You can use smarty to do what you want with the category in your design of the product page. You add something like this to your template:
{if $cat eq 2}<img src="{$ImagesDir}/we-love_this_category_{$cat}.jpg" alt="We Love This Category" /></if}
Then, on the product pages when the products are in category 2 - this is the html that gets generated:
<img src="skin1/images/we-love_this_category_2.jpg" alt="We Love This Category" />

Then you decide you want to get fancy and have a different background image for every category and set up css classes for every category. You already know css, so you discover this may not be so hard to do.
<div class="image_{$cat}"><p>We need different backgrounds and images per category here!</p></div>

So you can set up unique css for different images for different products, depending on which main category they are in. You add this to your css file and use firebug to get everything just right:
.image_1 { height: 20px; width:30px; background: #ffffff url(images/we-love_this_category_1.jpg);float:left;}
.image_1 p {color:#cc0000;}
.image_2 { height: 30px; width:50px; background: #000000 url(images/we-love_this_category_1.jpg) no-repeat left top;;float:right;}
.image_2 p {color:#ff0000;}
...

You are having so much fun now that you look more at your webmaster mode smarty variables, and you see an array called $product with lots of good stuff in it. You see that the manufacturer is in there, which is great, because you wanted to put that somewhere on the page. You add this to the appropriate template:
<p>This product is made by {$product.manufacturer}.</p>

Do you feel the power? This give you lots of flexibility in your design - without having to know php, or how to query the database. If you don't see the variable you need in the console - then you have to call up your php programmer and tell her what you want to do, and she may be able to pass you the information you need.

When starting - just make sure to keep backups and dive in. Try things and if it does not work - you can always revert to the back up

Develop your site using firefox as the primary browser and then once finished go back and check it in other browsers.

I wouldn't wait until finished to check other browsers. I'd advise keeping IE open and looking at it fairly often while developing. IE is less forgiving with css and html errors, and you can see them as soon as you make them, rather than much later when it may be more difficult to find and fix. Also - advisable to check W3C verification frequently. The templates start out generating css and html compliant to the standards. Best to keep your changes compliant and not stray too far.



Good Luck!