WORK IN PROGRESS I decided to write this taking some information from Gaile's Tutorial because I found myself getting confused. Personally I'm a visually person and it went into a lot of explanation on what edited one, what TR and TD commands used, where what went where. Not everyone is very familar with Table setup and a lot of people use a web editing program like Dreamweaver, Frontpage or some freeware. Now that I've actually done it, everything is much easier but I was trying to understand what the code meant and couldn't visualize it. So I've broken down into a few easy steps.
1. First design your website or the template for your Gallery. Gaile's Gallery Custom Tutorial Guideprovides a lot of good information. It also has code you can C&P and explains what does what. All the comments unfornately was confusing me because I just needed to know where to break up the HTML in my layout into Header and Footer.
Example 1 - Simple Layout Example 2 - More Complex Layout
In these two examples you can see where everything is laid out. Example 1 lets you edit the sections you want. All you need to do is go to View > Source and then C&P (Copy and Paste) the code into the html portion of your wed editor. Example 2 is a little more complex but it shows you more what I mean by design your layout. Leave a large portion in the middle for your gallery, as you can see by the large white space.
2. Label Your Gallery Space
What I mean by that is in your editor or the blank space you've left for the Gallery put in there This is your gallery. Example 1 shows where I have done so, Example 2 - More Complex Layout shows the white space where you will need to label your Gallery Space.
I found labeling the space makes things easier because you will mark in the code where you will be breaking your layout into 2 seperate portions Header and Footer. Basically your Header file will contain the top banner cell and your left column, the Footer contains the right column and bottom. It then will wrap around your gallery, hence the name Wrapper. A lot of mistakes I've made was from C&P the columns, which was right but if you miss a TR, TD tag or leave something open without a close tag it will cause the layout to distort.
View the HTML portion of your layout in your web editor. Go to where you have labeled "This is your Gallery" and you'll see that the text will be between a <TD and a </TD tag. Highlight anything above your text, "This is your Gallery" from the <TD tag above it all the way to the top. Cut and paste that into your wrapper.header.default (located in your html_wrap directory) at the end after all the php code. Everything under your text, "This is your Gallery" from the </TD tag and below, cut and paste that into your wrapper.footer.default (located in html_wrap directory) at the end after all the php code.
3. Upload and Test It. Now upload your wrapper files back into their directory and go your gallery to see the changes. After I got it figured out I was able to make changes fairly quickly without any issues. When you first start out it might take a couple times to get it right, the trick is just knowing where to C&P for your header and what goes into your footer.
I hope that helps someone. This was written fairly fast but sometime when I get some time I'll flesh it out more with screenshots to give a more visual presentation so that things are easier to understand. I know reading a few paragraphs of instructions can be confusing espcially when there are a lot of TD, TR, etc tags and if you have no real experience editing HTML it makes things difficult. Let me know if there are things you'd like more detail on, screenshots on, etc included in the Tutorial and I'll try to add them. Thank you.
sample 1
<!-- ** --> <!-- START OF HEADER --> <!-- ** --> <div align="center"> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr valign="middle"> <td colspan="3"> <p align="center">This is your Header</p> <p align="center"> </td> </tr> <tr valign="top"> <td width="20%"> <p>This is your Left Info bar.</td> <td width="60%"> <!-- ** --> <!-- END OF HEADER --> <!-- ** --> <!-- ** --> <!-- START OF FOOTER --> <!-- ** --> <p align="center">This is where Gallery Goes</p> </td> <td width="20%">Right Menu Bar or spacer</td> </tr> <tr valign="middle"> <td colspan="3" align="center">This is your Footer</td> </tr> </table> </div> <!-- ** --> <!-- END OF FOOTER --> <!-- ** -->
