Menu Links Solid Images, No Text at All Menu Links Solid Images, No Text at All
 

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Main Menu

Menu Links Solid Images, No Text at All

Started by AXP_Hicks, November 21, 2007, 09:11:19 AM

Previous topic - Next topic

0 Members and 2 Guests are viewing this topic.

Print
Go Down Pages1
User actions

AXP_Hicks

November 21, 2007, 09:11:19 AM Last Edit: November 22, 2007, 08:05:16 AM by GauGau
Hi there,

I've been scouring the forums here, and playing with each of the default themes theme.php files, and I think I've finally discovered that you can not replace the text links of sys_menu and sub_menu with solid images...correct?

The best you can get is an image in the background with the text link 'floating' over it?

This is my SMF forum, note the solid images used as links...this is what I'd like to do for my Coppermine installation.

If it is possible to do this with the navigation menus, please point me in the right direction!

Thanks!

Joachim Müller

#1
November 21, 2007, 09:31:06 AM
Review the hardwired theme - it contains a good example how to fully customize the menu, overriding the default textual menus. Here's the relevant part of themes/hardwired/theme.php:
Code Select
define('THEME_HAS_NO_SYS_MENU_BUTTONS', 1);
define('THEME_HAS_NO_SUB_MENU_BUTTONS', 1);
// 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;

// 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;
Instead of the table-driven menu structure from hardwired with the image showing up as a background image you can easily change this to something like this:
Code Select
// HTML template for sys menu
$template_sys_menu = <<<EOT

<!-- BEGIN home -->
  <a href="{HOME_TGT}" title="{HOME_TITLE}">{HOME_LNK}</a>
<!-- END home -->
<!-- BEGIN my_gallery -->
  <a href="{MY_GAL_TGT}" title="{MY_GAL_TITLE}">{MY_GAL_LNK}</a>
<!-- END my_gallery -->
<!-- BEGIN allow_memberlist -->
  <a href="{MEMBERLIST_TGT}" title="{MEMBERLIST_TITLE}">{MEMBERLIST_LNK}</a>
<!-- END allow_memberlist -->
<!-- BEGIN my_profile -->
  <a href="{MY_PROF_TGT}" title="{MY_PROF_LNK}">{MY_PROF_LNK}</a>
<!-- END my_profile -->
<!-- BEGIN faq -->
  <a href="{FAQ_TGT}" title="{FAQ_TITLE}">{FAQ_LNK}</a>
<!-- END faq -->
<!-- BEGIN enter_admin_mode -->
  <a href="{ADM_MODE_TGT}" title="{ADM_MODE_TITLE}">{ADM_MODE_LNK}</a>
<!-- END enter_admin_mode -->
<!-- BEGIN leave_admin_mode -->
  <a href="{USR_MODE_TGT}" title="{USR_MODE_TITLE}">{USR_MODE_LNK}</a>
<!-- END leave_admin_mode -->
<!-- BEGIN upload_pic -->
  <a href="{UPL_PIC_TGT}" title="{UPL_PIC_TITLE}">{UPL_PIC_LNK}</a>
<!-- END upload_pic -->
<!-- BEGIN register -->
  <a href="{REGISTER_TGT}" title="{REGISTER_TITLE}">{REGISTER_LNK}</a>
<!-- END register -->
<!-- BEGIN login -->
  <a href="{LOGIN_TGT}" title="{LOGIN_LNK}">{LOGIN_LNK}</a>
<!-- END login -->
<!-- BEGIN logout -->
  <a href="{LOGOUT_TGT}" title="{LOGOUT_LNK}">{LOGOUT_LNK}</a>
<!-- END logout -->

EOT;

// HTML template for sub menu
$template_sub_menu = <<<EOT

<!-- BEGIN custom_link -->
  <a href="{CUSTOM_LNK_TGT}" title="{CUSTOM_LNK_TITLE}">{CUSTOM_LNK_LNK}</a>
<!-- END custom_link -->
<!-- BEGIN album_list -->
  <a href="{ALB_LIST_TGT}" title="{ALB_LIST_TITLE}">{ALB_LIST_LNK}</a>
