Creating and placing a menu. Help! Creating and placing a menu. Help!
 

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

Creating and placing a menu. Help!

Started by Alcor, October 26, 2006, 10:20:25 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages1
User actions

Alcor

October 26, 2006, 10:20:25 AM Last Edit: October 31, 2006, 10:08:33 AM by Sami
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.

Gizmo

#1
October 26, 2006, 12:45:55 PM
A link to your gallery will also help a lot.
Did you read the manual first???? Taking 2 minutes to backup your files can save you hours of wondering what you screwed up.
Billy Bullock - BullsEyePhotos Blog of Indecision

Alcor

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

Alcor

#3
October 26, 2006, 08:52:15 PM
Well, I uploaded the theme and here is the link. The menu (top-left) should be where the red line is.

Sami

#4
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;
}
‍I don't answer to PM with support question
Please post your issue to related board

Alcor

#5
October 31, 2006, 09:44:48 AM
Thank you Sami.

Finally I solved it with a variable, like you advised to me.
Print
Go Up Pages1
User actions