0byt3m1n1

Path: /data/applications/aps.bak/coppermine/1.4.16-5/standard/htdocs/docs/theme/ [ Home ]
File: 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 4233 2008-02-02 08:23:58Z 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">&raquo; theme.php</font><a
        href="validation.html">Validation</a>
</div>
<a href="edit_template.html">Previous</a>&nbsp;|&nbsp;<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>&lt;?php
/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2008 Dev Team
  v1.1 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.16
  $Source:
  $Revision:
  $Author:
  $Date:
**********************************************/


?&gt;
</pre>

      <p>You now have a functional theme.</p>
    </li>

    <li>
      Everything from this point forward should be added between these two lines:
      <pre>**********************************************/


?&gt;
</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 = &lt;&lt;&lt;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 "&lt;!-- BEGIN {BLOCK_ID} --&gt;" and "&lt;!--
END {BLOCK_ID} --&gt;" 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 = &lt;&lt;&lt;EOT
  &lt;div class="topmenu"&gt;
          &lt;table border="0" cellpadding="0" cellspacing="0"&gt;
                  &lt;tr&gt;
  {BUTTONS}
                  &lt;/tr&gt;
          &lt;/table&gt;
  &lt;/div&gt;
EOT;

// HTML template for template sys_menu buttons
$template_sys_menu_button = &lt;&lt;&lt;EOT
&lt;!-- BEGIN {BLOCK_ID} --&gt;
  &lt;td&gt;&lt;img src="images/spacer.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;img src="themes/rainy_day/images/button1_r1_c1.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
  &lt;td style="background-image:url(themes/rainy_day/images/button1_r1_c2.gif)"&gt;
          &lt;a href="{HREF_TGT}" title="{HREF_TITLE}"&gt;{HREF_LNK}&lt;/a&gt;
  &lt;/td&gt;
  &lt;td&gt;&lt;img src="themes/rainy_day/images/button1_r1_c3.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
&lt;!-- END {BLOCK_ID} --&gt;
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 = &lt;&lt;&lt;EOT

                        &lt;table border="0" cellpadding="0" cellspacing="0"&gt;
                                &lt;tr&gt;
&lt;!-- BEGIN home --&gt;
                                        &lt;td&gt;&lt;img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonleftmy" src="themes/hardwired/images/buttonleftmy.gif" width="17" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td style="background: url(themes/hardwired/images/buttoncenter.gif);"&gt;
                                                &lt;a href="{HOME_TGT}" title="{HOME_TITLE}"&gt;{HOME_LNK}&lt;/a&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0"  alt="" /&gt;&lt;/td&gt;
&lt;!-- END home --&gt;
&lt;!-- BEGIN my_gallery --&gt;
                                        &lt;td&gt;&lt;img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonleftmy" src="themes/hardwired/images/buttonleftmy.gif" width="17" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td style="background: url(themes/hardwired/images/buttoncenter.gif);"&gt;
                                                &lt;a href="{MY_GAL_TGT}" title="{MY_GAL_TITLE}"&gt;{MY_GAL_LNK}&lt;/a&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0"  alt="" /&gt;&lt;/td&gt;
&lt;!-- END my_gallery --&gt;
&lt;!-- BEGIN allow_memberlist --&gt;
                                        &lt;td&gt;&lt;img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonleft" src="themes/hardwired/images/buttonleftmemb.gif" width="17" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td style="background: url(themes/hardwired/images/buttoncenter.gif);"&gt;
                                                &lt;a href="{MEMBERLIST_TGT}" title="{MEMBERLIST_TITLE}"&gt;{MEMBERLIST_LNK}&lt;/a&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0"  alt="" /&gt;&lt;/td&gt;
&lt;!-- END allow_memberlist --&gt;
&lt;!-- BEGIN my_profile --&gt;
                                        &lt;td&gt;&lt;img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonleft" src="themes/hardwired/images/buttonleft.gif" width="17" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td style="background: url(themes/hardwired/images/buttoncenter.gif);"&gt;
                                                &lt;a href="{MY_PROF_TGT}" title="{MY_PROF_LNK}"&gt;{MY_PROF_LNK}&lt;/a&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0"  alt="" /&gt;&lt;/td&gt;