<!-- END album_list -->
  <a href="{LASTUP_TGT}" title="{LASTUP_LNK}">{LASTUP_LNK}</a>
  <a href="{LASTCOM_TGT}" title="{LASTCOM_LNK}">{LASTCOM_LNK}</a>
  <a href="{TOPN_TGT}" title="{TOPN_LNK}">{TOPN_LNK}</a>
  <a href="{TOPRATED_TGT}" title="{TOPRATED_LNK}">{TOPRATED_LNK}</a>
  <a href="{FAV_TGT}" title="{FAV_LNK}">{FAV_LNK}</a>
  <a href="{SEARCH_TGT}" title="{SEARCH_LNK}">{SEARCH_LNK}</a>

EOT;

Joachim Müller

#2
November 21, 2007, 09:32:10 AM
[posting continued because of the max chars per posting limitation]

Now finally add your images like this
Code Select
// HTML template for sys menu
$template_sys_menu = <<<EOT

<!-- BEGIN home -->
  <a href="{HOME_TGT}" title="{HOME_TITLE}"><img src="path/to/your/image/seen/from/the/gallery-root/image.jpg" border="0" width="40" height="20" alt="" title="{HOME_LNK}" /></a>
<!-- END home -->
<!-- BEGIN my_gallery -->
  <a href="{MY_GAL_TGT}" title="{MY_GAL_TITLE}"><img src="path/to/your/image/seen/from/the/gallery-root/image.jpg" border="0" width="40" height="20" alt="" title="{MY_GAL_LNK}" /></a>
<!-- END my_gallery -->
<!-- BEGIN allow_memberlist -->
  <a href="{MEMBERLIST_TGT}" title="{MEMBERLIST_TITLE}"><img src="path/to/your/image/seen/from/the/gallery-root/image.jpg" border="0" width="40" height="20" alt="" title="{MEMBERLIST_LNK}" /></a>
<!-- END allow_memberlist -->
<!-- BEGIN my_profile -->
  <a href="{MY_PROF_TGT}" title="{MY_PROF_LNK}"><img src="path/to/your/image/seen/from/the/gallery-root/image.jpg" border="0" width="40" height="20" alt="" title="{MY_PROF_LNK}" /></a>
<!-- END my_profile -->
<!-- BEGIN faq -->
  <a href="{FAQ_TGT}" title="{FAQ_TITLE}"><img src="path/to/your/image/seen/from/the/gallery-root/image.jpg" border="0" width="40" height="20" alt="" title="{FAQ_LNK}" /></a>
<!-- END faq -->
<!-- BEGIN enter_admin_mode -->
  <a href="{ADM_MODE_TGT}" title="{ADM_MODE_TITLE}"><img src="path/to/your/image/seen/from/the/gallery-root/image.jpg" border="0" width="40" height="20" alt="" title="{ADM_MODE_LNK}" /></a>
<!-- END enter_admin_mode -->
<!-- BEGIN leave_admin_mode -->
  <a href="{USR_MODE_TGT}" title="{USR_MODE_TITLE}"><img src="path/to/your/image/seen/from/the/gallery-root/image.jpg" border="0" width="40" height="20" alt="" title="{USR_MODE_LNK}" /></a>
<!-- END leave_admin_mode -->
<!-- BEGIN upload_pic -->
  <a href="{UPL_PIC_TGT}" title="{UPL_PIC_TITLE}"><img src="path/to/your/image/seen/from/the/gallery-root/image.jpg" border="0" width="40" height="20" alt="" title="{UPL_PIC_LNK}" /></a>
<!-- END upload_pic -->
<!-- BEGIN register -->
  <a href="{REGISTER_TGT}" title="{REGISTER_TITLE}"><img src="path/to/your/image/seen/from/the/gallery-root/image.jpg" border="0" width="40" height="20" alt="" title="{REGISTER_LNK}" /></a>
<!-- END register -->
<!-- BEGIN login -->
  <a href="{LOGIN_TGT}" title="{LOGIN_LNK}"><img src="path/to/your/image/seen/from/the/gallery-root/image.jpg" border="0" width="40" height="20" alt="" title="{LOGIN_LNK}" /></a>
