0byt3m1n1
Path:
/
data
/
applications
/
aps.bak
/
coppermine
/
1.5.12-0
/
standard
/
htdocs
/
docs
/
se
/
[
Home
]
File: theme_examples.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> <title>Theme examples - Coppermine Photo Gallery - Documentation & Manual</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="language" content="en" /> <meta name="copyright" content="Coppermine dev team" /> <meta name="description" content="This page contains a summary of modification examples that frequently are being requested on the Coppermine support board. The wording differs as well as the extra items that users want to add. Most users are looking for information how to add adverts (like Google's adsense) in particular places." /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta http-equiv="imagetoolbar" content="no" /> <!-- SVN version info: Coppermine version: 1.5.12 $HeadURL: https://coppermine.svn.sourceforge.net/svnroot/coppermine/trunk/cpg1.5.x/docs/se/theme_examples.htm $ $Revision: 8154 $ --> <link rel="stylesheet" type="text/css" href="../style/style.css" media="all" /> <link rel="stylesheet" type="text/css" href="../style/screen.css" media="screen" /> <link rel="stylesheet" type="text/css" href="../style/print.css" media="print" /> <link rel="shortcut icon" href="../favicon.ico" /> <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.treeview.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script> </head> <body> <h1 id="docheader">Coppermine Photo Gallery v1.5.x: Documentation and Manual</h1> <div id="toc"> <a href="toc.htm">Table of Contents</a> </div> <div id="doc_en_only">No translation available</div> <a name="theme_examples"></a><h1>Theme examples<a href="#theme_examples" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h1> <p>This page contains a summary of modification examples that frequently are being requested on the Coppermine support board. The wording differs as well as the extra items that users want to add. Most users are looking for information how to add adverts (like Google's adsense) in particular places.</p> <p>We assume that you have read and understood the basics about themes in Coppermine: by now, you should know that</p> <ul> <li>static content that is meant to display on <strong>all</strong> Coppermine-driven pages should reside in <a href="theme_template.htm">template.html</a></li> <li>style changes (changing colors, looks of borders, margin width etc.) can be accomplished in style.css</li> <li>sections of theme.php that need editing can be found in the <a href="theme_theme_php.htm#theme_sample">sample theme</a></li> </ul> <p class="cpg_message_success">This page will only explain what sections of theme.php need editing to accomplish particular extra features. You need to read up <strong>how</strong> to copy those sections first. If you're not familiar with this, read up <a href="theme_theme_php.htm#theme_sample">The sample theme - a template to copy from</a>; this entire page assumes that you have read and understood that section.</p> <a name="theme_examples_summary"></a><h2>Summary<a href="#theme_examples_summary" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <ul> <li><a href="#theme_examples_content">Additional content</a> <ul> <li><a href="#theme_examples_content_thumbnail">Additional content on the thumbnail page</a> <ul> <li><a href="#theme_examples_content_thumbnail_extra_row">Extra row between thumbnail rows</a></li> <li><a href="#theme_examples_content_thumbnail_cell">Extra table cell on each thumbnail page</a></li> </ul> </li> <li><a href="#theme_examples_content_displayimage">Additional content on the intermediate-image pages</a> <ul> <li><a href="#theme_examples_content_displayimage_image">Directly next to the intermediate image</a></li> <li><a href="#theme_examples_content_displayimage_filmstrip">Directly next to the film strip</a></li> </ul> </li> <li><a href="#theme_examples_content_fullsize">Additional content on the full-size pop-up</a></li> <li><a href="#theme_examples.htm#theme_examples_content_menu">Additional menu items</a> <ul> <li><a href="#theme_examples_content_menu">Entire menu structure defined in one block</a></li> </ul> </li> </ul> </li> </ul> <a name="theme_examples_content"></a><h2>Additional content<a href="#theme_examples_content" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>This section is meant to how to add additional content to particular places of Coppermine's output. Most users want to display adverts as additional content, like Google's adsense or Adbrite (as seen on Yahoo and ebay).</p> <p>As examples, we will only add a short sentence like "your custom content" or similar. You can replace that of course with any HTML/JavaScript as you see fit. This documentation will not cover how to actually add the HTM markup for those ad-programs nor will it explain how that works. There are much better places on the web to get an impression how those advert technlogies work and how to implement the basics.</p> <div class="indent"> <a name="theme_examples_content_thumbnail"></a><h3>Additional content on the thumbnail page<a href="#theme_examples_content_thumbnail" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <p>Modifications that will have an impact on the display of the thumbnail pages.</p> <div class="indent"> <a name="theme_examples_content_thumbnail_extra_row"></a><h4>Extra row between thumbnail rows<a href="#theme_examples_content_thumbnail_extra_row" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h4> <p class="cpg_message_info">This modification will modify the separator between the table rows that compose the thumbnail screen: a row will be added where you can add textual content or a horizontal banner ad.</p> Edit <tt class="filename">themes/yourtheme/theme.php</tt> using a <a href="dev_tools.htm#dev_tools_editor">plain-text editor</a>, find <tt class="code">$template_thumbnail_view</tt> and modify as suggested below. If <tt class="code">$template_thumbnail_view</tt> doesn't exist in your custom theme, copy that section from the sample theme first.<br /> Inside the variable definition for <tt class="code">$template_thumbnail_view</tt>, find <pre class="cpg_code"><!-- BEGIN row_separator --> </tr> <tr> <!-- END row_separator --></pre> and replace with <pre class="cpg_code"><!-- BEGIN row_separator --> </tr> <tr> <td colspan="{$CONFIG['thumbcols']}"> your custom content </td> </tr> <tr> <!-- END row_separator --></pre> <a name="theme_examples_content_thumbnail_cell"></a><h4>Extra table cell on each thumbnail page<a href="#theme_examples_content_thumbnail_cell" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h4> <p>This is a more advanced mod that will require more editing. What it does though is more subtle: it doesn't add an entire row or column to the thumbnail page, but replaces one of the thumbnails on each thumbnail page with a cell with your custom content (e.g. your advert).</p> Edit <tt class="filename">themes/yourtheme/theme.php</tt> using a <a href="dev_tools.htm#dev_tools_editor">plain-text editor</a>, find <tt class="code">$template_thumbnail_view</tt> and modify as suggested below. If <tt class="code">$template_thumbnail_view</tt> doesn't exist in your custom theme, copy that section from the sample theme first.<br /> In the variable definition for <tt class="code">$template_thumbnail_view</tt>, find <pre class="cpg_code"><!-- END spacer --></pre> and add after it (into a new line of it's own) <pre class="cpg_code"><!-- BEGIN advert --> <td valign="top" class="thumbnails" width ="{CELL_WIDTH}" align="center"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td align="center"> Your custom content here </td> </tr> </table> </td> <!-- END advert --></pre> Next, you'll need to edit the function definition for the function named <tt class="code">theme_display_thumbnails</tt>. In <tt class="filename">themes/yourtheme/theme.php</tt>, find <tt class="code">function theme_display_thumbnails</tt> and modify as suggested below. If that particular section doesn't exist in your custom theme, copy the function definition from the sample theme. To accomplish that, copy everything starting at (and including) <pre class="cpg_code">/****************************************************************************** ** Section <<<theme_display_thumbnails>>> - START ******************************************************************************/</pre> untill (and including) <pre class="cpg_code">/****************************************************************************** ** Section <<<theme_display_thumbnails>>> - END ******************************************************************************/</pre> into a new line before <tt class="code">?></tt> of <tt class="filename">themes/yourtheme/theme.php</tt><br /> In that function definition, find <pre class="cpg_code"> static $spacer = '';</pre> and add into a new line after it <pre class="cpg_code"> static $advert = '';</pre><br /> Next, find <pre class="cpg_code"> $spacer = template_extract_block($template_thumbnail_view, 'spacer');</pre> and add after it into a new line <pre class="cpg_code"> $advert = template_extract_block($template_thumbnail_view, 'advert');</pre><br /> After that, find <pre class="cpg_code"> $thumbcols = $CONFIG['thumbcols'];</pre> and add after that into a new line <pre class="cpg_code"> $thumbrows = $CONFIG['thumbrows'];</pre><br /> Now, find <pre class="cpg_code"> foreach($thumb_list as $thumb) {</pre> and add <strong>before</strong> it in a line of it's own <pre class="cpg_code"> // Start modification "random table cell ad" $number_of_thumbs = count($thumb_list); $advert_position = rand(0,$number_of_thumbs-1);</pre><br /> Scroll down and find <pre class="cpg_code"> echo template_eval($thumb_cell, $params);</pre> and <strong>replace</strong> that line with <pre class="cpg_code"> // Add the advert cell if (defined('DISPLAY_ADS_FOR_META_ALBUMS') || is_numeric($aid) == TRUE) { $display_advert = 1; } else { $display_advert = 0; } if ($i == $advert_position && $mode == 'thumb' && $display_advert == 1) { if ($number_of_thumbs < $thumbcols * $thumbrows) { // We have room to display // the extra advert cell //print_r($thumb_list); $thumb_list[($number_of_thumbs+1)] = $thumb; echo template_eval($advert, $params); } else { // We do not have room for the extra advert cell, // so we'll have to replace one (i.e. drop the // content of the thumb that should usually reside // here without the ad) echo template_eval($advert, $params); } } else { echo template_eval($thumb_cell, $params); }</pre><br /> <!-- Taken from http://forum.coppermine-gallery.net/index.php/topic,58008.0.html --> <p>You have to make sure to apply this mod thoroughly. It's advisable to back up your custom theme.php first in case anything should go wrong, so that you can safely go back just in case.</p> </div> <hr /> <a name="theme_examples_content_displayimage"></a><h3>Additional content on the intermediate-image pages (displayimage.php)<a href="#theme_examples_content_displayimage" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <p>The output of displayimage.php - the page that shows the intermediate-sized image embedded into your site's layout is the page that your visitors will pay most attention to, as you managed to attract their attention on previous pages, so they decided to click on a thumbnail that sent them to the intermediate imaghe view. On this page, you can display adverts easily and you will almost certainly get a good click-through-rate, but you need to pay attention: the site already contains a lot of information - cluttering it more with even more content can be dangerous, as the visitor might feel overwhelmed and leave.</p> <div class="indent"> <a name="theme_examples_content_displayimage_image"></a><h4>Directly next to the intermediate image<a href="#theme_examples_content_displayimage_image" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h4> <p>The instructions apply for all extra content that should be applied <em>above</em>, <em>below</em> or next to (at the <em>right</em> or <em>left</em>) of your actual intermediate image that is embedded into the page. Keep in mind though that the place at the right or left may already be small, depending on the screen resolution of your visitor and the size of your intermediate image, so it's advisable to add your extra content at the top or bottom rather.</p> Edit <tt class="filename">themes/yourtheme/theme.php</tt>, find the variable definition for <tt class="code">$template_display_media</tt> and edit as suggested below. If that definition doesn't exist in your custom theme, copy it first from the sample theme, then edit accordingly.<br /> The section that needs changing is the table that wraps the template token <tt class="code">{IMAGE}</tt>, so you need to edit <pre class="cpg_code"> <tr> <td align="center" class="display_media" nowrap="nowrap"> <table cellspacing="2" cellpadding="0" > <tr> <td align="center" style="{SLIDESHOW_STYLE}"> {IMAGE} </td> </tr> </table> </td> </tr></pre> Just modify the inner table as you see fit. To add some content at the bottom, you would have to change those lines to <pre class="cpg_code"> <tr> <td align="center" class="display_media" nowrap="nowrap"> <table cellspacing="2" cellpadding="0" > <tr> <td align="center" style="{SLIDESHOW_STYLE}"> {IMAGE} </td> <td align="center" style="{SLIDESHOW_STYLE}"> Your custom content </td> </tr> </table> </td> </tr></pre> <hr /> <a name="theme_examples_content_displayimage_filmstrip"></a><h4>Directly next to the film strip<a href="#theme_examples_content_displayimage_filmstrip" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h4> <p>The instructions apply for all extra content that should be applied <em>above</em> or <em>below</em> of your film strip that is displayed on the page if the corresponding option "<a href="configuration.htm#admin_image_comment_filmstrip_toggle">Show film strip</a>" is enabled in Coppermine's config.</p> Edit <tt class="filename">themes/yourtheme/theme.php</tt>, find the function definition for <tt class="code">theme_display_film_strip</tt> and edit as suggested below. If that definition doesn't exist in your custom theme, copy it first from the sample theme, then edit accordingly.<br /> The section that needs changing is at the end where the template is finally evaluated. Find <pre class="cpg_code"> echo '<div id="filmstrip">'; starttable($CONFIG['picture_table_width']); echo template_eval($template, $params); endtable(); echo '</div>';</pre> To output extra content right above the film strip, you would need to change that code snippet to <pre class="cpg_code"> echo '<div id="filmstrip">'; echo <<< EOT Your custom content EOT; starttable($CONFIG['picture_table_width']); echo template_eval($template, $params); endtable(); echo '</div>';</pre> </div> <hr /> <a name="theme_examples_content_fullsize"></a><h3>Additional content on the full-size pop-up<a href="#theme_examples_content_fullsize" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <p>The pop-up that shows up if you click on the intermediate image can contain additional content (e.g. adverts) as well. However, you need to make up your mind if there will be enough space on the screen of your site visitors to ad even more content. In other words: only display additional content on the full-size pop-up if your full-size images have a resolution that is smaller than your visitor's minimum monitor resolution. Since you can't tell for sure what size they will have, you can still consider 800 x 600 pixels to be the minimum. Remember as well that with smartphones and other mobile devices that have internet acccess recently you can't even be sure that there will be resolutions that are even smaller.</p> <p>If you must have an advert on the fullsize pop-up, make sure to use a text advert only and not a banner. This being said as a warning, here's how to add custom content to the full-size pop-up:</p> Edit <tt class="filename">themes/yourtheme/theme.php</tt>, find <pre class="cpg_code">// Display the full size image function theme_display_fullsize_pic()</pre> and edit that function definition as suggested below. If this piece of code doesn't exist in your custom theme, copy the function definition from the sample theme, starting at <pre class="cpg_code">/****************************************************************************** ** Section <<<theme_display_fullsize_pic>>> - START ******************************************************************************/</pre>and ending with <pre class="cpg_code">/****************************************************************************** ** Section <<<theme_display_fullsize_pic>>> - END ******************************************************************************/</pre> To add the Adsense code or any other custom content, add it as you see fit in the HTML section of above mentioned code, e.g. right after the closing tag of the div container.<br /> In this particular case, you'll have to circumvent another issue: the window size of the full-size pic is being calculated based on the dimensions of the pic. Therefore, if you add content to the window, you'll have to make sure that the dimensions of the window increase by the space the advert "eats up". The dimensions of the window are being calculated in the function <tt class="code">function theme_html_picture()</tt>. The same method used above applies: search your custom theme (<tt class="filename">themes/yourtheme/theme.php</tt>) for that function definition. If it exists there, edit it as suggested below. If it doesn't, copy the function defintion from themes/sample/theme.php into a new line before <tt class="code">?></tt> of <tt class="filename">themes/yourtheme/theme.php</tt>.<br /> The piece of code that actually needs editing is <pre class="cpg_code"> $winsizeX = $CURRENT_PIC_DATA['pwidth'] + $CONFIG['fullsize_padding_x']; //the +'s are the mysterious FF and IE paddings $winsizeY = $CURRENT_PIC_DATA['pheight'] + $CONFIG['fullsize_padding_y']; //the +'s are the mysterious FF and IE paddings</pre> Edit it as you see fit - you will have to increase the variable's value by the amount of space (in pixels) that your ads need. As an example: if you decide to add your adsense code at the top of the full-size pop-up and it eats up 200 pixels, change <pre class="cpg_code"> $winsizeX = $CURRENT_PIC_DATA['pwidth'] + $CONFIG['fullsize_padding_x']; //the +'s are the mysterious FF and IE paddings $winsizeY = $CURRENT_PIC_DATA['pheight'] + $CONFIG['fullsize_padding_y']; //the +'s are the mysterious FF and IE paddings</pre> to <pre class="cpg_code"> $winsizeX = $CURRENT_PIC_DATA['pwidth'] + $CONFIG['fullsize_padding_x']; //the +'s are the mysterious FF and IE paddings $winsizeY = $CURRENT_PIC_DATA['pheight'] + $CONFIG['fullsize_padding_y'] + 200; //the +'s are the mysterious FF and IE paddings</pre> <a name="theme_examples_content_menu"></a><h3>Additional menu items<a href="#theme_examples_content_menu" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> This section explains how to add more menu items to your custom menu. If you only need one extra menu item (not two or three of them), your best option is to use the config options "<a href="configuration.htm#admin_theme_custom_lnk_name">Custom menu link name</a>"/"<a href="configuration.htm#admin_language_custom_lnk_url">Custom menu link URL</a>", as that method doesn't require you to edit files and is therefore less complicated. If you're happy to have just <em>one</em> extra menu item, there's no need to read on on this page - instead, follow the links above that explain the config options. If you're <a href="dev_plugins.htm">writing a plugin</a> of your own and not a custom theme, you should read up "<a href="dev_plugin_api.htm#plugin_api_tutorial_button">Adding a Button to Coppermine</a>", as the method to add a menu item using a plugin differs from the method to add a menu items when designing a theme of your own.<br /> You're still reading on, so this means you need more custom menu items or you need more granular control over your menu items.<br /> The way Coppermine creates menu items in cpg1.5.x is in a sort-of in-between-state: both the classic way that Coppermine menu items were created in previous versions before cpg1.5.x is supported as well as more advanced methods that allow dynamic, expanding menus. That's why the method to add new menu items differs depending on what type of menu creation technique your custom theme is using, i.e. on what core theme it is based upon. There are plans to change this again in future versions, but for now, we'll have to live with what is there.<br /> The sections underneath seem to be very long, but don't be afraid: you don't have to read and understand all of it, but only the stuff that applies for your theme, as this section actually is separated into different sub-sections that explain how menus work for different types of themes.<br /> To be enable you to understand what we'll be talking about below, you need to understand that there are the following menus types in Coppermine: <ul> <li><strong>Classic structure</strong>:<br /> Separate <a href="admin_menu.htm#admin_menu">admin menu</a> (with links that point to <a href="configuration.htm">config panel</a>, <a href="categories.htm#cat_cp">categories control panel</a>, <a href="users.htm#user_cp">user management</a>, <a href="groups.htm#group_cp">groups control panel</a> etc.), sys-menu (containing links to the home, contact form, sidebar, file upload, login/logout etc.) and sub-menu (containing links to the album list, last uploads, last comments, most viewed, top rated favorites, search etc.)<br /> Typically, all themes that come with the Coppermine package except the new curve theme are designed that way</li> <li><strong>Nested structure</strong>:<br /> Expanding, nested menu structure that rolls all of the possible menu items into one single menu and re-organizing the position of menu items. Currently, only the curve theme and some user contributed themes that are based on curve are designed that way.</li> </ul> <div class="indent"> <a name="theme_examples_content_menu"></a><h4>Entire menu structure defined in one block<a href="#theme_examples_content_menu" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h4> A typical example for the entire menu structure defined in one variable block is the theme "<a href="theme.htm#theme_builtin_hardwired">Hardwired</a>". To figure out wether your custom theme is using the same technique, open <tt class="filename">themes/yourtheme/theme.php</tt> with a <a href="dev_tools.htm#dev_tools_editor">plain-text editor</a> and find the line that starts with <tt class="code">$template_sys_menu =</tt> for the sys menu and/or <tt class="code">$template_sub_menu =</tt> for the sub menu. Determine what menu you want to edit - in this example, we'll be talking about the sys menu, but everything that will be said here will apply for the sub menu as well.<br /> Inside the sys menu, take a look at the content of the definition: if your custom theme falls into the category "Entire menu structure defined in one block", then you should find one or more lines of code inside the sys menu that corresponds to each menu item that currently exists in your custom menu when looking at your gallery's output. For the hardwired theme, the code looks like this: <textarea class="samplecode" style="width:100%" rows="10">// 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="buttonlefthome" src="themes/hardwired/images/buttonlefthome.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 contact --> <td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td> <td><img name="buttonleftcontact" src="themes/hardwired/images/buttonleftcontact.gif" width="17" height="25" border="0" alt="" /></td> <td style="background: url(themes/hardwired/images/buttoncenter.gif);"> <a href="{CONTACT_TGT}" title="{CONTACT_TITLE}">{CONTACT_LNK}</a> </td> <td><img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0" alt="" /></td> <!-- END contact --> <!-- 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 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 sidebar --> <td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" alt="" /></td> <td><img name="buttonleftad" 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="{SIDEBAR_TGT}" title="{SIDEBAR_TITLE}">{SIDEBAR_LNK}</a> </td> <td><img name="buttonright" src="themes/hardwired/images/buttonright.gif" width="7" height="25" border="0" alt="" /></td> <!-- END sidebar --> <!-- 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;</textarea> , but it could just as well look like this for another theme: <textarea class="samplecode" style="width:100%" rows="10">// HTML template for sys menu $template_sys_menu = <<< EOT <ul> <!-- BEGIN home --> <li> <a href="{HOME_TGT}" title="{HOME_TITLE}">{HOME_LNK}</a> </li> <!-- END home --> <!-- BEGIN contact --> <li> <a href="{CONTACT_TGT}" title="{CONTACT_TITLE}">{CONTACT_LNK}</a> </li> <!-- END contact --> <!-- BEGIN my_gallery --> <li> <a href="{MY_GAL_TGT}" title="{MY_GAL_TITLE}">{MY_GAL_LNK}</a> </li> <!-- END my_gallery --> <!-- BEGIN allow_memberlist --> <li> <a href="{MEMBERLIST_TGT}" title="{MEMBERLIST_TITLE}">{MEMBERLIST_LNK}</a> </li> <!-- END allow_memberlist --> <!-- BEGIN my_profile --> <li> <a href="{MY_PROF_TGT}" title="{MY_PROF_LNK}">{MY_PROF_LNK}</a> </li> <!-- END my_profile --> <!-- BEGIN enter_admin_mode --> <li> <a href="{ADM_MODE_TGT}" title="{ADM_MODE_TITLE}">{ADM_MODE_LNK}</a> </li> <!-- END enter_admin_mode --> <!-- BEGIN leave_admin_mode --> <li> <a href="{USR_MODE_TGT}" title="{USR_MODE_TITLE}">{USR_MODE_LNK}</a> </li> <!-- END leave_admin_mode --> <!-- BEGIN sidebar --> <li> <a href="{SIDEBAR_TGT}" title="{SIDEBAR_TITLE}">{SIDEBAR_LNK}</a> </li> <!-- END sidebar --> <!-- BEGIN upload_pic --> <li> <a href="{UPL_PIC_TGT}" title="{UPL_PIC_TITLE}">{UPL_PIC_LNK}</a> </li> <!-- END upload_pic --> <!-- BEGIN register --> <li> <a href="{REGISTER_TGT}" title="{REGISTER_TITLE}">{REGISTER_LNK}</a> </li> <!-- END register --> <!-- BEGIN login --> <li> <a href="{LOGIN_TGT}" title="{LOGIN_LNK}">{LOGIN_LNK}</a> </li> <!-- END login --> <!-- BEGIN logout --> <li> <a href="{LOGOUT_TGT}" title="{LOGOUT_LNK}">{LOGOUT_LNK}</a> </li> <!-- END logout --> </ul> EOT;</textarea> (which is what we'll use in this example for brevity).<br /> As you can see, each menu item is wrapped into a comment construct like <pre class="cpg_code code"><!-- BEGIN menu_item_name --></pre>and <pre class="cpg_code code"><!-- END menu_item_name --></pre> Although this looks like straightforward HTML comments that won't display in the browser, they are there for a reason: with them, Coppermine determines if a particular menu item should be processed. The Coppermine script itself (which is written in PHP and therefore isn't "blind" as far as HTML comments are concerned) is searching for those comment blocks (with the keywords being <tt class="code">BEGIN</tt> and <tt class="code">END</tt> followed by the menu item name, which is a keyword as well in this process). Inside each code block that corresponds to a menu item you can see placeholder tokens as well in curly braces that will be replaced with actual content when the menu is actually processed - more on that later.<br /> With this being said: if you plan to remove a particular menu item, only remove the the HTML markup between the comments, but leave the comments around them intact; if you plan to remove the home button for example (which is something you wouldn't want to do in "real life"), find <pre class="cpg_code code"><!-- BEGIN home --> <li> <a href="{HOME_TGT}" title="{HOME_TITLE}">{HOME_LNK}</a> </li> <!-- END home --></pre> and replace with <pre class="cpg_code code"><!-- BEGIN home --> <!-- END home --></pre> To actually add a menu item of your own, you will have to add a custom block of code into the right spot, i.e. you have to place it correctly as far as nesting is concerned: it needs to reside between two existing menu item and not inside them. In other words, the code for your custom menu item needs to reside <em>after</em> a comment line that <em>ends</em> a menu item record (e.g. <tt class="code"><!-- END contact --></tt>) and <em>before</em> another code line that starts the next menu item record (e.g. <tt class="code"><!-- BEGIN my_gallery --></tt>). In our example, we want to add a link to the menu that points to our forum. The menu item is meant to show up between the <a href="configuration.htm#admin_contact_start">contact form</a> link and the next menu item. To accomplish this, find <pre class="cpg_code code"> <!-- END contact --></pre> and add after it (into a line of it's own) <pre class="cpg_code code"> <!-- BEGIN custom_forum_link --> <li> <a href="../forum/" title="go to the forum">Forum</a> </li> <!-- END custom_forum_link --></pre> Save your changes and upload them from your local copy to your webserver if applicable - you should see the changes immediately. If you're happy with what you got, you can stop reading on - you just figured out how to add a custom menu item to your theme.<br /> If you want more features (i.e. if the link is not meant to show up no matter what, but only if a certain condition applies, e.g. if the visitor is logged in) or if you want to fully internationalize the link to catter for visitors from different countried with different languages, read on - we'll try to explain how to accomplish all that.<br /> In order to understand what is going on, we'll have to take another look "under the hood" of Coppermine to see how it works: the "regular" menu items contain (as suggested above) placeholder tokens that get populated somewhere else. <br /><abbr title="to be continued">tbc</abbr>... </div> </div> <div id="doc_footer"> <div class="doc_info_wrapper"> <span id="doc_last_changed">$LastChangedDate: 2011-01-02 20:44:22 +0100 (So, 02 Jan 2011) $</span> <span id="doc_revision">$Revision: 8154 $</span> </div> </div> </body> </html>