&lt;!-- END my_profile --&gt;
&lt;!-- BEGIN faq --&gt;
                                        &lt;td&gt;&lt;img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonleft" src="themes/hardwired/images/buttonleftfaq.gif" width="17" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td style="background: url(themes/hardwired/images/buttoncenter.gif);"&gt;
                                                &lt;a href="{FAQ_TGT}" title="{FAQ_TITLE}"&gt;{FAQ_LNK}&lt;/a&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0"  alt="" /&gt;&lt;/td&gt;
&lt;!-- END faq --&gt;
&lt;!-- BEGIN enter_admin_mode --&gt;
                                        &lt;td&gt;&lt;img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonleftad" src="themes/hardwired/images/buttonleftad.gif" width="17" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td style="background: url(themes/hardwired/images/buttoncenter.gif);"&gt;
                                                &lt;a href="{ADM_MODE_TGT}" title="{ADM_MODE_TITLE}"&gt;{ADM_MODE_LNK}&lt;/a&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0"  alt="" /&gt;&lt;/td&gt;
&lt;!-- END enter_admin_mode --&gt;
&lt;!-- BEGIN leave_admin_mode --&gt;
                                        &lt;td&gt;&lt;img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonleftad" src="themes/hardwired/images/buttonleftad.gif" width="17" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td style="background: url(themes/hardwired/images/buttoncenter.gif);"&gt;
                                                &lt;a href="{USR_MODE_TGT}" title="{USR_MODE_TITLE}"&gt;{USR_MODE_LNK}&lt;/a&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0" alt="" /&gt;&lt;/td&gt;
&lt;!-- END leave_admin_mode --&gt;
&lt;!-- BEGIN upload_pic --&gt;
                                        &lt;td&gt;&lt;img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonleftup" src="themes/hardwired/images/buttonleftup.gif" width="17" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                       &lt;td style="background: url(themes/hardwired/images/buttoncenter.gif);"&gt;
                                                &lt;a href="{UPL_PIC_TGT}" title="{UPL_PIC_TITLE}"&gt;{UPL_PIC_LNK}&lt;/a&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0"  alt="" /&gt;&lt;/td&gt;
&lt;!-- END upload_pic --&gt;
&lt;!-- BEGIN register --&gt;
                                        &lt;td&gt;&lt;img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonleft" src="themes/hardwired/images/buttonleft.gif" width="17" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td style="background: url(themes/hardwired/images/buttoncenter.gif);"&gt;
                                                &lt;a href="{REGISTER_TGT}" title="{REGISTER_TITLE}"&gt;{REGISTER_LNK}&lt;/a&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0"  alt="" /&gt;&lt;/td&gt;
&lt;!-- END register --&gt;
&lt;!-- BEGIN login --&gt;
                                        &lt;td&gt;&lt;img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonleft" src="themes/hardwired/images/buttonleft.gif" width="17" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                       &lt;td style="background: url(themes/hardwired/images/buttoncenter.gif);"&gt;
                                                &lt;a href="{LOGIN_TGT}" title="{LOGIN_LNK}"&gt;{LOGIN_LNK}&lt;/a&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0"  alt="" /&gt;&lt;/td&gt;
&lt;!-- END login --&gt;
&lt;!-- BEGIN logout --&gt;
                                        &lt;td&gt;&lt;img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonleftout" src="themes/hardwired/images/buttonleftout.gif" width="17" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td style="background: url(themes/hardwired/images/buttoncenter.gif);"&gt;
                                                &lt;a href="{LOGOUT_TGT}" title="{LOGOUT_LNK}"&gt;{LOGOUT_LNK}&lt;/a&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0" alt="" /&gt;&lt;/td&gt;
&lt;!-- END logout --&gt;
                                &lt;/tr&gt;
                        &lt;/table&gt;
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 = &lt;&lt;&lt;EOT

                        &lt;table border="0" cellpadding="0" cellspacing="0"&gt;
                                &lt;tr&gt;
&lt;!-- BEGIN custom_link --&gt;
                                        &lt;td&gt;&lt;img name=&quot;spacer&quot; src=&quot;images/spacer.gif&quot; width=&quot;5&quot; height=&quot;25&quot; border=&quot;0&quot; alt=&quot;&quot; /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name=&quot;buttonleft1&quot; src=&quot;themes/hardwired/images/buttonleft1.gif&quot; width=&quot;7&quot; height=&quot;25&quot; border=&quot;0&quot; alt=&quot;&quot; /&gt;&lt;/td&gt;
                                        &lt;td style=&quot;background: url(themes/hardwired/images/buttoncenter.gif);&quot;&gt;
                                                &lt;a href=&quot;{CUSTOM_LNK_TGT}&quot; title=&quot;{CUSTOM_LNK_TITLE}&quot;&gt;{CUSTOM_LNK_LNK}&lt;/a&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;&lt;img name=&quot;buttonright1&quot; src=&quot;themes/hardwired/images/buttonright1.gif&quot; width=&quot;7&quot; height=&quot;25&quot; border=&quot;0&quot; alt=&quot;&quot; /&gt;&lt;/td&gt;
&lt;!-- END custom_link --&gt;
&lt;!-- BEGIN album_list --&gt;
                                        &lt;td&gt;&lt;img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonleft1" src="themes/hardwired/images/buttonleft1.gif" width="7" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td style="background: url(themes/hardwired/images/buttoncenter.gif);"&gt;
                                                &lt;a href="{ALB_LIST_TGT}" title="{ALB_LIST_TITLE}"&gt;{ALB_LIST_LNK}&lt;/a&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonright1" src="themes/hardwired/images/buttonright1.gif" width="7" height="25" border="0" alt="" /&gt;&lt;/td&gt;
&lt;!-- END album_list --&gt;
                                        &lt;td&gt;&lt;img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonleft1" src="themes/hardwired/images/buttonleft1.gif" width="7" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                       &lt;td style="background: url(themes/hardwired/images/buttoncenter.gif);"&gt;
                                                &lt;a href="{LASTUP_TGT}" title="{LASTUP_LNK}"&gt;{LASTUP_LNK}&lt;/a&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonright1" src="themes/hardwired/images/buttonright1.gif" width="7" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonleft1" src="themes/hardwired/images/buttonleft1.gif" width="7" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                       &lt;td style="background: url(themes/hardwired/images/buttoncenter.gif);"&gt;
                                                &lt;a href="{LASTCOM_TGT}" title="{LASTCOM_LNK}"&gt;{LASTCOM_LNK}&lt;/a&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonright1" src="themes/hardwired/images/buttonright1.gif" width="7" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonleft1" src="themes/hardwired/images/buttonleft1.gif" width="7" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td style="background: url(themes/hardwired/images/buttoncenter.gif);"&gt;
                                                &lt;a href="{TOPN_TGT}" title="{TOPN_LNK}"&gt;{TOPN_LNK}&lt;/a&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonright1" src="themes/hardwired/images/buttonright1.gif" width="7" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonleft1" src="themes/hardwired/images/buttonleft1.gif" width="7" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td style="background: url(themes/hardwired/images/buttoncenter.gif);"&gt;
                                                &lt;a href="{TOPRATED_TGT}" title="{TOPRATED_LNK}"&gt;{TOPRATED_LNK}&lt;/a&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonright1" src="themes/hardwired/images/buttonright1.gif" width="7" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonleft1" src="themes/hardwired/images/buttonleft1.gif" width="7" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td style="background: url(themes/hardwired/images/buttoncenter.gif);"&gt;
                                                &lt;a href="{FAV_TGT}" title="{FAV_LNK}"&gt;{FAV_LNK}&lt;/a&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonright1" src="themes/hardwired/images/buttonright1.gif" width="7" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonleft1" src="themes/hardwired/images/buttonleft1.gif" width="7" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                        &lt;td style="background: url(themes/hardwired/images/buttoncenter.gif);"&gt;
                                                &lt;a href="{SEARCH_TGT}" title="{SEARCH_LNK}"&gt;{SEARCH_LNK}&lt;/a&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;&lt;img name="buttonright1" src="themes/hardwired/images/buttonright1.gif" width="7" height="25" border="0" alt="" /&gt;&lt;/td&gt;
                                &lt;/tr&gt;
                        &lt;/table&gt;

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 &lt;&lt;&lt;EOT
&lt;!-- Start standard table title --&gt;
&lt;table align="center" width="$width" cellspacing="0" cellpadding="0" class="maintablea"&gt;
        &lt;tr&gt;
                &lt;td&gt;
                        &lt;table width="100%" cellspacing="0" cellpadding="0" class="tableh1a"&gt;
                                &lt;tr&gt;
                                        &lt;td class="tableh1a"&gt;&lt;img src="themes/mac_ox_x/images/tableh1a_bg_left.gif" alt="" /&gt;&lt;/td&gt;
                                        &lt;td class="tableh1a" style="background-image:url(themes/mac_ox_x/images/tableh1a_bg_middle.gif);" width="100%"&gt;$title&lt;/td&gt;
                                        &lt;td class="tableh1a"&gt;&lt;img src="themes/mac_ox_x/images/tableh1a_bg_right.gif" alt="" /&gt;&lt;/td&gt;
                                &lt;/tr&gt;
                        &lt;/table&gt;
                &lt;/td&gt;
        &lt;/tr&gt;
&lt;/table&gt;
&lt;!-- Start standard table --&gt;
&lt;table align="center" width="$width" cellspacing="0" cellpadding="0"&gt;
  &lt;tr&gt;
   &lt;td style="background-image:url(themes/mac_ox_x/images/main_table_r1_c1b.gif);" valign="top"&gt;&lt;img name="main_table_r1_c1" src="themes/mac_ox_x/images/main_table_r1_c1.gif" border="0"  alt="" /&gt;&lt;/td&gt;
        &lt;td width="100%"&gt;&lt;table width="100%" cellspacing="1" cellpadding="0" class="maintableb"&gt;

EOT;
    } else {
        echo &lt;&lt;&lt;EOT

&lt;!-- Start standard table --&gt;
&lt;table align="center" width="$width" cellspacing="0" cellpadding="0"&gt;
  &lt;tr&gt;
   &lt;td style="background-image:url(themes/mac_ox_x/images/main_table_r1_c1b.gif);" valign="top"&gt;&lt;img name="main_table_r1_c1" src="themes/mac_ox_x/images/main_table_r1_c1.gif" border="0"  alt="" /&gt;&lt;/td&gt;
        &lt;td width="100%"&gt;&lt;table width="100%" cellspacing="1" cellpadding="0" class="maintable"&gt;

EOT;
    }
}

