Edit theme.php

Many notable things have happened that will influence your modifications to your theme.php.

• {MAIN_MENU} was officially split into "{SYS_MENU}" and "{SUB_MENU}".
• Both menus can have buttons generated by a button template instead of all buttons being coded into a single menu template.
• 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
• 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.

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.

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".

1. Rename your theme.php to theme.old.php
2. Create a new theme.php file in it's place

   Insert the following:

   <?php
   /*************************
     Coppermine Photo Gallery
     ************************
     Copyright (c) 2003-2007 Coppermine 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 as published by
     the Free Software Foundation; either version 2 of the License, or
     (at your option) any later version.
     ********************************************
     Coppermine version: 1.4.12
     $Source:
     $Revision:
     $Author:
     $Date:
   **********************************************/
   
   
   ?>
   

   You now have a functional theme.

3. Everything from this point forward should be added between these two lines:

   **********************************************/
   
   
   ?>
   

4. Evaluate the available defines and add them to your theme.php
   • define('THEME_HAS_RATING_GRAPHICS', 1);

     The location for the ratings graphics will be directed to the themes images folder.

     • RUBBISH : images/rating0.gif
     • POOR : images/rating1.gif
     • FAIR : images/rating2.gif
     • GOOD : images/rating3.gif
     • EXCELLENT : images/rating4.gif
     • GREAT : images/rating5.gif

     if your theme's images folder contain these filenames insert the define

     define('THEME_HAS_RATING_GRAPHICS', 1);
     

   • define('THEME_HAS_NAVBAR_GRAPHICS', 1);

     The location for the navbar graphics will be directed to the themes images folder.

     • Back to thumbnails : images/thumbnails.gif
     • Picture Information : images/info.gif
     • Slideshow : images/slideshow.gif
     • Report to admin : images/report.gif *NEW*
     • Ecard : images/ecard.gif
     • Previous : images/prev.gif
     • Next : images/next.gif

     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.

     if your theme's images folder contain these filenames insert the define

     define('THEME_HAS_NAVBAR_GRAPHICS', 1);
     

     Copy classic's report.gif or create a new report.gif for your theme if you set the define

   • define('THEME_HAS_FILM_STRIP_GRAPHIC', 1);

     The location for the film strip graphic will be directed to the themes images folder.

     • tile : images/tile.gif

     This define specifies a single tile to be used for both locations.

     if your theme's images folder contains the above filename insert this define

     define('THEME_HAS_FILM_STRIP_GRAPHIC', 1);
     

   • define('THEME_HAS_FILM_STRIP_GRAPHICS', 1);

     The location for the film strip graphics will be directed to the themes images folder.

     • tile on the top : images/tile1.gif *NEW*
     • tile on the bottom : images/tile2.gif *NEW*

     This define specifies TWO tiles.

     if your theme's images folder contains these filenames insert this define

     define('THEME_HAS_FILM_STRIP_GRAPHICS', 1);
     

   • define('THEME_IS_XHTML10_TRANSITIONAL',1);

     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.

     if your theme has passed the validation methodology insert this define:

     define('THEME_IS_XHTML10_TRANSITIONAL',1);
     

   • define('THEME_HAS_NO_SYS_MENU_BUTTONS', 1);

     When present the system won't attempt to replace the token {BUTTONS} in the SYS_MENU template. The entire block needs to be present.

     Only set this after you determine you can't use the buttons template!

     If you can't use the SYS_MENU buttons template insert this define:

     define('THEME_HAS_NO_SYS_MENU_BUTTONS', 1);
     

     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".

   • define('THEME_HAS_NO_SUB_MENU_BUTTONS', 1);

     When present the system won't attempt to replace {BUTTONS} in the SUB_MENU template The entire block needs to be present.

     Only set this after you determine you can't use the buttons template!

     If you can't use the SUB_MENU buttons template insert this define:

     define('THEME_HAS_NO_SUB_MENU_BUTTONS', 1);
     

     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".

5. Take stock of what you have so far, test your theme.
6. Changing the menu item separator

   Classic uses a "::" separator between each menu option that you can override by modifying the "$template_sys_menu_spacer"

   // HTML template for template sys_menu spacer
   $template_sys_menu_spacer ="::";
   

   Insert into your theme.php and modify to suit

   The sub menu templates are automatically inherited from sys menu's and you override them in exactly the same way

   Examples:

   • Water_Drop
   • Fruity
   • Eyeball
7. If you need a separator before the first and after the last buttons you can use this example from "MAC_OX_X"

   "$template_sys_menu_spacer" and "$template_sub_menu_spacer" are only rendered BETWEEN active elements.

   Insert into your theme.php and modify to suit

   // HTML template for sys_menu
   $template_sys_menu = <<<EOT
            |{BUTTONS}|
   EOT;
   
   // HTML template for template sys_menu spacer
   $template_sys_menu_spacer ="|";
   

8. 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".

   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.

   Insert into your theme.php and modify to suit

   // 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;
   

9. 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.

   Define 'THEME_HAS_NO_SYS_MENU_BUTTONS' and include a "$template_sys_menu" template.

   Insert this define

   define('THEME_HAS_NO_SYS_MENU_BUTTONS', 1);
   

   Copy the correct portion of "$template_main_menu" or "$template_main_menu1" from your theme.old.php as in this example from "Hardwired"

   Verify that your template includes all of the following {TOKENS}, and rename the template to "$template_sys_menu"

   // 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;
   

10. 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.

    Define 'THEME_HAS_NO_SUB_MENU_BUTTONS' and include a "$template_sys_menu" template.

    Insert this define

    define('THEME_HAS_NO_SUB_MENU_BUTTONS', 1);
    

    Copy the correct portion of "$template_main_menu" or "$template_main_menu2" from your theme.old.php as in this example from "Hardwired"

    Verify that your template includes all of the following {TOKENS}, and rename the template to "$template_sub_menu"

    // 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;
    

11. You've reached another milestone in your theme upgrade.

    Take stock of what you have so far, test your theme.

12. 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"

    Insert into your theme.php and modify to suit

    // 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;
    }
    

13. If you have included custom starttable and endtable code the sort options in the thumbnail view may no longer fit properly.

    You can use this example also from "MAC_OX_X" to correct it.

    Insert into your theme.php and modify to suit

    // 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;
    

14. If your theme modifies $template_display_picture replace it with $template_display_media

    Find all instances of:

    $template_display_picture

    Replace all with:

    $template_display_media

15. If you used a previous $template_display_picture replace tableb with display_media in $template_display_media block

    Find:

    <td align="center" class="tableb" nowrap="nowrap">

    Replace with:

    <td align="center" class="display_media" nowrap="nowrap">

16. If your theme modifies $template_cat_list replace tableh2 with catrow_noalb in the catrow_noalb block

    Find:

    <!-- BEGIN catrow_noalb -->
            <tr>
                    <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>
            </tr>
    <!-- END catrow_noalb -->

    Replace with :

    <!-- BEGIN catrow_noalb -->
            <tr>
                    <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>
            </tr>
    <!-- END catrow_noalb -->

17. If your theme modifies $template_cat_list replace tableb with catrow in the catrow block

    Find:

    <!-- BEGIN catrow -->
            <tr>
                    <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>
                    <td class="tableb" align="center">{ALB_COUNT}</td>
                    <td class="tableb" align="center">{PIC_COUNT}</td>
            </tr>
            <tr>
                <td class="tableb" colspan="3">{CAT_ALBUMS}</td>
            </tr>
    <!-- END catrow -->

    Replace with :

    <!-- BEGIN catrow -->
            <tr>
                    <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>
                    <td class="catrow" align="center">{ALB_COUNT}</td>
                    <td class="catrow" align="center">{PIC_COUNT}</td>
            </tr>
            <tr>
                <td class="tableb" colspan="3">{CAT_ALBUMS}</td>
            </tr>
    <!-- END catrow -->

18. For the majority of themes you are now done adding content to your theme.php.

    Take stock of what you have so far, test your theme.

19. For a list of everything that could be modified examine the "sample" theme.

    The "sample" theme found in themes/sample is designed to be a showcase for every themeable function and template used in Coppermine.

    "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.