Noob hoping for insight into how my IPB template works

Hey there,

I'm running Invision power board and am looking to do some modding to the skin template, to move some things around in my photo gallery. however while I understand the CSS and HTML to get the visual elements looking the way I want them, I don't know hardly anything about programming to help me figure out how to edit the functions associated with the different elements so that they ALSO move into the new location.

Example:

On this photo display page:
http://www.goculver.com/culvertalk/index.php?act=module&module=gallery&cmd=si&img=506

I would like to change it so that the "photo strip" along the bottom of the page, in fact runs vertically alongside the displayed image, to the right of it.

Now I know more or less how to put the photo strip in place where I want it. however what I don't know is how to edit the scripts and functions the GENERATE the photo strips functionality.

Below is an abridged version of the skin template file for the single image view in Invision Gallery:

There are three sections in it related to the photostrip, "photostrip" "photostrip recur" and "photostrip nonrecur".

"Show image" is the main section with the HTML that organizes the over all page.

How do I move the three photo strip elements INTO my desired spot within the "show image" element and also move over the functionality of the three photo strip segments?

I know this is a lot to ask but I'd really appreciate some pointers. Thanks! I'm a fast learned and just need to see the logic of how a file like this works. I don't get how the different sections relate to one another really.

<?php
/*--------------------------------------------------*/
/* FILE GENERATED BY INVISION POWER BOARD           */
/* CACHE FILE: Skin set id: 46                     */
/* CACHE FILE: Generated: Wed, 03 May 2006 23:34:33 GMT */
/* DO NOT EDIT DIRECTLY - THE CHANGES WILL NOT BE   */
/* WRITTEN TO THE DATABASE AUTOMATICALLY            */
/*--------------------------------------------------*/

