Coppermine Photo Gallery v1.5.x: Documentation and Manual

No translation available

Converting cpg1.3.x themes to cpg1.4.x

To make your custom made theme from cpg1.3.x work with cpg1.4.x, you will need to make some changes. Remember to back up your original files, so you can go back to a working version in case something goes wrong with the modifications.

The files to be edited would be in the particular folder of the theme in the themes folder. For example, the files for the "classic" theme could be found in themes/classic

Edit style.css
Edit template.html
Edit theme.php
Validation

Edit style.css

Create a new ID for the "#admin_menu_anim object"

Find:

.admin_menu a:hover {
        color: #000000;
        text-decoration: underline;
}

Add after it:

td #admin_menu_anim {
        background-image : url(images/button_bg_anim.gif);
}

Copy the file "button_bg_anim.gif" from "themes/classic/images" to the theme's "images" directory.

Create a new class for the "thumb_filename" class.

Find:

.thumb_title {
        font-weight : bold;
        font-size: 80%;
        padding: 2px;
        display : block;
}

Add before it:

.thumb_filename {
        font-size: 80%;
        display: block;
}

Remove the proprietary value "hand" for class ".clickable_option"

Find:

.clickable_option {
        border-bottom : 1px dotted blue;
        cursor : hand;
}

Replace with:

.clickable_option {
        border-bottom : 1px dotted blue;
        cursor : default;
}

Add the style information for the vanity roll-over graphics

Insert at the bottom of style.css

#vanity a {
        display:block;
        width:57px;
        height:20px;
        margin: 3px 20px;
}
#vanity img {border:0}
#v_php {float:left;background-image:url(../../images/powered-php.gif);}
#v_php:hover {background-image:url(../../images/h_powered-php.gif);}
#v_mysql {float:left;background-image:url(../../images/powered-mysql.gif);}
#v_mysql:hover  {background-image:url(../../images/h_powered-mysql.gif);}
#v_xhtml {float:right;background-image:url(../../images/valid-xhtml10.gif);}
#v_xhtml:hover {background-image:url(../../images/h_valid-xhtml10.gif);}
#v_css {float:right;background-image:url(../../images/valid-css.gif);}
#v_css:hover{background-image:url(../../images/h_valid-css.gif);}

Add the "catrow_noalb" class. It is used for rows that do not contain albums and was based on "tableh2". In order to maintain your themes look simply add it to "tableh2" selector.

Find:

