Text only | Text with Images

coppermine-gallery.com/forum

Support => cpg1.4.x Support => Older/other versions => cpg1.4 themes/skins/templates => Topic started by: Alcor on October 26, 2006, 10:20:25 AM

Title: Creating and placing a menu. Help!
Post by: Alcor on October 26, 2006, 10:20:25 AM
Hello.

I'm trying to do my template to integrate my Joomla website. By this moment almost works fine but I have a problem with the mainmenu  of Joomla, it isn't in the suitable position (actually it shows in the window's top-left corner). This is the code of template.html and the code added to theme.php

template.html:

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

<html dir="{LANG_DIR}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta http-equiv="Pragma" content="no-cache" />
<title>{TITLE}</title>
{META}
<link rel="stylesheet" href="themes/cda/style.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://localhost:85/Joomla/templates/cdayn/css/template_css.css" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
  {CUSTOM_HEADER}

<div id="pagewidth-800" >
<div id="top">
<!--header-->
<div id="pathway"><span class="pathway"><a href="http://localhost:85/Joomla/" class="pathway">Inicio</a> <img src="http://http://localhost:85/Joomla//images/M_images/arrow.png" alt="arrow" />   Galer&iacute;a de fotos </span></div>
<div id="logo"><a href="index.php"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="790" height="210" id="logocda" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://localhost:85/Joomla/templates/cdayn/images/cda8.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" /><embed src="http://localhost:85/Joomla/templates/cdayn/images/cda8.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="790" height="210" name="logocda" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></a></div>
<div id="topmenu">{JOOMLA_MENU}</div>
<div id="top-top"></div> //user menu will go here
<div class="clr"></div>
</div>
<!--fin header-->
<div id="outer">
<div id="adsense"><center> //script google adsense here
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></center></div>
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td align="center" valign="top"><div align="center">
              <p>&nbsp;</p>
              <p>{SYS_MENU} <br />
      {SUB_MENU}
              </p>
            </div></td>
          </tr>
          <tr>
            <td align="center" valign="top">
              <div align="center">{LANGUAGE_SELECT_FLAGS}{THEME_SELECT_LIST}
              {LANGUAGE_SELECT_LIST}
            </div></td>
          </tr>
        </table>
        <img src="images/spacer.gif" width="1" height="15" alt="" />
        <br />
        <table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td align="center" valign="top">
              <div align="left">{ADMIN_MENU}
              {GALLERY}
            </div></td>
          </tr>
        </table>{CUSTOM_FOOTER}<div id="vanity">{VANITY}</div>
<div class="clr"></div>
</div>
<div id="bottom">
<div id="footer-800"><div align="center">A footer</div></div>
</div>
</div>
</body>
</html>

Added to theme.php
In $template_vars array I added
Code Select
'{JOOMLA_MENU}' => theme_joomla_menu(),

after, I created the function theme_joomla_menu()

Code Select
function theme_joomla_menu(){
$mosConfig_live_site = $_SERVER['SERVER_NAME'];
echo
'<table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<td>

<!-- Initialize TransMenu \-->
<div id="transmenu45438" style="display:none"></div>
<link href="../modules/mod_d4j_transmenu.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
/* this DIV is the semi-transparent white background of each menu. the -moz-opacity is a proprietary way to get transparency in mozilla, the filter is for IE/windows 5.0+. */
/* we set the background color in script because ie mac does not use it; that browser only uses a semi-transparent white PNG that the spacer gif inside this DIV is replaced by */
.transMenu .background {
position:absolute;
left:0px; top:0px;
z-index:1;
-moz-opacity:0.5;
filter:alpha(opacity=50);
}
/* same concept as .background, but this is the sliver of shadow on the right of the menu. It\'s left, height, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowRight {
position:absolute;
z-index:3;
top:3px; width:2px;
-moz-opacity:0.4;
filter:alpha(opacity=40);
}
/* same concept as .background, but this is the sliver of shadow on the bottom of the menu. It\'s top, width, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowBottom {
position:absolute;
z-index:1;
left:3px; height:2px;
-moz-opacity:0.4;
filter:alpha(opacity=40);
}
</style>
<script language="javascript" type="text/javascript">
function getBgColor(root) {
var bgColor = \'\';
if (typeof root.style != \'\') {
if (typeof root.style.backgroundColor != \'undefined\' && root.style.backgroundColor != \'\') {
bgColor = root.style.backgroundColor;
}
} else if (typeof root.bgColor != \'undefined\' && root.bgColor != \'\') {
bgColor = root.bgColor;
} else {
bgColor = getBgColor(root.parentNode);
}
return bgColor;
}
</script>
<script language="javascript" type="text/javascript" src="../modules/mod_d4j_transmenu/transmenu.compact.js"></script>

<script language="javascript" type="text/javascript">
// Menu Class Suffix
var menu_class_suffix = "-menu";

// Placeholder CSS class
var sub_placeholder_style = "mainlevel";

// TransMenu settings
TransMenu.spacerGif = "../modules/mod_d4j_transmenu/img/x.gif";                     // path to a transparent spacer gif
TransMenu.dingbatOn = "../modules/mod_d4j_transmenu/img/submenu-on.gif";            // path to the active sub menu dingbat
TransMenu.dingbatOff = "../modules/mod_d4j_transmenu/img/submenu-off.gif";          // path to the inactive sub menu dingbat
TransMenu.shadowPng = "../modules/mod_d4j_transmenu/img/grey-40.png";               // a PNG graphic to serve as the shadow for mac IE5
TransMenu.backgroundPng = "../modules/mod_d4j_transmenu/img/white-90.png";          // a PNG graphic to server as the background for mac IE5
TransMenu.dingbatSize = 16;
TransMenu.menuPadding = 0;
TransMenu.itemPadding = 0;
TransMenu.shadowSize = 2;
TransMenu.shadowOffset = 3;
TransMenu.shadowColor = "#888";

TransMenu.backgroundColor = "#fff";

TransMenu.hideDelay = 1000;
TransMenu.slideTime = 400;

// if supported, initialize TransMenu
function initTransMenu() {
if (TransMenu.isSupported()) {
TransMenu.initialize();
}
}
</script>
<!-- Initialize TransMenu /-->

<!-- Load TransMenu`s top level \-->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" style="padding-left:5px "><a id="transmenu45438_menu1" class="mainlevel-menu" href="'.$mosConfig_live_site.'/index.php?option=com_frontpage&Itemid=1">Home</a></td>
<td valign="middle"><img border="0" src="../modules/mod_d4j_transmenu/img/x.gif" align="absmiddle" /></td>
<td valign="middle"><a id="transmenu45438_menu26" class="mainlevel-menu" href="'.$mosConfig_live_site.'/index.php?option=com_content&task=view&id=12&Itemid=26">MyJSAS</a></td>
<td valign="middle"><img border="0" src="../modules/mod_d4j_transmenu/img/x.gif" align="absmiddle" /></td>
<td valign="middle"><a id="transmenu45438_menu2" class="mainlevel-menu" href="'.$mosConfig_live_site.'/index.php?option=com_content&task=section&id=1&Itemid=2">News</a></td>
<td valign="middle"><img border="0" src="../modules/mod_d4j_transmenu/img/x.gif" align="absmiddle" /></td>
<td valign="middle"><a id="transmenu45438_menu23" class="mainlevel-menu" href="'.$mosConfig_live_site.'/index.php?option=com_weblinks&Itemid=23">Links</a></td>
<td valign="middle"><img border="0" src="../modules/mod_d4j_transmenu/img/x.gif" align="absmiddle" /></td>
<td valign="middle"><a id="transmenu45438_menu32" class="mainlevel-menu" href="'.$mosConfig_live_site.'/index.php?option=com_smf&Itemid=32">Forum</a></td>
<td valign="middle"><img border="0" src="../modules/mod_d4j_transmenu/img/x.gif" align="absmiddle" /></td>
<td valign="middle"><a id="transmenu45438_menu30" class="mainlevel-menu" href="'.$mosConfig_live_site.'/index.php?option=com_facileforms&Itemid=30">Fichas</a></td>
<td valign="middle"><img border="0" src="../modules/mod_d4j_transmenu/img/x.gif" align="absmiddle" /></td>
<td valign="middle"><a id="transmenu45438_menu33" class="mainlevel-menu" href="'.$mosConfig_live_site.'/cpg/">Fotos</a></td>
<td valign="middle"><img border="0" src="../modules/mod_d4j_transmenu/img/x.gif" align="absmiddle" /></td>
<td valign="middle"><a id="transmenu45438_menu35" class="mainlevel-menu" href="'.$mosConfig_live_site.'/index.php?option=com_ja_submit&Itemid=35">submit</a></td>
</tr>
</table><!-- Load TransMenu`s top level /-->

<!-- Load TransMenu`s sub level \-->
<script language="javascript" type="text/javascript">
if (TransMenu.isSupported()) {
self[\'transmenu45438\'] = new TransMenuSet(TransMenu.direction.down, 0, 0, TransMenu.reference.bottomLeft);

document.getElementById(\'transmenu45438_menu1\').onmouseover = function() { self[\'transmenu45438\'].hideCurrent(); }
document.getElementById(\'transmenu45438_menu26\').onmouseover = function() { self[\'transmenu45438\'].hideCurrent(); }
var transmenu45438_menu2 = self[\'transmenu45438\'].addMenu(document.getElementById("transmenu45438_menu2"));
transmenu45438_menu2.addItem("News Feeds", "'.$mosConfig_live_site.'/index.php?option=com_newsfeeds&Itemid=7", "'.$mosConfig_live_site.'/index.php?option=com_newsfeeds&Itemid=7", 0);
transmenu45438_menu2.addItem("Community", "'.$mosConfig_live_site.'/index.php?option=com_newsfeeds&task=view&feedid=2&Itemid=31", "'.$mosConfig_live_site.'/index.php?option=com_newsfeeds&task=view&feedid=2&Itemid=31", 0);

var transmenu45438_menu23 = self[\'transmenu45438\'].addMenu(document.getElementById("transmenu45438_menu23"));
transmenu45438_menu23.addItem("Contact Us", "'.$mosConfig_live_site.'/index.php?option=com_contact&Itemid=3", "'.$mosConfig_live_site.'/index.php?option=com_contact&Itemid=3", 0);
transmenu45438_menu23.addItem("FAQs", "'.$mosConfig_live_site.'/index.php?option=com_content&task=category&sectionid=3&id=7&Itemid=25", "'.$mosConfig_live_site.'/index.php?option=com_content&task=category&sectionid=3&id=7&Itemid=25", 0);

document.getElementById(\'transmenu45438_menu32\').onmouseover = function() { self[\'transmenu45438\'].hideCurrent(); }
document.getElementById(\'transmenu45438_menu30\').onmouseover = function() { self[\'transmenu45438\'].hideCurrent(); }
document.getElementById(\'transmenu45438_menu33\').onmouseover = function() { self[\'transmenu45438\'].hideCurrent(); }
document.getElementById(\'transmenu45438_menu35\').onmouseover = function() { self[\'transmenu45438\'].hideCurrent(); }
TransMenu.renderAll();
}
if (window.addEventListener) {
window.addEventListener(\'load\', initTransMenu, false);
} else if (window.attachEvent) {
var tmev = window.attachEvent(\'onload\', initTransMenu);
} else {
initTransMenu();
}
</script>
<!-- Load TransMenu`s sub level /--> </td>
</tr>
</table>';
}

This script is the source code generated, copied, pasted and modificated to work in the theme.php.
Can somebody help me to solve this? Thanks.
Title: Re: Creating and placing a menu. Help!
Post by: Gizmo on October 26, 2006, 12:45:55 PM
A link to your gallery will also help a lot.
Title: Re: Creating and placing a menu. Help!
Post by: Alcor on October 26, 2006, 01:03:15 PM
Sorry, there aren't link, I'm testing it in localhost (PC) before to publish it. I attach a picture in case it serves as help.
Title: Re: Creating and placing a menu. Help!
Post by: Alcor on October 26, 2006, 08:52:15 PM
Well, I uploaded the theme and here is the link (http://cosasdeninfas.awardspace.com/cpg/). The menu (top-left) should be where the red line is.
Title: Re: Creating and placing a menu. Help!
Post by: Sami on October 27, 2006, 08:46:07 AM
It would be better if you store the menu structure under a variable and then use return to send it back to the $template_vars

something like this:

Code Select

function theme_joomla_menu(){
$mosConfig_live_site = $_SERVER['SERVER_NAME'];
$joomla_menu = <<<EOT
<table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<td>

<!-- Initialize TransMenu \-->
<div id="transmenu45438" style="display:none"></div>
<link href="../modules/mod_d4j_transmenu.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
/* this DIV is the semi-transparent white background of each menu. the -moz-opacity is a proprietary way to get transparency in mozilla, the filter is for IE/windows 5.0+. */
/* we set the background color in script because ie mac does not use it; that browser only uses a semi-transparent white PNG that the spacer gif inside this DIV is replaced by */
.transMenu .background {
position:absolute;
left:0px; top:0px;
z-index:1;
-moz-opacity:0.5;
filter:alpha(opacity=50);
}
/* same concept as .background, but this is the sliver of shadow on the right of the menu. It\'s left, height, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowRight {
position:absolute;
z-index:3;
top:3px; width:2px;
-moz-opacity:0.4;
filter:alpha(opacity=40);
}
/* same concept as .background, but this is the sliver of shadow on the bottom of the menu. It\'s top, width, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowBottom {
position:absolute;
z-index:1;
left:3px; height:2px;
-moz-opacity:0.4;
filter:alpha(opacity=40);
}
</style>
<script language="javascript" type="text/javascript">
function getBgColor(root) {
var bgColor = \'\';
if (typeof root.style != \'\') {
if (typeof root.style.backgroundColor != \'undefined\' && root.style.backgroundColor != \'\') {
bgColor = root.style.backgroundColor;
}
} else if (typeof root.bgColor != \'undefined\' && root.bgColor != \'\') {
bgColor = root.bgColor;
} else {
bgColor = getBgColor(root.parentNode);
}
return bgColor;
}
</script>
<script language="javascript" type="text/javascript" src="../modules/mod_d4j_transmenu/transmenu.compact.js"></script>

<script language="javascript" type="text/javascript">
// Menu Class Suffix
var menu_class_suffix = "-menu";

// Placeholder CSS class
var sub_placeholder_style = "mainlevel";

// TransMenu settings
TransMenu.spacerGif = "../modules/mod_d4j_transmenu/img/x.gif";                     // path to a transparent spacer gif
TransMenu.dingbatOn = "../modules/mod_d4j_transmenu/img/submenu-on.gif";            // path to the active sub menu dingbat
TransMenu.dingbatOff = "../modules/mod_d4j_transmenu/img/submenu-off.gif";          // path to the inactive sub menu dingbat
TransMenu.shadowPng = "../modules/mod_d4j_transmenu/img/grey-40.png";               // a PNG graphic to serve as the shadow for mac IE5
TransMenu.backgroundPng = "../modules/mod_d4j_transmenu/img/white-90.png";          // a PNG graphic to server as the background for mac IE5
TransMenu.dingbatSize = 16;
TransMenu.menuPadding = 0;
TransMenu.itemPadding = 0;
TransMenu.shadowSize = 2;
TransMenu.shadowOffset = 3;
TransMenu.shadowColor = "#888";

TransMenu.backgroundColor = "#fff";

TransMenu.hideDelay = 1000;
TransMenu.slideTime = 400;

// if supported, initialize TransMenu
function initTransMenu() {
if (TransMenu.isSupported()) {
TransMenu.initialize();
}
}
</script>
<!-- Initialize TransMenu /-->

<!-- Load TransMenu`s top level \-->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" style="padding-left:5px "><a id="transmenu45438_menu1" class="mainlevel-menu" href="'.$mosConfig_live_site.'/index.php?option=com_frontpage&Itemid=1">Home</a></td>
<td valign="middle"><img border="0" src="../modules/mod_d4j_transmenu/img/x.gif" align="absmiddle" /></td>
<td valign="middle"><a id="transmenu45438_menu26" class="mainlevel-menu" href="'.$mosConfig_live_site.'/index.php?option=com_content&task=view&id=12&Itemid=26">MyJSAS</a></td>
<td valign="middle"><img border="0" src="../modules/mod_d4j_transmenu/img/x.gif" align="absmiddle" /></td>
<td valign="middle"><a id="transmenu45438_menu2" class="mainlevel-menu" href="'.$mosConfig_live_site.'/index.php?option=com_content&task=section&id=1&Itemid=2">News</a></td>
<td valign="middle"><img border="0" src="../modules/mod_d4j_transmenu/img/x.gif" align="absmiddle" /></td>
<td valign="middle"><a id="transmenu45438_menu23" class="mainlevel-menu" href="'.$mosConfig_live_site.'/index.php?option=com_weblinks&Itemid=23">Links</a></td>
<td valign="middle"><img border="0" src="../modules/mod_d4j_transmenu/img/x.gif" align="absmiddle" /></td>
<td valign="middle"><a id="transmenu45438_menu32" class="mainlevel-menu" href="'.$mosConfig_live_site.'/index.php?option=com_smf&Itemid=32">Forum</a></td>
<td valign="middle"><img border="0" src="../modules/mod_d4j_transmenu/img/x.gif" align="absmiddle" /></td>
<td valign="middle"><a id="transmenu45438_menu30" class="mainlevel-menu" href="'.$mosConfig_live_site.'/index.php?option=com_facileforms&Itemid=30">Fichas</a></td>
<td valign="middle"><img border="0" src="../modules/mod_d4j_transmenu/img/x.gif" align="absmiddle" /></td>
<td valign="middle"><a id="transmenu45438_menu33" class="mainlevel-menu" href="'.$mosConfig_live_site.'/cpg/">Fotos</a></td>
<td valign="middle"><img border="0" src="../modules/mod_d4j_transmenu/img/x.gif" align="absmiddle" /></td>
<td valign="middle"><a id="transmenu45438_menu35" class="mainlevel-menu" href="'.$mosConfig_live_site.'/index.php?option=com_ja_submit&Itemid=35">submit</a></td>
</tr>
</table><!-- Load TransMenu`s top level /-->

<!-- Load TransMenu`s sub level \-->
<script language="javascript" type="text/javascript">
if (TransMenu.isSupported()) {
self[\'transmenu45438\'] = new TransMenuSet(TransMenu.direction.down, 0, 0, TransMenu.reference.bottomLeft);

document.getElementById(\'transmenu45438_menu1\').onmouseover = function() { self[\'transmenu45438\'].hideCurrent(); }
document.getElementById(\'transmenu45438_menu26\').onmouseover = function() { self[\'transmenu45438\'].hideCurrent(); }
var transmenu45438_menu2 = self[\'transmenu45438\'].addMenu(document.getElementById("transmenu45438_menu2"));
transmenu45438_menu2.addItem("News Feeds", "'.$mosConfig_live_site.'/index.php?option=com_newsfeeds&Itemid=7", "'.$mosConfig_live_site.'/index.php?option=com_newsfeeds&Itemid=7", 0);
transmenu45438_menu2.addItem("Community", "'.$mosConfig_live_site.'/index.php?option=com_newsfeeds&task=view&feedid=2&Itemid=31", "'.$mosConfig_live_site.'/index.php?option=com_newsfeeds&task=view&feedid=2&Itemid=31", 0);

var transmenu45438_menu23 = self[\'transmenu45438\'].addMenu(document.getElementById("transmenu45438_menu23"));
transmenu45438_menu23.addItem("Contact Us", "'.$mosConfig_live_site.'/index.php?option=com_contact&Itemid=3", "'.$mosConfig_live_site.'/index.php?option=com_contact&Itemid=3", 0);
transmenu45438_menu23.addItem("FAQs", "'.$mosConfig_live_site.'/index.php?option=com_content&task=category&sectionid=3&id=7&Itemid=25", "'.$mosConfig_live_site.'/index.php?option=com_content&task=category&sectionid=3&id=7&Itemid=25", 0);

document.getElementById(\'transmenu45438_menu32\').onmouseover = function() { self[\'transmenu45438\'].hideCurrent(); }
document.getElementById(\'transmenu45438_menu30\').onmouseover = function() { self[\'transmenu45438\'].hideCurrent(); }
document.getElementById(\'transmenu45438_menu33\').onmouseover = function() { self[\'transmenu45438\'].hideCurrent(); }
document.getElementById(\'transmenu45438_menu35\').onmouseover = function() { self[\'transmenu45438\'].hideCurrent(); }
TransMenu.renderAll();
}
if (window.addEventListener) {
window.addEventListener(\'load\', initTransMenu, false);
} else if (window.attachEvent) {
var tmev = window.attachEvent(\'onload\', initTransMenu);
} else {
initTransMenu();
}
</script>
<!-- Load TransMenu`s sub level /--> </td>
</tr>
</table>
EOT;
return $joomla_menu;
}
Title: Re: Creating and placing a menu. Help!
Post by: Alcor on October 31, 2006, 09:44:48 AM
Thank you Sami.

Finally I solved it with a variable, like you advised to me.
Text only | Text with Images