Code: Select all
<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />
<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->
</head>
<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
Code: Select all
<link href="{T_THEME_PATH}/template.css" rel="stylesheet" type="text/css" />
<link href="{T_THEME_PATH}/menu.css" rel="stylesheet" type="text/css" />
<link href="{T_THEME_PATH}/ja-sosdmenu.css" rel="stylesheet" type="text/css" />
<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />
<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->
<!--[if gte IE 7.0]>
<style type="text/css">
.clearfix {display: inline-block;}
</style>
<![endif]-->
</head>
<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
<div id="ja-wrapper">
<div id="ja-headerwrap">
<div id="ja-header" class="clearfix" style="background: url({T_THEME_PATH}/images/header/header2.jpg) no-repeat top right;">
<h1 class="logo-text">
<a href="http://YOURSITE/" title="YOUR SITE NAME"><span>YOUR SITE NAME</span></a>
</h1>
<p class="site-slogan">YOUR SLOGAN</p>
<div class="ja-headermask"> </div>
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="ja-search">
<form action="{U_SEARCH}" method="post" id="search">
<input name="keywords" id="keywords" type="text" maxlength="20" title="{L_SEARCH_KEYWORDS}" class="inputbox" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
<br />
<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
</form>
</div>
<!-- ENDIF -->
</div>
</div>
<div id="ja-mainnavwrap">
<div id="ja-mainnav" class="clearfix">
<ul class="menu">
<ul class="menu">
<li class="item###"><a href="/"><span>HOME</span></a></li>
<li class="item1"><a href="{YOUR SITE HOME}"><span>Home</span></a></li>
<li id="current" class="active item#"><a href="URL"><span>MENU NAME</span></a></li>
<li class="parent item#"><a href="URL"><span>MENU NAME</span></a><ul>
<li class="item#"><a href="URL"><span>SUB MENU NAME</span></a></li>
<li class="item#"><a href="URL"><span>SUB MENU NAME</span></a></li>
<li class="item#"><a href="URL"><span>SUB MENU NAME</span></a></li></ul></li>
<li class="parent item#"><a href="URL"><span>MENU NAME</span></a><ul>
</ul>
</div>
</div>
Code: Select all
<div class="headerbar">
<div class="inner"><span class="corners-top"><span></span></span>
<div id="site-description">
<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
</div>
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="search-box">
<form action="{U_SEARCH}" method="post" id="search">
<fieldset>
<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
<input class="button2" value="{L_SEARCH}" type="submit" /><br />
<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
<!-- ENDIF -->
<span class="corners-bottom"><span></span></span></div>
</div>
Code: Select all
<span class="corners-bottom"><span></span></span>
Code: Select all
<div id="ja-footerwrap"><div id="ja-footer" class="clearfix">Powered by <a href="http://www.phpbb.com/">phpBB</a> </div></div>
I believe this is an issue. To resolve, replace the original ja-sosdmenu.css from the joomla! ja_purity theme to phpbb3/styles/ja_purity/theme.Severus Snape wrote:If anyone knows how to get the drop-down menus to display over top of the phpBB forum, please post the solution here.
Thanks, I tried it, but it didn't make my drop-downs appear over top of the forum. The drop-downs actually are functioning (did I mention that?), it's just that they are being hidden by the forum. It must be something simple, but since I'm relatively clueless it's beyond me at the moment. On one thread someone mentioned a z-index - maybe something to do with that...bookysmell wrote:I believe this is an issue. To resolve, replace the original ja-sosdmenu.css from the joomla! ja_purity theme to phpbb3/styles/ja_purity/theme.
Code: Select all
/* Son of Suckerfish Dropdowns
---------------------------------------------------------
Originally developed by Patrick Griffiths and Dan Webb
http://www.htmldog.com/articles/suckerfish/dropdowns/
---------------------------------------------------------
NOTE: After a deep research, we decide to divide this
CSS into 2 parts. The first part will define the layout.
The second part will define the visual look for this menu.
---------------------------------------------------------*/
/*--------------------------- LAYOUT ----------------------------*/
#ja-mainnav, #ja-mainnav ul {
padding: 0;
margin: 0;
line-height: 20px;
}
#ja-mainnav a {
display: block;
line-height: 20px;
margin: 0;
padding: 10px 20px;
}
#ja-mainnav li { /* all list items */
float: left;
margin: 0;
padding: 0;
}
#ja-mainnav li ul { /* second-level lists */
position: absolute;
width: 202px;
/*
* Using left instead of display to hide menus because display: none isn't
* read by screen readers
*/
left: -999em;
}
#ja-mainnav ul ul a { /* sub-links */
width: 160px;
}
#ja-mainnav li ul ul { /* third-and-above-level lists */
margin: -42px 0 0 200px;
}
#ja-mainnav li:hover ul ul,
#ja-mainnav li:hover ul ul ul,
#ja-mainnav li.sfhover ul ul,
#ja-mainnav li.sfhover ul ul ul {
left: -999em;
}
#ja-mainnav li:hover ul,
#ja-mainnav li li:hover ul,
#ja-mainnav li li li:hover ul,
#ja-mainnav li.sfhover ul,
#ja-mainnav li li.sfhover ul,
#ja-mainnav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
/*--------------------------- VISUAL ----------------------------*/
/* -------- All levels -------- */
#ja-mainnavwrap {
border-top: 1px solid #666666;
background: #444444;
}
#ja-mainnav ul, #ja-mainnav li {
background-image: none;
list-style: none;
}
#ja-mainnav span.separator {
display:none;
}
/* -------- Top level -------- */
#ja-mainnav > ul {
background-color: #444444;
padding-left: 20px;
}
#ja-mainnav > ul > li {
background-color: #444444;
border-left: 1px solid #666666;
border-right: 1px solid #333333;
margin-right: 1px;
}
#ja-mainnav > ul > li.active {
background: url(../images/arrow2.png) no-repeat bottom center #444444;
color: #CCCCCC;
}
#ja-mainnav > ul > li:hover,
#ja-mainnav > ul > li:active,
#ja-mainnav > ul > li:focus {
background: url(../images/arrow2.png) no-repeat bottom center #555555;
color: #FFFFFF;
}
/* -------- sub-levels -------- */
#ja-mainnav ul ul li {
border-left: 1px solid #666666;
border-right: 1px solid #333333;
border-top: 1px solid #666666;
border-bottom: 1px solid #333333;
margin-bottom: 1px;
}
#ja-mainnav li ul { /* second-level lists */
background-color: #555555;
}
#ja-mainnav li a {
color: #CCCCCC;
font-weight: bold;
text-decoration: none;
}
#ja-mainnav ul ul li:hover,
#ja-mainnav ul ul li:active,
#ja-mainnav ul ul li:focus {
background: #444444;
color: #FFFFFF;
}
/*old css*/
/* Son of Suckerfish Dropdowns
---------------------------------------------------------
Originally developed by Patrick Griffiths and Dan Webb
http://www.htmldog.com/articles/suckerfish/dropdowns/
---------------------------------------------------------
NOTE: After a deep research, we decide to divide this
CSS into 2 parts. The first part will define the layout.
The second part will define the visual look for this menu.
---------------------------------------------------------*/
#ja-mainnav ul.menu {
margin: 0; /* all lists */
padding: 0;
float: left;
border-right: 1px solid #555555;
}
#ja-mainnav ul.menu ul {
margin: 0; /* all lists */
padding: 0;
}
#ja-mainnav ul.menu li {
margin: 0; /* all list items */
padding: 0;
float: left;
display: block;
background: none;
cursor: pointer;
position: relative;
list-style: none;
}
#ja-mainnav ul.menu li ul {
width: 16.4em;
position: absolute; /* second-level lists */
z-index: 99;
height: auto;
w\idth: 15.9em;
}
#ja-mainnav ul.menu li ul ul {
margin: -1.5em 0 0 14em; /* third-and-above-level lists */
}
#ja-mainnav ul.menu li li {
padding: 0 1em 0 0;
margin: 0;
width: 14.9em;
}
#ja-mainnav ul.menu ul a {
width: 14.8em;
w\idth: 10.8em;
}
#ja-mainnav ul.menu li ul {
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#ja-mainnav ul.menu li:hover ul ul, #ja-mainnav ul.menu li:hover ul ul ul,
#ja-mainnav ul.menu li.sfhover ul ul, #ja-mainnav ul.menu li.parentsfhover ul ul, #ja-mainnav ul.menu li.parent-activesfhover ul ul, #ja-mainnav ul.menu li.activesfhover ul ul,
#ja-mainnav ul.menu li.sfhover ul ul ul, #ja-mainnav ul.menu li.parentsfhover ul ul ul, #ja-mainnav ul.menu li.parent-activesfhover ul ul ul, #ja-mainnav ul.menu li.activesfhover ul ul ul {
left: -999em;
}
/* This "unhides" the sub-menus (left: -999em is what hides them) */
#ja-mainnav ul.menu li:hover ul, #ja-mainnav ul.menu li li:hover ul, #ja-mainnav ul.menu li li li:hover ul,
#ja-mainnav ul.menu li.sfhover ul, #ja-mainnav ul.menu li.parentsfhover ul, #ja-mainnav ul.menu li.parent-activesfhover ul, #ja-mainnav ul.menu li.activesfhover ul,
#ja-mainnav ul.menu li li.sfhover ul, #ja-mainnav ul.menu li li.havesubchildsfhover ul, #ja-mainnav ul.menu li li.havesubchild-activesfhover ul, #ja-mainnav ul.menu li li.activesfhover ul,
#ja-mainnav ul.menu li li li.sfhover ul, #ja-mainnav ul.menu li li li.havesubchildsfhover ul, #ja-mainnav ul.menu li li li.havesubchild-activesfhover ul, #ja-mainnav ul.menu li li li.activesfhover ul {
left: auto;
}
/* STYLING THE MENU
-----------------------------------*/
/* 1st level */
#ja-mainnav ul.menu li a {
margin: 0;
padding: 10px 20px;
border-left: 1px solid #555555;
border-right: 1px solid #333333;
display: block;
color: #CCCCCC;
font-weight: bold;
line-height: normal;
text-decoration: none;
}
#ja-mainnav ul.menu li a:hover,
#ja-mainnav ul.menu li a:active,
#ja-mainnav ul.menu li a:focus {
background: url(../images/arrow2.png) no-repeat bottom center #555555;
color: #FFFFFF;
}
#ja-mainnav ul.menu li {
margin: 0;
}
#ja-mainnav ul.menu li:hover,
#ja-mainnav ul.menu li.sfhover,
#ja-mainnav ul.menu li.parentsfhover,
#ja-mainnav ul.menu li.parent-activesfhover {
background: url(../images/arrow2.png) no-repeat bottom center #555555;
color: #FFFFFF;
}
#ja-mainnav ul.menu li.active a,
#ja-mainnav ul.menu li.active a:hover,
#ja-mainnav ul.menu li.active a:active,
#ja-mainnav ul.menu li.active a:focus {
background: url(../images/arrow2.png) no-repeat bottom center #333333;
color: #FFFFFF;
}
/* 2nd level and above */
#ja-mainnav ul.menu li ul {
border: 1px solid #555555;
background: url(../images/opaque.png);
}
#ja-mainnav ul.menu li ul li {
border-top: 1px solid #777777;
border-bottom: 1px solid #444444;
background: none;
}
#ja-mainnav ul.menu li ul a {
border-right: none;
margin: 0;
padding: 7px 10px;
background: none;
color: #CCCCCC;
font-weight: normal;
line-height: normal;
text-transform: none;
}
#ja-mainnav ul.menu li.havesubchild,
#ja-mainnav ul.menu li.havesubchild-active {
background: url(../images/bullet2.gif) no-repeat 94% 50%;
}
#ja-mainnav ul.menu li ul a:hover,
#ja-mainnav ul.menu li ul a:active,
#ja-mainnav ul.menu li ul a:focus,
#ja-mainnav ul.menu ul li:hover,
#ja-mainnav ul.menu ul li.sfhover,
#ja-mainnav ul.menu ul li.havesubchildsfhover,
#ja-mainnav ul.menu ul li.havesubchild-activesfhover,
#ja-mainnav ul.menu ul ul li:hover,
#ja-mainnav ul.menu ul ul li.sfhover,
#ja-mainnav ul.menu ul ul li.havesubchildsfhover,
#ja-mainnav ul.menu ul ul li.havesubchild-activesfhover {
background: #333333;
color: #CCCCCC;
}
#ja-mainnav ul.menu ul li.active a,
#ja-mainnav ul.menu ul li.active a:hover,
#ja-mainnav ul.menu ul li.active a:active,
#ja-mainnav ul.menu ul li.active a:focus {
background: none !important;
color: #FFFFFF;
font-weight: bold;
}
#ja-mainnav ul.menu li.active li a,
#ja-mainnav ul.menu li.active li a:hover,
#ja-mainnav ul.menu li.active li a:active,
#ja-mainnav ul.menu li.active li a:focus {
background: none !important;
}
#ja-mainnav h3 {
display: none;
}
#ja-mainnav .moduletable_menu {
background: none;
margin: 0;
padding: 0;
}
Code: Select all
<!-- BEGIN: MAIN NAVIGATION -->
<div id="ja-mainnavwrap">
<div id="ja-mainnav" class="clearfix">
<ul class="menu-nav"><li class="item28"><a href="/newsite/joomla/index.php/en/about-joomla"><span>About Joomla!</span></a></li><li class="item29"><a href="/newsite/joomla/index.php/en/features"><span>Features</span></a></li><li class="item18"><a href="/newsite/joomla/index.php/en/news"><span>News</span></a></li><li class="item30"><a href="/newsite/joomla/index.php/en/the-community"><span>The Community</span></a></li><li class="parent item53"><a href="http://research.deece.gr/newsite/phpbb3/index.php"><span>Forum</span></a><ul><li class="item60"><a href="http://research.deece.gr/newsite/phpbb3/index.php"><span>Forum</span></a></li></ul></li><li class="item54"><a href="http://research.deece.gr/newsite/wiki"><span>Wiki</span></a></li><li class="item56"><a href="/newsite/joomla/index.php/en/chat"><span>Chat?!</span></a></li><li class="item58"><a href="/newsite/joomla/index.php/en/docman"><span>DOCman</span></a></li></ul>
</div>
</div>
<!-- END: MAIN NAVIGATION -->
No, I pasted it from the original css file. And yes the problem is just that.Severus Snape wrote:Is "menu-nav" something you created? I tried "menu-wonky", and it still worked for me the same way as "menu-nav".
That's right, and that is why my formatting changed.bookysmell wrote:Edit: Just noticed that it does not matter what class you will give to the ul tag (menu-haha will have the same effect).