class skin_gallery_img {

//===========================================================================
// ApproveComment
//===========================================================================
function ApproveComment($info="") {
global $ibforums;
$IPBHTML = "";
//--starthtml--//


$IPBHTML .= <<<EOF
<br />
<div class="tablefill">
	<b>{$ibforums->lang['not_approved_c']}</b><br /><br />
	<form method="post" action="?act=module">
		<input type="hidden" name="module" value="gallery" />
		<input type="hidden" name="cmd" value="si" />
		<input type="hidden" name="comment" value="{$info['pid']}" />
		<input type="hidden" name="img" value="{$info['img_id']}" />
		<input type="hidden" name="op" value="approve_comment" />
		<input type="radio" name="approve" value="1" /> {$ibforums->lang['approve_c']}<br />
		<input type="radio" name="approve" value="0" /> {$ibforums->lang['decline_c']}<br />
		<input type="submit" name="submit" value="{$ibforums->lang['go']}" />
	</form>
</div>
EOF;

//--endhtml--//
return $IPBHTML;
}


//===========================================================================
// CommentFooter
//===========================================================================
function CommentFooter($data="") {
global $ibforums;
$IPBHTML = "";
//--starthtml--//


$IPBHTML .= <<<EOF
</div>       
<br />
<table cellspacing="1">
	<tr>
		<td width="20%" nowrap="nowrap">{$data[SHOW_PAGES]}</td>
	</tr>
</table>
EOF;

//--endhtml--//
return $IPBHTML;
}

//===========================================================================
// CommentRow
//===========================================================================
function CommentRow($post="",$author="") {
global $ibforums;
$IPBHTML = "";
//--starthtml--//


$IPBHTML .= <<<EOF
<!--Begin Comment Number {$post['pid']}-->
<a name='p{$post['pid']}'>
<table cellspacing="1">
<tr>
<td valign="middle" class="row6a" colspan="2">
<!-- POSTED DATE DIV -->
<div style="float: left;">
<span class="postdetails">
<img src='{$ibforums->vars['img_url']}/to_post_off.gif' alt='post' border='0' style='padding-bottom:2px' /> {$post['post_date']}
</span>
</div>
<!-- REPORT / DELETE / EDIT / QUOTE DIV -->
<div align="right">
<span class="postdetails">{$post['ip_address']} {$ibforums->lang['post_link']}
<a title="{$ibforums->lang['tt_link']}" href="#" onclick="link_to_post({$post['pid']}); return false;" style="color: #ffffff;">#{$post['post_count']}</a></span>{$post['report_link']}
</div>
</td>
</tr>
<tr><td class="row8" width="1%">
<a name="post{$post['post_id']}"></a>
	{$author['avatar']}
</td>
<td class="row8">
<span class="postdetails">
<span class="{$post['name_css']}">{$author['name']}</span>
<br />{$author['title']}<br />{$author['member_posts']}</span>
</td>
</tr>
<tr>
<td colspan="2" class="{$post['post_css']}">
			<!-- THE COMMENT {$post['post_id']} -->
			<div class="postcolor">{$post['comment']}</div>
			<!-- THE COMMENT -->
</td>
</tr>
<tr>
<td class="{$post['post_css']}" nowrap="nowrap" colspan="2" align="right">
<!-- PM / EMAIL / WWW / MSGR -->
	<!-- REPORT / UP -->
         	<div align="right">
         		{$post['delete_button']}{$post['edit_button']}
         	</div>
         </td>
	</tr><tr>
	<td class="catend" colspan="2"><!-- no content --></td>
</tr>
</table>
EOF;

//--endhtml--//
return $IPBHTML;
}

//===========================================================================
// CommentTop
//===========================================================================
function CommentTop($data="") {
global $ibforums;
$IPBHTML = "";
//--starthtml--//


$IPBHTML .= <<<EOF
<script type='text/javascript'>
	<!--
		function link_to_post(pid){
			temp = prompt( "{$ibforums->lang['tt_prompt']}", "{$ibforums->base_url}act=module&module=gallery&cmd=si&img={$ibforums->input['img']}#p=" + pid );
			return false;
		}
		function delete_post(theURL) {
			if (confirm('{$ibforums->lang['js_del_1']}')) {
				window.location.href=theURL;
			}
			else {
				alert ('{$ibforums->lang['js_del_2']}');
			} 
		}
		function PopUp(url, name, width,height,center,resize,scroll,posleft,postop) {
			if (posleft != 0) { x = posleft }
			if (postop  != 0) { y = postop  }
			if (!scroll) { scroll = 1 }
			if (!resize) { resize = 1 }
			if ((parseInt (navigator.appVersion) >= 4 ) && (center)) {
				X = (screen.width  - width ) / 2;
				Y = (screen.height - height) / 2;
			}
			if (scroll != 0) { scroll = 1 }
			var Win = window.open( url, name, 'width='+width+',height='+height+',top='+Y+',left='+X+',resizable='+resize+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no');
		}
		function ShowHide(id1, id2) {
			if (id1 != '') expMenu(id1);
			if (id2 != '') expMenu(id2);
		}
		function expMenu(id) {
			var itm = null;
			if (document.getElementById) {
				itm = document.getElementById(id);
			} 
			else if (document.all){
				itm = document.all[id];
			} 
			else if (document.layers){
				itm = document.layers[id];
			}
			if (!itm) {
			// do nothing
			}
			else if (itm.style) {
				if (itm.style.display == "none") { itm.style.display = ""; }
				else { itm.style.display = "none"; }
			}
			else { itm.visibility = "show"; }
		}
	//-->
</script>
<a name="top"></a>
<table cellspacing="1">
	<tr>
		<td nowrap="nowrap">{$data['SHOW_PAGES']}</td>
	</tr>
</table>
<br />
<div class="borderwrap">
	<div class="maintitle"><{CAT_IMG}>&nbsp;<b>{$ibforums->lang['view_comments']}</b></div>
EOF;

//--endhtml--//
return $IPBHTML;
}


//===========================================================================
// page_end
//===========================================================================
function page_end($info='') {
global $ibforums;
$IPBHTML = "";
//--starthtml--//


$IPBHTML .= <<<EOF
<!--IBF.QUICK_REXPLY_CLOSED--> 
<!--IBF.QUICK_REXPLY_OPEN-->
EOF;

//--endhtml--//
return $IPBHTML;
}

//===========================================================================
// photostrip
//===========================================================================
function photostrip($info="") {
global $ibforums;
$IPBHTML = "";
//--starthtml--//


$IPBHTML .= <<<EOF

<div class='maintitlephoto'>{$ibforums->lang['photostrip']} "{$info['name']}" Pictures</div>
<div class='thumbwrap'>
<table style="90%; border:0;" cellspacing='1' cellpadding='0'>
<tr>
{$info['images']}
</tr>
</table>
</div>

EOF;

//--endhtml--//
return $IPBHTML;
}

//===========================================================================
// photostrip_curr
//===========================================================================
function photostrip_curr($img="") {
global $ibforums;
$IPBHTML = "";
//--starthtml--//


$IPBHTML .= <<<EOF
<td class='row2' style="background:#ffcc00;" align='center'>{$img}<br />&nbsp;</td>
EOF;

//--endhtml--//
return $IPBHTML;
}

//===========================================================================
// photostrip_noncurr
//===========================================================================
function photostrip_noncurr($info="") {
global $ibforums;
$IPBHTML = "";
//--starthtml--//


$IPBHTML .= <<<EOF
<td class='post2' align='center' width='20%' valign='bottom'>
{$info['img']}<br />
{$info['control']}
</td>
EOF;

//--endhtml--//
return $IPBHTML;
}


//===========================================================================
// rate_form
//===========================================================================
function rate_form($img="") {
global $ibforums;
$IPBHTML = "";
//--starthtml--//


$IPBHTML .= <<<EOF
<form method="post" action="?act=module">
	<input type="hidden" name="module" value="gallery" />
	<input type="hidden" name="cmd" value="si" />
	<input type="hidden" name="img" value="{$img}" />
	<input type="hidden" name="op" value="rate" />
	<input type="radio" name="rating" value="5" title="{$ibforums->lang['best']}"  checked />&nbsp;5&nbsp;<input type="radio" name="rating" value="4" />&nbsp;4&nbsp;<input type="radio" name="rating" value="3" />&nbsp;3&nbsp;<input type="radio" name="rating" value="2" />&nbsp;2&nbsp;<input type="radio" name="rating" value="1" title="{$ibforums->lang['worst']}" />&nbsp;1&nbsp;<input type="submit" name="submit" value="{$ibforums->lang['rateit']}" />
</form>
EOF;

//--endhtml--//
return $IPBHTML;
}

//===========================================================================
// show_image
//===========================================================================
function show_image($info="") {
global $ibforums;
$IPBHTML = "";
//--starthtml--//


$IPBHTML .= <<<EOF
<script type='text/javascript'>
	<!--
		function delete_img( del ) {
			if( confirm( '{$ibforums->lang['del_confirm']}' ) ) {
				window.location.href=del;
			}
			else {
				alert( '{$ibforums->lang['del_no_act']}' );
			} 
		}
	-->
</script>
<table cellspacing="1" >
	<tr>
		<td width="20%"  nowrap="nowrap">&nbsp;</td>
		<td   align="right" width="80%">{$info['favorite_button']}&nbsp;{$info['ecard_button']}&nbsp;{$info['comment_button']}</td>
	</tr>
</table>

	<div class="maintitlephoto"><{CAT_IMG}>&nbsp;{$info['caption']}</div>
	<table cellspacing="0">
		
				<tr>
			<td colspan="2" class="row2" style="background:transparent;">
				{$info['pin_button']}&nbsp;{$info['edit_button']}&nbsp;{$info['move_button']}&nbsp;{$info['delete_button']}
			</td>
		</tr>
	</table>

<div class="fullimagewrap" >
      
	<div style="float:right;">  

	</div>	  
	  
	  
	  {$info['image']}
<div style="width:728px; margin:0 auto 0 auto;">
  <div class="formsubtitle" style="background:transparent; color:#fff;  font-weight:normal;">{$info['description']}</div>
    <div class="formsubtitle" style="background:transparent; font-weight:normal;">
       <span style="color:#fff; backgroud:transparent;">Added by {$info['author']} on {$info['date']}
       </span>
    </div>
    <div class="formsubtitle" style="color:#fff;  font-weight:normal;background:transparent;">{$ibforums->lang['views']} {$info['views']} &middot; {$ibforums->lang['img_comments']} {$info['comments']}</div>
  </div>
<div class="formsubtitle" style="color:#fff; background:transparent;" align="center">{$info['rate']}</div>
<script type="text/javascript"><!--
google_ad_client = "pub-2451239973624610";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
google_ad_channel ="1897186063";
google_color_border = "336699";
google_color_bg = "336699";
google_color_link = "ffcc00";
google_color_url = "cccccc";
google_color_text = "eeeeee";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>

<table cellspacing="1">
	<tr>
		<td width="20%" nowrap="nowrap">&nbsp;</td>
		<td align="right" width="80%">{$info['favorite_button']}&nbsp;{$info['ecard_button']}&nbsp;{$info['comment_button']}</td>
	</tr>
</table>
EOF;

//--endhtml--//
return $IPBHTML;
}



}

/*--------------------------------------------------*/
/*<changed bits>
CommentRow,page_end,photostrip,photostrip_curr,show_image
</changed bits>*/
/* END OF FILE                                      */
/*--------------------------------------------------*/

?>

PHP: