File: /home/freeval/public_html/e-cards/docs/theme/edit_theme.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Edit theme.php</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta name="language" content="en" />
<meta name="author" content="Coppermine dev team" />
<meta name="copyright" content="Coppermine dev team" />
<meta name="description" content="Coppermine Photo Gallery project - Theme Upgrade Documentation" />
<!-- CVS version info: $Id: edit_theme.html 7334 2010-03-23 07:09:04Z gaugau $ -->
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="start" href="index.html" title="Theme Upgrade Home" />
<link rel="end" href="validation.html" title="Validation" />
<link rel="prev" href="edit_template.html" title="template.html" />
<link rel="next" href="validation.html" title="Validation" />
</head>
<body>
<div class="globalNav">
<a
href="index.html">Theme Upgrade Home</a><a
href="edit_style.html">style.css</a><a
href="edit_template.html">template.html</a><font
class="globalNavSelect">» theme.php</font><a
href="validation.html">Validation</a>
</div>
<a href="edit_template.html">Previous</a> | <a href="validation.html">Next</a>
<!-- end nav links -->
<h2>Edit theme.php</h2>
<p>Many notable things have happened that will influence your modifications to your theme.php.</p>
<ul>
<li>{MAIN_MENU} was officially split into "{SYS_MENU}" and "{SUB_MENU}".</li>
<li>Both menus can have buttons generated by a button template instead of all buttons being coded into a single menu template.</li>
<li>Several
DEFINES were added to redirect graphics so that you don't have to
modify their respective templates if you are only replacing graphics
sets</li>
<li>There are now theme $template_ and theme_ function
fallbacks which allow you to eliminate many un-modified templates or
functions from the theme.php. You only need to modify the templates or
functions that you want to act differently from the default "Classic"
theme.</li>
</ul>
<p>It is recommended to have access to a
server that is still running the theme that you are attempting to
upgrade so that you can see the differences in the 1.3.x theme and the
new 1.4.x theme.</p>
<p>The following instructions will have you
create a theme.php from scratch, only moving over and modifying the
items that are different than Coppermine's internal theme "Classic".</p>
<ol>
<li>Rename your theme.php to theme.old.php</li>
<li>
Create a new theme.php file in it's place
<h6>Insert the following:</h6>
<pre><?php
/*************************
Coppermine Photo Gallery
************************
Copyright (c) 2003-2008 Dev Team
v1.0 originally written by Gregory Demar
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License version 3
as published by the Free Software Foundation.
********************************************
Coppermine version: 1.4.27
$Source:
$Revision:
$Author:
$Date:
**********************************************/
?>
</pre>
<p>You now have a functional theme.</p>
</li>
<li>
Everything from this point forward should be added between these two lines:
<pre>**********************************************/
?>
</pre>
</li>
<li>
Evaluate the available defines and add them to your theme.php
<ul>
<li>
define('THEME_HAS_RATING_GRAPHICS', 1);
<p>The location for the ratings graphics will be directed to the themes images folder.</p>
<ul>
<li>RUBBISH : images/rating0.gif</li>
<li>POOR : images/rating1.gif</li>
<li>FAIR : images/rating2.gif</li>
<li>GOOD : images/rating3.gif</li>
<li>EXCELLENT : images/rating4.gif</li>
<li>GREAT : images/rating5.gif</li>
</ul>
<h6>if your theme's images folder contain these filenames insert the define</h6>
<pre>define('THEME_HAS_RATING_GRAPHICS', 1);
</pre>
</li>
<li>
define('THEME_HAS_NAVBAR_GRAPHICS', 1);
<p>The location for the navbar graphics will be directed to the themes images folder.</p>
<ul>
<li>Back to thumbnails : images/thumbnails.gif</li>
<li>Picture Information : images/info.gif</li>
<li>Slideshow : images/slideshow.gif</li>
<li>Report to admin : images/report.gif <span class="new">*NEW*</span></li>
<li>Ecard : images/ecard.gif</li>
<li>Previous : images/prev.gif</li>
<li>Next : images/next.gif</li>
</ul>
<p>If
you have some of these graphics it could be that the original author
did not keep the same names; you will need to rename the graphics to
conform to the define, or you will need to modify the navbar template
directly.</p>
<h6>if your theme's images folder contain these filenames insert the define</h6>
<pre>define('THEME_HAS_NAVBAR_GRAPHICS', 1);
</pre>
<h6>Copy classic's report.gif or create a new report.gif for your theme if you set the define</h6>
</li>
<li>
define('THEME_HAS_FILM_STRIP_GRAPHIC', 1);
<p>The location for the film strip graphic will be directed to the themes images folder.</p>
<ul>
<li>tile : images/tile.gif</li>
</ul>
<p>This
define specifies a single tile to be used for both locations.</p>
<h6>if your theme's images folder contains the above filename insert this define</h6>
<pre>define('THEME_HAS_FILM_STRIP_GRAPHIC', 1);
</pre>
</li>
<li>
define('THEME_HAS_FILM_STRIP_GRAPHICS', 1);
<p>The location for the film strip graphics will be directed to the themes images folder.</p>
<ul>
<li>tile on the top : images/tile1.gif <span class="new">*NEW*</span></li>
<li>tile on the bottom : images/tile2.gif <span class="new">*NEW*</span></li>
</ul>
<p>This
define specifies TWO tiles. </p>
<h6>if your theme's images folder contains these filenames insert this define</h6>
<pre>define('THEME_HAS_FILM_STRIP_GRAPHICS', 1);
</pre>
</li>
<li>
define('THEME_IS_XHTML10_TRANSITIONAL',1);
<p>If
the theme is defined as XHTML10_TRANSITIONAL the VANITY footer will be
enabled. You shouldn't enable this until you've been able to follow the
validation methodology discussed later in this document.</p>
<h6>if your theme has passed the validation methodology insert this define:</h6>
<pre>define('THEME_IS_XHTML10_TRANSITIONAL',1);
</pre>
</li>
<li>
define('THEME_HAS_NO_SYS_MENU_BUTTONS', 1);
<p>When
present the system won't attempt to replace the token {BUTTONS} in the
SYS_MENU template. The entire block needs to be present.</p>
<p>Only set this after you determine you can't use the buttons template!</p>
<h6>If you can't use the SYS_MENU buttons template insert this define:</h6>
<pre>define('THEME_HAS_NO_SYS_MENU_BUTTONS', 1);
</pre>
<h6>if you have set the define your theme.php will
need to set the "$template_sys_menu", this may be in your theme.old.php
as part of "$template_main_menu" or all of "$template_main_menu1".</h6>
</li>
<li>
define('THEME_HAS_NO_SUB_MENU_BUTTONS', 1);
<p>When present the system won't attempt to replace {BUTTONS} in the SUB_MENU template The entire block needs to be present.</p>
<p>Only set this after you determine you can't use the buttons template!</p>
<h6>If you can't use the SUB_MENU buttons template insert this define:</h6>
<pre>define('THEME_HAS_NO_SUB_MENU_BUTTONS', 1);
</pre>
<h6>if you have set the define your theme.php will
need to set the "$template_sub_menu", this may be in your theme.old.php
as part of "$template_main_menu" or all of "$template_main_menu2".</h6>
</li>
</ul>
</li>
<li>Take stock of what you have so far, test your theme.</li>
<li>
Changing the menu item separator
<p>Classic uses a "::" separator between each menu option that you can override by modifying the "$template_sys_menu_spacer"</p>
<pre>// HTML template for template sys_menu spacer
$template_sys_menu_spacer ="::";
</pre>
<h6>Insert into your theme.php and modify to suit</h6>
<p>The sub menu templates are automatically inherited from sys menu's and you override them in exactly the same way</p>
<h5>Examples:</h5>
<ul>
<li>Water_Drop</li>
<li>Fruity</li>
<li>Eyeball</li>
</ul>
</li>
<li>
If you need a separator before the first and after the last buttons you can use this example from "MAC_OX_X"
<p>"$template_sys_menu_spacer" and "$template_sub_menu_spacer" are only rendered BETWEEN active elements.</p>
<h6>Insert into your theme.php and modify to suit</h6>
<pre>// HTML template for sys_menu
$template_sys_menu = <<<EOT
|{BUTTONS}|
EOT;
// HTML template for template sys_menu spacer
$template_sys_menu_spacer ="|";
</pre>
</li>
<li> If your theme requires more than a spacer
for each button, such as buttons rendered inside of a table you can use
this example from "Rainy_Day". <p>Copy a button from your theme.old.php from
$template_main_menu, $template_main_menu1, or $template_main_menu2 and
put it in between the "<!-- BEGIN {BLOCK_ID} -->" and "<!--
END {BLOCK_ID} -->" lines and change the "{TOKENS}" as necessary.</p>
<h6>Insert into your theme.php and modify to suit</h6>
<pre>// HTML template for sys_menu
$template_sys_menu = <<<EOT
<div class="topmenu">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
{BUTTONS}
</tr>
</table>
</div>
EOT;
// HTML template for template sys_menu buttons
$template_sys_menu_button = <<<EOT
<!-- BEGIN {BLOCK_ID} -->
<td><img src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td>
<td><img src="themes/rainy_day/images/button1_r1_c1.gif" width="5" height="25" border="0" alt="" /></td>
<td style="background-image:url(themes/rainy_day/images/button1_r1_c2.gif)">
<a href="{HREF_TGT}" title="{HREF_TITLE}">{HREF_LNK}</a>
</td>
<td><img src="themes/rainy_day/images/button1_r1_c3.gif" width="5" height="25" border="0" alt="" /></td>
<!-- END {BLOCK_ID} -->
EOT;
</pre>
</li>
<li> If each of your sys_menu buttons need to
be rendered differently and you can't easily use the button template
you can disable it and include the entire block. <p>Define 'THEME_HAS_NO_SYS_MENU_BUTTONS' and include a "$template_sys_menu" template.</p>
<h6>Insert this define</h6>
<pre>define('THEME_HAS_NO_SYS_MENU_BUTTONS', 1);
</pre>
<p>Copy the correct portion of "$template_main_menu" or
"$template_main_menu1" from your theme.old.php as in this example from
"Hardwired"</p>
<h6>Verify that your template includes all of the following {TOKENS}, and rename the template to "$template_sys_menu"</h6>
<pre>// HTML template for sys menu
$template_sys_menu = <<<EOT
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<!-- BEGIN home -->
<td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td>
<td><img name="buttonleftmy" src="themes/hardwired/images/buttonleftmy.gif" width="17" height="25" border="0" alt="" /></td>
<td style="background: url(themes/hardwired/images/buttoncenter.gif);">
<a href="{HOME_TGT}" title="{HOME_TITLE}">{HOME_LNK}</a>
</td>
<td><img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0" alt="" /></td>
<!-- END home -->
<!-- BEGIN my_gallery -->
<td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td>
<td><img name="buttonleftmy" src="themes/hardwired/images/buttonleftmy.gif" width="17" height="25" border="0" alt="" /></td>
<td style="background: url(themes/hardwired/images/buttoncenter.gif);">
<a href="{MY_GAL_TGT}" title="{MY_GAL_TITLE}">{MY_GAL_LNK}</a>
</td>
<td><img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0" alt="" /></td>
<!-- END my_gallery -->
<!-- BEGIN allow_memberlist -->
<td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td>
<td><img name="buttonleft" src="themes/hardwired/images/buttonleftmemb.gif" width="17" height="25" border="0" alt="" /></td>
<td style="background: url(themes/hardwired/images/buttoncenter.gif);">
<a href="{MEMBERLIST_TGT}" title="{MEMBERLIST_TITLE}">{MEMBERLIST_LNK}</a>
</td>
<td><img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0" alt="" /></td>
<!-- END allow_memberlist -->
<!-- BEGIN my_profile -->
<td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td>
<td><img name="buttonleft" src="themes/hardwired/images/buttonleft.gif" width="17" height="25" border="0" alt="" /></td>
<td style="background: url(themes/hardwired/images/buttoncenter.gif);">
<a href="{MY_PROF_TGT}" title="{MY_PROF_LNK}">{MY_PROF_LNK}</a>
</td>
<td><img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0" alt="" /></td>
<!-- END my_profile -->
<!-- BEGIN faq -->
<td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td>
<td><img name="buttonleft" src="themes/hardwired/images/buttonleftfaq.gif" width="17" height="25" border="0" alt="" /></td>
<td style="background: url(themes/hardwired/images/buttoncenter.gif);">
<a href="{FAQ_TGT}" title="{FAQ_TITLE}">{FAQ_LNK}</a>
</td>
<td><img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0" alt="" /></td>
<!-- END faq -->
<!-- BEGIN enter_admin_mode -->
<td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td>
<td><img name="buttonleftad" src="themes/hardwired/images/buttonleftad.gif" width="17" height="25" border="0" alt="" /></td>
<td style="background: url(themes/hardwired/images/buttoncenter.gif);">
<a href="{ADM_MODE_TGT}" title="{ADM_MODE_TITLE}">{ADM_MODE_LNK}</a>
</td>
<td><img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0" alt="" /></td>
<!-- END enter_admin_mode -->
<!-- BEGIN leave_admin_mode -->
<td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td>
<td><img name="buttonleftad" src="themes/hardwired/images/buttonleftad.gif" width="17" height="25" border="0" alt="" /></td>
<td style="background: url(themes/hardwired/images/buttoncenter.gif);">
<a href="{USR_MODE_TGT}" title="{USR_MODE_TITLE}">{USR_MODE_LNK}</a>
</td>
<td><img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0" alt="" /></td>
<!-- END leave_admin_mode -->
<!-- BEGIN upload_pic -->
<td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td>
<td><img name="buttonleftup" src="themes/hardwired/images/buttonleftup.gif" width="17" height="25" border="0" alt="" /></td>
<td style="background: url(themes/hardwired/images/buttoncenter.gif);">
<a href="{UPL_PIC_TGT}" title="{UPL_PIC_TITLE}">{UPL_PIC_LNK}</a>
</td>
<td><img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0" alt="" /></td>
<!-- END upload_pic -->
<!-- BEGIN register -->
<td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td>
<td><img name="buttonleft" src="themes/hardwired/images/buttonleft.gif" width="17" height="25" border="0" alt="" /></td>
<td style="background: url(themes/hardwired/images/buttoncenter.gif);">
<a href="{REGISTER_TGT}" title="{REGISTER_TITLE}">{REGISTER_LNK}</a>
</td>
<td><img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0" alt="" /></td>
<!-- END register -->
<!-- BEGIN login -->
<td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td>
<td><img name="buttonleft" src="themes/hardwired/images/buttonleft.gif" width="17" height="25" border="0" alt="" /></td>
<td style="background: url(themes/hardwired/images/buttoncenter.gif);">
<a href="{LOGIN_TGT}" title="{LOGIN_LNK}">{LOGIN_LNK}</a>
</td>
<td><img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0" alt="" /></td>
<!-- END login -->
<!-- BEGIN logout -->
<td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td>
<td><img name="buttonleftout" src="themes/hardwired/images/buttonleftout.gif" width="17" height="25" border="0" alt="" /></td>
<td style="background: url(themes/hardwired/images/buttoncenter.gif);">
<a href="{LOGOUT_TGT}" title="{LOGOUT_LNK}">{LOGOUT_LNK}</a>
</td>
<td><img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0" alt="" /></td>
<!-- END logout -->
</tr>
</table>
EOT;
</pre>
</li>
<li> If each of your sub_menu buttons need to
be rendered differently and you can't easily use the button template
you can disable it and include the entire block. <p>Define 'THEME_HAS_NO_SUB_MENU_BUTTONS' and include a "$template_sys_menu" template.</p>
<h6>Insert this define</h6>
<pre>define('THEME_HAS_NO_SUB_MENU_BUTTONS', 1);
</pre>
<p>Copy the correct portion of "$template_main_menu" or
"$template_main_menu2" from your theme.old.php as in this example from
"Hardwired"</p>
<h6>Verify that your template includes all of the following {TOKENS}, and rename the template to "$template_sub_menu"</h6>
<pre>// HTML template for sub menu
$template_sub_menu = <<<EOT
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<!-- BEGIN custom_link -->
<td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td>
<td><img name="buttonleft1" src="themes/hardwired/images/buttonleft1.gif" width="7" height="25" border="0" alt="" /></td>
<td style="background: url(themes/hardwired/images/buttoncenter.gif);">
<a href="{CUSTOM_LNK_TGT}" title="{CUSTOM_LNK_TITLE}">{CUSTOM_LNK_LNK}</a>
</td>
<td><img name="buttonright1" src="themes/hardwired/images/buttonright1.gif" width="7" height="25" border="0" alt="" /></td>
<!-- END custom_link -->
<!-- BEGIN album_list -->
<td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td>
<td><img name="buttonleft1" src="themes/hardwired/images/buttonleft1.gif" width="7" height="25" border="0" alt="" /></td>
<td style="background: url(themes/hardwired/images/buttoncenter.gif);">
<a href="{ALB_LIST_TGT}" title="{ALB_LIST_TITLE}">{ALB_LIST_LNK}</a>
</td>
<td><img name="buttonright1" src="themes/hardwired/images/buttonright1.gif" width="7" height="25" border="0" alt="" /></td>
<!-- END album_list -->
<td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td>
<td><img name="buttonleft1" src="themes/hardwired/images/buttonleft1.gif" width="7" height="25" border="0" alt="" /></td>
<td style="background: url(themes/hardwired/images/buttoncenter.gif);">
<a href="{LASTUP_TGT}" title="{LASTUP_LNK}">{LASTUP_LNK}</a>
</td>
<td><img name="buttonright1" src="themes/hardwired/images/buttonright1.gif" width="7" height="25" border="0" alt="" /></td>
<td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td>
<td><img name="buttonleft1" src="themes/hardwired/images/buttonleft1.gif" width="7" height="25" border="0" alt="" /></td>
<td style="background: url(themes/hardwired/images/buttoncenter.gif);">
<a href="{LASTCOM_TGT}" title="{LASTCOM_LNK}">{LASTCOM_LNK}</a>
</td>
<td><img name="buttonright1" src="themes/hardwired/images/buttonright1.gif" width="7" height="25" border="0" alt="" /></td>
<td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td>
<td><img name="buttonleft1" src="themes/hardwired/images/buttonleft1.gif" width="7" height="25" border="0" alt="" /></td>
<td style="background: url(themes/hardwired/images/buttoncenter.gif);">
<a href="{TOPN_TGT}" title="{TOPN_LNK}">{TOPN_LNK}</a>
</td>
<td><img name="buttonright1" src="themes/hardwired/images/buttonright1.gif" width="7" height="25" border="0" alt="" /></td>
<td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td>
<td><img name="buttonleft1" src="themes/hardwired/images/buttonleft1.gif" width="7" height="25" border="0" alt="" /></td>
<td style="background: url(themes/hardwired/images/buttoncenter.gif);">
<a href="{TOPRATED_TGT}" title="{TOPRATED_LNK}">{TOPRATED_LNK}</a>
</td>
<td><img name="buttonright1" src="themes/hardwired/images/buttonright1.gif" width="7" height="25" border="0" alt="" /></td>
<td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td>
<td><img name="buttonleft1" src="themes/hardwired/images/buttonleft1.gif" width="7" height="25" border="0" alt="" /></td>
<td style="background: url(themes/hardwired/images/buttoncenter.gif);">
<a href="{FAV_TGT}" title="{FAV_LNK}">{FAV_LNK}</a>
</td>
<td><img name="buttonright1" src="themes/hardwired/images/buttonright1.gif" width="7" height="25" border="0" alt="" /></td>
<td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td>
<td><img name="buttonleft1" src="themes/hardwired/images/buttonleft1.gif" width="7" height="25" border="0" alt="" /></td>
<td style="background: url(themes/hardwired/images/buttoncenter.gif);">
<a href="{SEARCH_TGT}" title="{SEARCH_LNK}">{SEARCH_LNK}</a>
</td>
<td><img name="buttonright1" src="themes/hardwired/images/buttonright1.gif" width="7" height="25" border="0" alt="" /></td>
</tr>
</table>
EOT;
</pre>
</li>
<li>
You've reached another milestone in your theme upgrade.
<p>Take stock of what you have so far, test your theme.</p>
</li>
<li>
If your theme uses custom starttable and endtable functions they can be
moved over from theme.php.old as in this example from "MAC_OX_X" <h6>Insert into your theme.php and modify to suit</h6>
<pre>// Function to start a 'standard' table
function starttable($width = '-1', $title = '', $title_colspan = '1')
{
global $CONFIG;
if ($width == '-1') $width = $CONFIG['picture_table_width'];
if ($width == '100%') $width = $CONFIG['main_table_width'];
if ($title) {
echo <<<EOT
<!-- Start standard table title -->
<table align="center" width="$width" cellspacing="0" cellpadding="0" class="maintablea">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" class="tableh1a">
<tr>
<td class="tableh1a"><img src="themes/mac_ox_x/images/tableh1a_bg_left.gif" alt="" /></td>
<td class="tableh1a" style="background-image:url(themes/mac_ox_x/images/tableh1a_bg_middle.gif);" width="100%">$title</td>
<td class="tableh1a"><img src="themes/mac_ox_x/images/tableh1a_bg_right.gif" alt="" /></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Start standard table -->
<table align="center" width="$width" cellspacing="0" cellpadding="0">
<tr>
<td style="background-image:url(themes/mac_ox_x/images/main_table_r1_c1b.gif);" valign="top"><img name="main_table_r1_c1" src="themes/mac_ox_x/images/main_table_r1_c1.gif" border="0" alt="" /></td>
<td width="100%"><table width="100%" cellspacing="1" cellpadding="0" class="maintableb">
EOT;
} else {
echo <<<EOT
<!-- Start standard table -->
<table align="center" width="$width" cellspacing="0" cellpadding="0">
<tr>
<td style="background-image:url(themes/mac_ox_x/images/main_table_r1_c1b.gif);" valign="top"><img name="main_table_r1_c1" src="themes/mac_ox_x/images/main_table_r1_c1.gif" border="0" alt="" /></td>
<td width="100%"><table width="100%" cellspacing="1" cellpadding="0" class="maintable">
EOT;
}
}
function endtable()
{
echo <<<EOT
</table>
</td>
<td style="background-image:url(themes/mac_ox_x/images/main_table_r1_c3b.gif);" valign="top"><img name="main_table_r1_c3" src="themes/mac_ox_x/images/main_table_r1_c3.gif" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="main_table_r2_c1" src="themes/mac_ox_x/images/main_table_r2_c1.gif" width="10" height="4" border="0" alt="" /></td>
<td style="background-image:url(themes/mac_ox_x/images/main_table_r2_c2b.gif);"><img name="main_table_r2_c2" src="themes/mac_ox_x/images/main_table_r2_c2.gif" border="0" alt="" /></td>
<td><img name="main_table_r2_c3" src="themes/mac_ox_x/images/main_table_r2_c3.gif" width="10" height="4" border="0" alt="" /></td>
</tr>
</table>
<!-- End standard table -->
EOT;
}
</pre>
</li>
<li> If you have included custom starttable
and endtable code the sort options in the thumbnail view may no longer
fit properly. <p>You can use this example also from "MAC_OX_X" to correct it.</p>
<h6>Insert into your theme.php and modify to suit</h6>
<pre>// HTML template for title row of the thumbnail view (album title + sort options)
$template_thumb_view_title_row = <<<EOT
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" class="statlink">{ALBUM_NAME}</td>
<td class="sortorder_options" style="font-size: 100%;">{TITLE}</td>
<td class="sortorder_options" style="font-size: 100%;"><span class="statlink"><a href="thumbnails.php?album={AID}&amp;page={PAGE}&amp;sort=ta" title="{SORT_TA}">&nbsp;+&nbsp;</a></span></td>
<td class="sortorder_options" style="font-size: 100%;"><span class="statlink"><a href="thumbnails.php?album={AID}&amp;page={PAGE}&amp;sort=td" title="{SORT_TD}">&nbsp;-&nbsp;</a></span></td>
<td>&nbsp;&nbsp;</td>
<td class="sortorder_options" style="font-size: 100%;">{NAME}</td>
<td class="sortorder_options" style="font-size: 100%;"><span class="statlink"><a href="thumbnails.php?album={AID}&amp;page={PAGE}&amp;sort=na" title="{SORT_NA}">&nbsp;+&nbsp;</a></span></td>
<td class="sortorder_options" style="font-size: 100%;"><span class="statlink"><a href="thumbnails.php?album={AID}&amp;page={PAGE}&amp;sort=nd" title="{SORT_ND}">&nbsp;-&nbsp;</a></span></td>
<td>&nbsp;&nbsp;</td>
<td class="sortorder_options" style="font-size: 100%;">{DATE}</td>
<td class="sortorder_options" style="font-size: 100%;"><span class="statlink"><a href="thumbnails.php?album={AID}&amp;page={PAGE}&amp;sort=da" title="{SORT_DA}">&nbsp;+&nbsp;</a></span></td>
<td class="sortorder_options" style="font-size: 100%;"><span class="statlink"><a href="thumbnails.php?album={AID}&amp;page={PAGE}&amp;sort=dd" title="{SORT_DD}">&nbsp;-&nbsp;</a></span></td>
<td>&nbsp;&nbsp;</td>
<td class="sortorder_options" style="font-size: 100%;">{POSITION}</td>
<td class="sortorder_options" style="font-size: 100%;"><span class="statlink"><a href="thumbnails.php?album={AID}&amp;page={PAGE}&amp;sort=pa" title="{SORT_PA}">&nbsp;+&nbsp;</a></span></td>
<td class="sortorder_options" style="font-size: 100%;"><span class="statlink"><a href="thumbnails.php?album={AID}&amp;page={PAGE}&amp;sort=pd" title="{SORT_PD}">&nbsp;-&nbsp;</a></span></td>
</tr>
</table>
EOT;
</pre>
</li>
<li>If your theme modifies $template_display_picture
replace it with $template_display_media
<h6>Find all instances of:</h6>
<pre>$template_display_picture</pre>
<h6>Replace all with:</h6>
<pre>$template_display_media</pre>
</li>
<li>
If you used a previous $template_display_picture replace tableb with display_media in $template_display_media block
<h6>Find:</h6>
<pre><td align="center" class="tableb" nowrap="nowrap"></pre>
<h6>Replace with:</h6>
<pre><td align="center" class="display_media" nowrap="nowrap"></pre>
</li>
<li>
If your theme modifies $template_cat_list replace tableh2 with catrow_noalb in the catrow_noalb block
<h6>Find:</h6>
<pre><!-- BEGIN catrow_noalb --><br /> <tr><br /> <td class="tableh2" colspan="3"><table border="0"><tr><td align="left">{CAT_THUMB}</td><td align="left"><span class="catlink"><b>{CAT_TITLE}</b></span>{CAT_DESC}</td></tr></table></td><br /> </tr><br /><!-- END catrow_noalb --></pre>
<h6>Replace with :</h6>
<pre><!-- BEGIN catrow_noalb --><br /> <tr><br /> <td class="catrow_noalb" colspan="3"><table border="0"><tr><td align="left">{CAT_THUMB}</td><td align="left"><span class="catlink"><b>{CAT_TITLE}</b></span>{CAT_DESC}</td></tr></table></td><br /> </tr><br /><!-- END catrow_noalb --></pre>
</li>
<li>
If your theme modifies $template_cat_list replace tableb with catrow in the catrow block
<h6>Find:</h6>
<pre><!-- BEGIN catrow --><br /> <tr><br /> <td class="tableb" align="left"><table border="0"><tr><td>{CAT_THUMB}</td><td><span class="catlink"><b>{CAT_TITLE}</b></span>{CAT_DESC}</td></tr></table></td><br /> <td class="tableb" align="center">{ALB_COUNT}</td><br /> <td class="tableb" align="center">{PIC_COUNT}</td><br /> </tr><br /> <tr><br /> <td class="tableb" colspan="3">{CAT_ALBUMS}</td><br /> </tr><br /><!-- END catrow --></pre>
<h6>Replace with :</h6>
<pre><!-- BEGIN catrow --><br /> <tr><br /> <td class="catrow" align="left"><table border="0"><tr><td>{CAT_THUMB}</td><td><span class="catlink"><b>{CAT_TITLE}</b></span>{CAT_DESC}</td></tr></table></td><br /> <td class="catrow" align="center">{ALB_COUNT}</td><br /> <td class="catrow" align="center">{PIC_COUNT}</td><br /> </tr><br /> <tr><br /> <td class="tableb" colspan="3">{CAT_ALBUMS}</td><br /> </tr><br /><!-- END catrow --></pre>
</li>
<li>For the majority of themes you are now done adding content to your theme.php.
<p>Take stock of what you have so far, test your theme.</p>
</li>
<li>
For a list of everything that could be modified examine the "sample" theme.
<p>The "sample" theme found in themes/sample is designed to be a showcase for every themeable function and template used in Coppermine.</p>
<p>"Hardwired",
"Eyeball", and "MAC_OX_X" are all good examples of more complicated
theme designs that you can use as reference in continuing to modify
your theme.</p>
</li>
</ol>
<div id="footer" style="border-top: 1px solid gray; margin-top: 30px; padding-top: 10px;">
<a href="edit_template.html">Previous</a> | <a href="validation.html">Next</a>
<div class="globalNav">
<a
href="index.html">Theme Upgrade Home</a><a
href="edit_style.html">style.css</a><a
href="edit_template.html">template.html</a><font
class="globalNavSelect">» theme.php</font><a
href="validation.html">Validation</a>
</div>
<!-- end nav links -->
</div>
</body>
</html>