.tableh2 {
        background: #D1D7DC ;
        color : #000000;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

Replace with:

.tableh2, .catrow_noalb {
        background: #D1D7DC ;
        color : #000000;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

Add the "catrow" and "display_media" classes which are both based on "tableb". "catrow" styles the category rows on the index page and "display_media" styles the background color of the intermediate image on the displayimage page.

Find:

.tableb {
        background: #EFEFEF ;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

Replace with:

.tableb , .display_media , .catrow {
        background: #EFEFEF ;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

Validate the style sheet: http://jigsaw.w3.org/css-validator
Make changes as necessary.

Edit template.html

Change the DOCTYPE; Coppermine 1.4.x is XHTML 1.0 Transitional.

Find:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Replace with:

(or insert as the first line of template.html if it is missing)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Coppermine 1.4.x officially split the main menu into two menus: SYS_MENU and SUB_MENU.
If your theme uses a single menu, find:
```
{MAIN_MENU}
```
Replace with:
Note: the "<br />" is for classic your theme may require a different separator.
```
{SYS_MENU}<br />{SUB_MENU}
```
If your theme uses two menus, Find:
```
{MAIN_MENU1}
```
Replace with:
```
{SYS_MENU}
```
Then find:
```
{MAIN_MENU2}
```
Replace with:
```
{SUB_MENU}
```
Choose a place where the vanity graphics should be located on your Coppermine pages. Vanity graphics display the "Powered by MySQL and PHP, as well as the XHTML and CSS Validation banners and link to their respective parties.
It is recommended to do this even if you're not planning to actually use them as they can be enabled or disabled according to whether the theme is defined as XHTML 1.0 Transitional Valid.

Below are the vanity icons used in the classic theme:

Find a place anywhere between <body> and </body> where you want the vanity icons to appear. Usually this should go at the bottom of the page right before the </body> tag.

Insert the vanity graphics:
```
{VANITY}
```
Choose a place where the custom header and custom footer should be located on your Coppermine pages. It is recommended to do this even if you're not planning to actually use them as they can be enabled or disabled at any time in the Coppermine configuration:
- {CUSTOM_HEADER}: Custom PHP header, like anycontent.php but shown on every page.
- {CUSTOM_FOOTER}: Custom PHP footer, like anycontent.php but shown on every page.
It's recommended to place the custom header immediately following the <body> tag and the custom footer immediately before the "{VANITY}" token or immediately before the </body> tag.

Insert the custom header:
```
{CUSTOM_HEADER}
```
Insert the custom footer:
```
{CUSTOM_FOOTER}
```

Prepare the template.html for validation by itself.

Find:

<html dir="{LANG_DIR}">

Replace with:

<!-- <html dir="{LANG_DIR}"> -->
<html>

Find:

<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />

Replace with:

<!-- <meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" /> -->

Find:

{META}

Replace with:

<!-- {META} -->

Validate the template.html: http://validator.w3.org
Common Errors:
- Missing <head> or </head> elements; Insert them in the proper place.
- Tables nested inside of <span></span> elements; switch to <div></div> instead.
- Table cells using the depreciated background property "<td background="; use inline styles: "<td style="background-image:url(...);">"
- Duplicate "id=" fields; The "id" field is supposed to be unique because it is used as a javascript selector as well as a CSS selector; Eliminate the duplicate values
Make other changes as necessary.

Prepare template.html to be used as a Coppermine template after validation.

Find:

<!-- <html dir="{LANG_DIR}"> -->
<html>

Replace with:

<html dir="{LANG_DIR}">

Find:

<!-- <meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" /> -->

Replace with:

 <meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />

Find:

<!-- {META} -->

Replace with

{META}

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

Rename your theme.php to theme.old.php

Create a new theme.php file in it's place

Insert the following:

<?php
/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2010 Coppermine 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.5.4
  $Source:
  $Revision:
  $LastChangedBy:
  $Date:
**********************************************/


?>

You now have a functional theme.

Everything from this point forward should be added between these two lines:
```
**********************************************/


?>
```
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".
Take stock of what you have so far, test your theme.
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
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 ="|";
```

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 "" and "" 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;

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;

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;

You've reached another milestone in your theme upgrade.
Take stock of what you have so far, test your theme.

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="cpg_zebra">

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

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;

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

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

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

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

Validation Methodology

Now that you have a functioning "style.css", "template.html" and "theme.php" you should verify that it is generating valid output.

Suggestions to help you bring the theme you are editing up to XHTML 1.0 Transitional HTML
- All ampersands that form part of a URL are to be coded '&'. There are quite a few of these in the functions of theme.php.
- All images to have the 'alt' attribute, and be closed ' />'.
- All meta tags should be closed ' />'
- All <hr> and <br> tags should be closed <hr /><br />
- All background images/colors to be changed to CSS or style attributes. This depends on the layout.
- Any existing tags or attributes in uppercase (such as onClick) to be changed to lowercase.
Save all your open files and upload them to your webserver; test-drive both as admin and as "regular" user.
Use the following methodology to confirm that your theme generates valid XHTML 1.0 Transitional HTML.
Each of the following pages needs to be validated as an anonymous user, registered user, and in admin mode:
- index.php
- thumbnails.php
- displayimage.php
- search.php
- emailed HTML E-card.
The following toolbars can assist you in validating the resulting output of your theme:

Internet Explorer:
- Web Accessibility Toolbar (Creative Commons License)
Mozilla Firefox:
- Web Developer Extension (GPL)

Congratulations

Your theme should now be ready to use with Coppermine 1.4.x

$LastChangedDate: 2010-05-26 14:30:55 +0200 (Mi, 26. Mai 2010) $ $Revision: 7577 $

Coppermine Photo Gallery v1.5.x: Documentation and Manual

Converting cpg1.3.x themes to cpg1.4.x

Edit style.css

Edit template.html

Edit theme.php

Examples:

Validation Methodology

Congratulations