<!-- END login -->
<!-- BEGIN logout -->
  <a href="{LOGOUT_TGT}" title="{LOGOUT_LNK}"><img src="path/to/your/image/seen/from/the/gallery-root/image.jpg" border="0" width="40" height="20" alt="" title="{LOGOUT_LNK}" /></a>
<!-- END logout -->

EOT;

// HTML template for sub menu
$template_sub_menu = <<<EOT

<!-- BEGIN custom_link -->
  <a href="{CUSTOM_LNK_TGT}" title="{CUSTOM_LNK_TITLE}"><img src="path/to/your/image/seen/from/the/gallery-root/image.jpg" border="0" width="40" height="20" alt="" title="{CUSTOM_LNK_LNK}" /></a>
<!-- END custom_link -->
<!-- BEGIN album_list -->
  <a href="{ALB_LIST_TGT}" title="{ALB_LIST_TITLE}"><img src="path/to/your/image/seen/from/the/gallery-root/image.jpg" border="0" width="40" height="20" alt="" title="{ALB_LIST_LNK}" /></a>
<!-- END album_list -->
  <a href="{LASTUP_TGT}" title="{LASTUP_LNK}"><img src="path/to/your/image/seen/from/the/gallery-root/image.jpg" border="0" width="40" height="20" alt="" title="{LASTUP_LNK}" /></a>
  <a href="{LASTCOM_TGT}" title="{LASTCOM_LNK}"><img src="path/to/your/image/seen/from/the/gallery-root/image.jpg" border="0" width="40" height="20" alt="" title="{LASTCOM_LNK}" /></a>
  <a href="{TOPN_TGT}" title="{TOPN_LNK}"><img src="path/to/your/image/seen/from/the/gallery-root/image.jpg" border="0" width="40" height="20" alt="" title="{TOPN_LNK}" /></a>
  <a href="{TOPRATED_TGT}" title="{TOPRATED_LNK}"><img src="path/to/your/image/seen/from/the/gallery-root/image.jpg" border="0" width="40" height="20" alt="" title="{TOPRATED_LNK}" /></a>
  <a href="{FAV_TGT}" title="{FAV_LNK}"><img src="path/to/your/image/seen/from/the/gallery-root/image.jpg" border="0" width="40" height="20" alt="" title="{FAV_LNK}" /></a>
  <a href="{SEARCH_TGT}" title="{SEARCH_LNK}"><img src="path/to/your/image/seen/from/the/gallery-root/image.jpg" border="0" width="40" height="20" alt="" title="{SEARCH_LNK}" /></a>

EOT;
You may want to wrap the whole enchilada into a div container that makes sure that your navigation buttons align correctly, and of course you will have to adjust the paths to your images and the width and height attributes, but the above mentioned modifications should give you an idea.

AXP_Hicks

#3
November 21, 2007, 04:17:43 PM
Fantastic GauGau!! I'll be trying this as soon as possible and I'll let you know the results.

Thanks for the advice.

AXP_Hicks

#4
November 21, 2007, 08:52:42 PM
Sweeeeeeettttt! It worked! Here is final code, I went a step further and added graphic buttons for the sub_menu as well:

Code Select
<?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 version 3
  as published by the Free Software Foundation.
  
  ********************************************
  Coppermine version: 1.4.14
  $Source$
  $Revision: 3966 $
  $Author: gaugau $
  $Date: 2007-09-17 08:53:13 +0200 (Mo, 17 Sep 2007) $
**********************************************/

// ------------------------------------------------------------------------- //
// This theme has all CORE items removed                                     //
// ------------------------------------------------------------------------- //
define('THEME_HAS_NO_SYS_MENU_BUTTONS', 1);
define('THEME_HAS_NO_SUB_MENU_BUTTONS', 1);
define('THEME_IS_XHTML10_TRANSITIONAL',1);

// HTML template for sys menu
$template_sys_menu = <<<EOT

<!-- BEGIN home -->
  <a href="{HOME_TGT}" title="{HOME_TITLE}">{HOME_LNK}</a>
<!-- END home -->
<!-- BEGIN my_gallery -->
  <a href="{MY_GAL_TGT}" title="{MY_GAL_TITLE}">{MY_GAL_LNK}</a>