function endtable()
{
    echo &lt;&lt;&lt;EOT
        &lt;/table&gt;
   &lt;/td&gt;
   &lt;td style="background-image:url(themes/mac_ox_x/images/main_table_r1_c3b.gif);" valign="top"&gt;&lt;img name="main_table_r1_c3" src="themes/mac_ox_x/images/main_table_r1_c3.gif" border="0"  alt="" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td&gt;&lt;img name="main_table_r2_c1" src="themes/mac_ox_x/images/main_table_r2_c1.gif" width="10" height="4" border="0"  alt="" /&gt;&lt;/td&gt;
   &lt;td style="background-image:url(themes/mac_ox_x/images/main_table_r2_c2b.gif);"&gt;&lt;img name="main_table_r2_c2" src="themes/mac_ox_x/images/main_table_r2_c2.gif" border="0"  alt="" /&gt;&lt;/td&gt;
   &lt;td&gt;&lt;img name="main_table_r2_c3" src="themes/mac_ox_x/images/main_table_r2_c3.gif" width="10" height="4" border="0"  alt="" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;!-- End standard table --&gt;

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 = &lt;&lt;&lt;EOT

                        &lt;table width="100%" cellpadding="0" cellspacing="0"&gt;
                        &lt;tr&gt;
                                &lt;td width="100%" class="statlink"&gt;{ALBUM_NAME}&lt;/td&gt;
                                &lt;td class="sortorder_options" style="font-size: 100%;"&gt;{TITLE}&lt;/td&gt;
                                &lt;td class="sortorder_options" style="font-size: 100%;"&gt;&lt;span class="statlink"&gt;&lt;a href="thumbnails.php?album={AID}&amp;amp;page={PAGE}&amp;amp;sort=ta" title="{SORT_TA}"&gt;&amp;nbsp;+&amp;nbsp;&lt;/a&gt;&lt;/span&gt;&lt;/td&gt;
                                &lt;td class="sortorder_options" style="font-size: 100%;"&gt;&lt;span class="statlink"&gt;&lt;a href="thumbnails.php?album={AID}&amp;amp;page={PAGE}&amp;amp;sort=td" title="{SORT_TD}"&gt;&amp;nbsp;-&amp;nbsp;&lt;/a&gt;&lt;/span&gt;&lt;/td&gt;
                                &lt;td&gt;&amp;nbsp;&amp;nbsp;&lt;/td&gt;
                                &lt;td class="sortorder_options" style="font-size: 100%;"&gt;{NAME}&lt;/td&gt;
                                &lt;td class="sortorder_options" style="font-size: 100%;"&gt;&lt;span class="statlink"&gt;&lt;a href="thumbnails.php?album={AID}&amp;amp;page={PAGE}&amp;amp;sort=na" title="{SORT_NA}"&gt;&amp;nbsp;+&amp;nbsp;&lt;/a&gt;&lt;/span&gt;&lt;/td&gt;
                                &lt;td class="sortorder_options" style="font-size: 100%;"&gt;&lt;span class="statlink"&gt;&lt;a href="thumbnails.php?album={AID}&amp;amp;page={PAGE}&amp;amp;sort=nd" title="{SORT_ND}"&gt;&amp;nbsp;-&amp;nbsp;&lt;/a&gt;&lt;/span&gt;&lt;/td&gt;
                                &lt;td&gt;&amp;nbsp;&amp;nbsp;&lt;/td&gt;
                                &lt;td class="sortorder_options" style="font-size: 100%;"&gt;{DATE}&lt;/td&gt;
                                &lt;td class="sortorder_options" style="font-size: 100%;"&gt;&lt;span class="statlink"&gt;&lt;a href="thumbnails.php?album={AID}&amp;amp;page={PAGE}&amp;amp;sort=da" title="{SORT_DA}"&gt;&amp;nbsp;+&amp;nbsp;&lt;/a&gt;&lt;/span&gt;&lt;/td&gt;
                                &lt;td class="sortorder_options" style="font-size: 100%;"&gt;&lt;span class="statlink"&gt;&lt;a href="thumbnails.php?album={AID}&amp;amp;page={PAGE}&amp;amp;sort=dd" title="{SORT_DD}"&gt;&amp;nbsp;-&amp;nbsp;&lt;/a&gt;&lt;/span&gt;&lt;/td&gt;
                                &lt;td&gt;&amp;nbsp;&amp;nbsp;&lt;/td&gt;
                                &lt;td class="sortorder_options" style="font-size: 100%;"&gt;{POSITION}&lt;/td&gt;
                                &lt;td class="sortorder_options" style="font-size: 100%;"&gt;&lt;span class="statlink"&gt;&lt;a href="thumbnails.php?album={AID}&amp;amp;page={PAGE}&amp;amp;sort=pa" title="{SORT_PA}"&gt;&amp;nbsp;+&amp;nbsp;&lt;/a&gt;&lt;/span&gt;&lt;/td&gt;
                                &lt;td class="sortorder_options" style="font-size: 100%;"&gt;&lt;span class="statlink"&gt;&lt;a href="thumbnails.php?album={AID}&amp;amp;page={PAGE}&amp;amp;sort=pd" title="{SORT_PD}"&gt;&amp;nbsp;-&amp;nbsp;&lt;/a&gt;&lt;/span&gt;&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;/table&gt;

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>&lt;td align="center" class="tableb" nowrap="nowrap"&gt;</pre>

                        <h6>Replace with:</h6>
                        <pre>&lt;td align="center" class="display_media" nowrap="nowrap"&gt;</pre>
                </li>
    <li>
                        If your theme modifies $template_cat_list replace tableh2 with catrow_noalb in the catrow_noalb block
                          <h6>Find:</h6>
                        <pre>&lt;!-- BEGIN catrow_noalb --&gt;<br />        &lt;tr&gt;<br />                &lt;td class="tableh2" colspan="3"&gt;&lt;table border="0"&gt;&lt;tr&gt;&lt;td align="left"&gt;{CAT_THUMB}&lt;/td&gt;&lt;td align="left"&gt;&lt;span class="catlink"&gt;&lt;b&gt;{CAT_TITLE}&lt;/b&gt;&lt;/span&gt;{CAT_DESC}&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;<br />        &lt;/tr&gt;<br />&lt;!-- END catrow_noalb --&gt;</pre>
                        <h6>Replace with :</h6>
                        <pre>&lt;!-- BEGIN catrow_noalb --&gt;<br />        &lt;tr&gt;<br />                &lt;td class="catrow_noalb" colspan="3"&gt;&lt;table border="0"&gt;&lt;tr&gt;&lt;td align="left"&gt;{CAT_THUMB}&lt;/td&gt;&lt;td align="left"&gt;&lt;span class="catlink"&gt;&lt;b&gt;{CAT_TITLE}&lt;/b&gt;&lt;/span&gt;{CAT_DESC}&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;<br />        &lt;/tr&gt;<br />&lt;!-- END catrow_noalb --&gt;</pre>
                </li>
    <li>
                        If your theme modifies $template_cat_list replace tableb with catrow in the catrow block
                          <h6>Find:</h6>
                        <pre>&lt;!-- BEGIN catrow --&gt;<br />        &lt;tr&gt;<br />                &lt;td class="tableb" align="left"&gt;&lt;table border="0"&gt;&lt;tr&gt;&lt;td&gt;{CAT_THUMB}&lt;/td&gt;&lt;td&gt;&lt;span class="catlink"&gt;&lt;b&gt;{CAT_TITLE}&lt;/b&gt;&lt;/span&gt;{CAT_DESC}&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;<br />                &lt;td class="tableb" align="center"&gt;{ALB_COUNT}&lt;/td&gt;<br />                &lt;td class="tableb" align="center"&gt;{PIC_COUNT}&lt;/td&gt;<br />        &lt;/tr&gt;<br />        &lt;tr&gt;<br />            &lt;td class="tableb" colspan="3"&gt;{CAT_ALBUMS}&lt;/td&gt;<br />        &lt;/tr&gt;<br />&lt;!-- END catrow --&gt;</pre>
                        <h6>Replace with :</h6>
                        <pre>&lt;!-- BEGIN catrow --&gt;<br />        &lt;tr&gt;<br />                &lt;td class="catrow" align="left"&gt;&lt;table border="0"&gt;&lt;tr&gt;&lt;td&gt;{CAT_THUMB}&lt;/td&gt;&lt;td&gt;&lt;span class="catlink"&gt;&lt;b&gt;{CAT_TITLE}&lt;/b&gt;&lt;/span&gt;{CAT_DESC}&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;<br />                &lt;td class="catrow" align="center"&gt;{ALB_COUNT}&lt;/td&gt;<br />                &lt;td class="catrow" align="center"&gt;{PIC_COUNT}&lt;/td&gt;<br />        &lt;/tr&gt;<br />        &lt;tr&gt;<br />            &lt;td class="tableb" colspan="3"&gt;{CAT_ALBUMS}&lt;/td&gt;<br />        &lt;/tr&gt;<br />&lt;!-- END catrow --&gt;</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>&nbsp;|&nbsp;<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">&raquo; theme.php</font><a
                href="validation.html">Validation</a>
        </div>
        <!-- end nav links -->
</div>
</body>
</html>