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:
<!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í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> </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 '{JOOMLA_MENU}' => theme_joomla_menu(),
after, I created the function theme_joomla_menu()
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§ionid=3&id=7&Itemid=25", "'.$mosConfig_live_site.'/index.php?option=com_content&task=category§ionid=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.
Author
Topic: Creating and placing a menu. Help! (Read 16109 times)