<!-- END my_gallery -->
<!-- BEGIN allow_memberlist -->
  <a href="{MEMBERLIST_TGT}" title="{MEMBERLIST_TITLE}">{MEMBERLIST_LNK}</a>
<!-- END allow_memberlist -->
<!-- BEGIN my_profile -->
  <a href="{MY_PROF_TGT}" title="{MY_PROF_LNK}">{MY_PROF_LNK}</a>
<!-- END my_profile -->
<!-- BEGIN faq -->
  <a href="{FAQ_TGT}" title="{FAQ_TITLE}">{FAQ_LNK}</a>
<!-- END faq -->
<!-- BEGIN enter_admin_mode -->
  <a href="{ADM_MODE_TGT}" title="{ADM_MODE_TITLE}">{ADM_MODE_LNK}</a>
<!-- END enter_admin_mode -->
<!-- BEGIN leave_admin_mode -->
  <a href="{USR_MODE_TGT}" title="{USR_MODE_TITLE}">{USR_MODE_LNK}</a>
<!-- END leave_admin_mode -->
<!-- BEGIN upload_pic -->
  <a href="{UPL_PIC_TGT}" title="{UPL_PIC_TITLE}">{UPL_PIC_LNK}</a>
<!-- END upload_pic -->
<!-- BEGIN register -->
  <a href="{REGISTER_TGT}" title="{REGISTER_TITLE}">{REGISTER_LNK}</a>
<!-- END register -->
<!-- BEGIN login -->
  <a href="{LOGIN_TGT}" title="{LOGIN_LNK}">{LOGIN_LNK}</a>
<!-- END login -->
<!-- BEGIN logout -->
  <a href="{LOGOUT_TGT}" title="{LOGOUT_LNK}">{LOGOUT_LNK}</a>
<!-- END logout -->

EOT;

// HTML template for sub menu
$template_sub_menu = <<<EOT

<!-- BEGIN custom_link -->
  <a href="{CUSTOM_LNK_TGT}" title="{CUSTOM_LNK_TITLE}">{CUSTOM_LNK_LNK}</a>
<!-- END custom_link -->
<!-- BEGIN album_list -->
  <a href="{ALB_LIST_TGT}" title="{ALB_LIST_LNK}">{ALB_LIST_LNK}</a>
<!-- END album_list -->
  <a href="{LASTUP_TGT}" title="{LASTUP_LNK}">{LASTUP_LNK}</a>
  <a href="{LASTCOM_TGT}" title="{LASTCOM_LNK}">{LASTCOM_LNK}</a>
  <a href="{TOPN_TGT}" title="{TOPN_LNK}">{TOPN_LNK}</a>
  <a href="{TOPRATED_TGT}" title="{TOPRATED_LNK}">{TOPRATED_LNK}</a>
  <a href="{FAV_TGT}" title="{FAV_LNK}">{FAV_LNK}</a>
  <a href="{SEARCH_TGT}" title="{SEARCH_LNK}">{SEARCH_LNK}</a>

EOT;

// HTML template for sys menu
$template_sys_menu = <<<EOT

<!-- BEGIN home -->
  <a href="{HOME_TGT}" title="{HOME_TITLE}"><img src="http://www.alienexperience.com/gallery/themes/axp01/images/home.gif" border="0" alt="" title="{HOME_LNK}" /></a>&nbsp;&nbsp;
<!-- END home -->
<!-- BEGIN my_gallery -->
  <a href="{MY_GAL_TGT}" title="{MY_GAL_TITLE}"><img src="http://www.alienexperience.com/gallery/themes/axp01/images/my_gal.gif" border="0" alt="" title="{MY_GAL_LNK}" /></a>&nbsp;&nbsp;
<!-- END my_gallery -->
<!-- BEGIN allow_memberlist -->
  <a href="{MEMBERLIST_TGT}" title="{MEMBERLIST_TITLE}"><img src="http://www.alienexperience.com/gallery/themes/axp01/images/memberlist.gif" border="0" alt="" title="{MEMBERLIST_LNK}" /></a>&nbsp;&nbsp;
<!-- END allow_memberlist -->
<!-- BEGIN my_profile -->
  <a href="{MY_PROF_TGT}" title="{MY_PROF_LNK}"><img src="http://www.alienexperience.com/gallery/themes/axp01/images/my_prof.gif" border="0" alt="" title="{MY_PROF_LNK}" /></a>&nbsp;&nbsp;
<!-- END my_profile -->
<!-- BEGIN faq -->
  <a href="{FAQ_TGT}" title="{FAQ_TITLE}"><img src="http://www.alienexperience.com/gallery/themes/axp01/images/faq.gif" border="0" alt="" title="{FAQ_LNK}" /></a>&nbsp;&nbsp;
<!-- END faq -->
<!-- BEGIN enter_admin_mode -->
  <a href="{ADM_MODE_TGT}" title="{ADM_MODE_TITLE}"><img src="http://www.alienexperience.com/gallery/themes/axp01/images/adm_mode.gif" border="0" alt="" title="{ADM_MODE_LNK}" /></a>&nbsp;&nbsp;
<!-- END enter_admin_mode -->
<!-- BEGIN leave_admin_mode -->
  <a href="{USR_MODE_TGT}" title="{USR_MODE_TITLE}"><img src="http://www.alienexperience.com/gallery/themes/axp01/images/usr_mode.gif" border="0" alt="" title="{USR_MODE_LNK}" /></a>&nbsp;&nbsp;
<!-- END leave_admin_mode -->
<!-- BEGIN upload_pic -->
  <a href="{UPL_PIC_TGT}" title="{UPL_PIC_TITLE}"><img src="http://www.alienexperience.com/gallery/themes/axp01/images/upl_pic.gif" border="0" alt="" title="{UPL_PIC_LNK}" /></a>&nbsp;&nbsp;
<!-- END upload_pic -->
<!-- BEGIN register -->
  <a href="{REGISTER_TGT}" title="{REGISTER_TITLE}"><img src="http://www.alienexperience.com/gallery/themes/axp01/images/register.gif" border="0" alt="" title="{REGISTER_LNK}" /></a>&nbsp;&nbsp;
<!-- END register -->
<!-- BEGIN login -->
  <a href="{LOGIN_TGT}" title="{LOGIN_LNK}"><img src="http://www.alienexperience.com/gallery/themes/axp01/images/login.gif" border="0" alt="" title="{LOGIN_LNK}" /></a>
<!-- END login -->
<!-- BEGIN logout -->
  <a href="{LOGOUT_TGT}" title="{LOGOUT_LNK}"><img src="http://www.alienexperience.com/gallery/themes/axp01/images/logout.gif" border="0" alt="" title="{LOGOUT_LNK}" /></a>
<!-- END logout -->

EOT;

// HTML template for sub menu
$template_sub_menu = <<<EOT

<!-- BEGIN custom_link -->
  <a href="{CUSTOM_LNK_TGT}" title="{CUSTOM_LNK_TITLE}"><img src="http://www.alienexperience.com/gallery/themes/axp01/images/custom_lnk.gif" border="0" alt="" title="{CUSTOM_LNK_LNK}" /></a>
<!-- END custom_link -->
<!-- BEGIN alb_list -->
  <a href="{ALB_LIST_TGT}" title="{ALB_LIST_TITLE}"><img src="http://www.alienexperience.com/gallery/themes/axp01/images/.gif" border="0" alt="" title="{ALB_LIST_LNK}" /></a>&nbsp;&nbsp;
<!-- END alb_list -->
<!-- BEGIN lastup -->
  <a href="{LASTUP_TGT}" title="{LASTUP_TITLE}"><img src="http://www.alienexperience.com/gallery/themes/axp01/images/lastup.gif" border="0" alt="" title="{LASTUP_LNK}" /></a>&nbsp;&nbsp;
<!-- END lastup -->
<!-- BEGIN lastcom -->
  <a href="{LASTCOM_TGT}" title="{LASTCOM_LNK}"><img src="http://www.alienexperience.com/gallery/themes/axp01/images/lastcom.gif" border="0" alt="" title="{LASTCOM_LNK}" /></a>&nbsp;&nbsp;
<!-- END lastcom -->
<!-- BEGIN topn -->
  <a href="{TOPN_TGT}" title="{TOPN_TITLE}"><img src="http://www.alienexperience.com/gallery/themes/axp01/images/topn.gif" border="0" alt="" title="{TOPN_LNK}" /></a>&nbsp;&nbsp;
<!-- END topn -->
<!-- BEGIN toprated -->
  <a href="{TOPRATED_TGT}" title="{TOPRATED_TITLE}"><img src="http://www.alienexperience.com/gallery/themes/axp01/images/toprated.gif" border="0" alt="" title="{TOPRATED_LNK}" /></a>&nbsp;&nbsp;
<!-- END toprated -->
<!-- BEGIN fav -->
  <a href="{FAV_TGT}" title="{FAV_TITLE}"><img src="http://www.alienexperience.com/gallery/themes/axp01/images/fav.gif" border="0" alt="" title="{FAV_LNK}" /></a>&nbsp;&nbsp;
<!-- END fav -->
<!-- BEGIN search -->
  <a href="{SEARCH_TGT}" title="{SEARCH_TITLE}"><img src="http://www.alienexperience.com/gallery/themes/axp01/images/search.gif" border="0" alt="" title="{SEARCH_LNK}" /></a>&nbsp;&nbsp;
<!-- END search -->

EOT;

?>

Link to gallery is here if you want to see the final product (don't mind the rest of the unfinished CSS and theming, the menu was a big step). Thanks again GauGau, if I knew how to give karma I'd merit you!

I think this is a good candidate for a sticky topic, I'm sure many people would find this useful.

Joachim Müller

#5
November 22, 2007, 08:04:44 AM
Your "final" code isn't really correct, as it doesn't make sense to define a var and then re-define it. Leaving the width and height attributes out will render your theme invalid, so I removed the validity constant as well. Finally, it doesn't make sense to address your images using a full URL - a relative path will do.
I reviewed the code you posted - you should replace it with this:
Code Select
<?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 version 3
  as published by the Free Software Foundation.
**********************************************/

define('THEME_HAS_NO_SYS_MENU_BUTTONS', 1);
define('THEME_HAS_NO_SUB_MENU_BUTTONS', 1);

// HTML template for sys menu
$template_sys_menu = <<<EOT

<!-- BEGIN home -->
  <a href="{HOME_TGT}" title="{HOME_TITLE}"><img src="themes/axp01/images/home.gif" border="0" alt="" title="{HOME_LNK}" /></a>&nbsp;&nbsp;
<!-- END home -->
<!-- BEGIN my_gallery -->
  <a href="{MY_GAL_TGT}" title="{MY_GAL_TITLE}"><img src="themes/axp01/images/my_gal.gif" border="0" alt="" title="{MY_GAL_LNK}" /></a>&nbsp;&nbsp;
<!-- END my_gallery -->
<!-- BEGIN allow_memberlist -->
  <a href="{MEMBERLIST_TGT}" title="{MEMBERLIST_TITLE}"><img src="themes/axp01/images/memberlist.gif" border="0" alt="" title="{MEMBERLIST_LNK}" /></a>&nbsp;&nbsp;
<!-- END allow_memberlist -->
<!-- BEGIN my_profile -->
  <a href="{MY_PROF_TGT}" title="{MY_PROF_LNK}"><img src="themes/axp01/images/my_prof.gif" border="0" alt="" title="{MY_PROF_LNK}" /></a>&nbsp;&nbsp;
<!-- END my_profile -->
<!-- BEGIN faq -->
  <a href="{FAQ_TGT}" title="{FAQ_TITLE}"><img src="themes/axp01/images/faq.gif" border="0" alt="" title="{FAQ_LNK}" /></a>&nbsp;&nbsp;
<!-- END faq -->
<!-- BEGIN enter_admin_mode -->
  <a href="{ADM_MODE_TGT}" title="{ADM_MODE_TITLE}"><img src="themes/axp01/images/adm_mode.gif" border="0" alt="" title="{ADM_MODE_LNK}" /></a>&nbsp;&nbsp;
<!-- END enter_admin_mode -->
<!-- BEGIN leave_admin_mode -->
  <a href="{USR_MODE_TGT}" title="{USR_MODE_TITLE}"><img src="themes/axp01/images/usr_mode.gif" border="0" alt="" title="{USR_MODE_LNK}" /></a>&nbsp;&nbsp;
<!-- END leave_admin_mode -->
<!-- BEGIN upload_pic -->
  <a href="{UPL_PIC_TGT}" title="{UPL_PIC_TITLE}"><img src="themes/axp01/images/upl_pic.gif" border="0" alt="" title="{UPL_PIC_LNK}" /></a>&nbsp;&nbsp;
<!-- END upload_pic -->
<!-- BEGIN register -->
  <a href="{REGISTER_TGT}" title="{REGISTER_TITLE}"><img src="themes/axp01/images/register.gif" border="0" alt="" title="{REGISTER_LNK}" /></a>&nbsp;&nbsp;
<!-- END register -->
<!-- BEGIN login -->
  <a href="{LOGIN_TGT}" title="{LOGIN_LNK}"><img src="themes/axp01/images/login.gif" border="0" alt="" title="{LOGIN_LNK}" /></a>
<!-- END login -->
<!-- BEGIN logout -->
  <a href="{LOGOUT_TGT}" title="{LOGOUT_LNK}"><img src="themes/axp01/images/logout.gif" border="0" alt="" title="{LOGOUT_LNK}" /></a>
<!-- END logout -->

EOT;

// HTML template for sub menu
$template_sub_menu = <<<EOT

<!-- BEGIN custom_link -->
  <a href="{CUSTOM_LNK_TGT}" title="{CUSTOM_LNK_TITLE}"><img src="themes/axp01/images/custom_lnk.gif" border="0" alt="" title="{CUSTOM_LNK_LNK}" /></a>
<!-- END custom_link -->
<!-- BEGIN alb_list -->
  <a href="{ALB_LIST_TGT}" title="{ALB_LIST_TITLE}"><img src="themes/axp01/images/.gif" border="0" alt="" title="{ALB_LIST_LNK}" /></a>&nbsp;&nbsp;
<!-- END alb_list -->
<!-- BEGIN lastup -->
  <a href="{LASTUP_TGT}" title="{LASTUP_TITLE}"><img src="themes/axp01/images/lastup.gif" border="0" alt="" title="{LASTUP_LNK}" /></a>&nbsp;&nbsp;
<!-- END lastup -->
<!-- BEGIN lastcom -->
  <a href="{LASTCOM_TGT}" title="{LASTCOM_LNK}"><img src="themes/axp01/images/lastcom.gif" border="0" alt="" title="{LASTCOM_LNK}" /></a>&nbsp;&nbsp;
<!-- END lastcom -->
<!-- BEGIN topn -->
  <a href="{TOPN_TGT}" title="{TOPN_TITLE}"><img src="themes/axp01/images/topn.gif" border="0" alt="" title="{TOPN_LNK}" /></a>&nbsp;&nbsp;
<!-- END topn -->
<!-- BEGIN toprated -->
  <a href="{TOPRATED_TGT}" title="{TOPRATED_TITLE}"><img src="themes/axp01/images/toprated.gif" border="0" alt="" title="{TOPRATED_LNK}" /></a>&nbsp;&nbsp;
<!-- END toprated -->
<!-- BEGIN fav -->
  <a href="{FAV_TGT}" title="{FAV_TITLE}"><img src="themes/axp01/images/fav.gif" border="0" alt="" title="{FAV_LNK}" /></a>&nbsp;&nbsp;
<!-- END fav -->
<!-- BEGIN search -->
  <a href="{SEARCH_TGT}" title="{SEARCH_TITLE}"><img src="themes/axp01/images/search.gif" border="0" alt="" title="{SEARCH_LNK}" /></a>&nbsp;&nbsp;
<!-- END search -->

EOT;

?>

AXP_Hicks

#6
November 23, 2007, 12:53:50 AM
Great, even better! I'm no expert at php so thanks for tidying up my code, it works like a charm. Kudos, my friend! ;D

Joachim Müller

#7
November 23, 2007, 08:11:24 AM
Quote from: AXP_Hicks on November 23, 2007, 12:53:50 AM
I'm no expert at php so thanks for tidying up my code
That's not PHP, but mostly plain HTML  ;)

Quote from: AXP_Hicks on November 23, 2007, 12:53:50 AM
Great, even better!
Good to hear that this works for you. Thanks for resolving your thread.
Print
Go Up Pages1
User actions