phpBB3 prosilver into Joomla ja_purity

enfotoad · Post by **enfotoad** » Sat Aug 09, 2008 1:15 am

Hey!

I am looking for a way to take the phpBB3 prosilver template and put it inside of the joomla template ja_purity. Does anyone know how to do this? I know that someone else has done something like this for the rhuk_milkyway template: http://www.phpbb.com/community/viewtopi ... 5#p4540785

Raimon · Post by **Raimon** » Sat Aug 09, 2008 1:07 pm

Do you have a link to Joomla ja_purity for me, so i can see which style ( layout ) that is

p17blo · Post by **p17blo** » Sat Aug 09, 2008 6:30 pm

http://demo.joomlart.com/contest_opt/in ... ements=red

Severus Snape · Post by **Severus Snape** » Fri Aug 29, 2008 8:48 pm

I switched to the Joomla JA_Purity template recently, and would also like to visually integrate phpBB3.0 with my website (e.g. shared header, functioning top menu, footer, the works) without using iframes. I have managed to get it working using a Joomla "wrapper menu" on a test server, which places the forum within an iframe. However, I wish to avoid iframes on my live site as it causes problems (e.g. users cannot bookmark properly, and it isn't XHTML compliant I understand).

EDIT: I'm getting a sense of how others have done this, by looking at the Milkyway example above, and by looking at how phpBB is integrated into the Joomla Forums. I will attempt something similar next week.

Severus Snape · Post by **Severus Snape** » Sat Sep 06, 2008 3:15 pm

I made an attempt at modifying the overall_header.html file to include the Purity header and top menus. The header is there and looks nice, and the top menu is visible and functions partially, but the drop-downs do not appear or function. Also, there are some other quirks: (1) icons/buttons with a hover appear as duplicates and slightly offset (i.e. I see both the image and the hover image); (2) there are dotted lines here and there that shouldn't be there (I suspect this may have something to do with the way Purity is coded - some folks over at the Joomla Forums are having problems getting dotted lines out of the footer); (3) there are bullets here and there that shouldn't be there (e.g. to the left of the image for new messages). I can't post a link for you to see for yourself without running this live, and I prefer not to as it is so wonky.

What I did was "view page source" on my Joomla site, and copy what I thought was the relevant code into the head and body sections of overall-header.

p17blo · Post by **p17blo** » Sun Sep 07, 2008 8:54 am

I have managed to implement a "workaround" which kinda works (it works well enough for me). Iimplemented this using a mixture of several examples on the net.

Please take a look at my site (http://www.orlandoexclusivevillas.com) and then check out the forum. PLEASE REMEMBER THIS IS A LIVE SITE NOT A DEMO.

Now, here are the pro's and con's of this solution:
1) Joomla site has many header images - phpbb only has one (I can live with this)
2) Joomla site has drop down top menu - phpbb only has top level menu items (I can live with this also)
3) Joomla site menu are dynamically created from joomla setup - phpbb menus are manually configured which means when I change the menus in Joomla I have to manually edit the phpbb menu item (Not great, but it work s for the moment)
4) I had to create a css file to deal with the header as without the header did not work, with the standard joomla css it caused all kinds of problems with phpbb styles
5) The search bar in the header in Joomla does NOT search PHPBB and Vice Versa (This may ultimately confuse users as the search bar always looks the same)
6) The Forum style fits the Joomla style - But only if you are using the standard joomla headers and not red or green

I am more than happy to share this with you but it is a lot more than a header modification

Paul

p17blo · Post by **p17blo** » Sun Sep 07, 2008 9:01 am

I have managed to implement a "workaround" which kinda works (it works well enough for me). Iimplemented this using a mixture of several examples on the net.

Please take a look at my site (http://www.orlandoexclusivevillas.com) and then check out the forum. PLEASE REMEMBER THIS IS A LIVE SITE NOT A DEMO.

Now, here are the pro's and con's of this solution:
1) Joomla site has many header images - phpbb only has one (I can live with this)
2) Joomla site has drop down top menu - phpbb only has top level menu items (I can live with this also)
3) Joomla site menu are dynamically created from joomla setup - phpbb menus are manually configured which means when I change the menus in Joomla I have to manually edit the phpbb menu item (Not great, but it work s for the moment)
4) I had to create a css file to deal with the header as without the header did not work, with the standard joomla css it caused all kinds of problems with phpbb styles
5) The search bar in the header in Joomla does NOT search PHPBB and Vice Versa (This may ultimately confuse users as the search bar always looks the same)
6) The Forum style fits the Joomla style - But only if you are using the standard joomla headers and not red or green

I am more than happy to share this with you but it is a lot more than a header modification

Paul

Severus Snape · Post by **Severus Snape** » Wed Sep 10, 2008 2:17 am

Thanks Paul!

My site is now functioning in a similar way. If anyone knows how to get the drop-down menus to display over top of the phpBB forum, please post the solution here.

Here are the basic steps if anyone wants to duplicate this (caution - this is from memory, though I took some notes). Also, note that I know next to nothing about HTML, CSS, et cetera.

A) Obtain the phpBB China "ja_purity" prosilver template for phpBB

I believe you can use their theme as-is, but make the obvious modifications to their overall_header.html file. If you use their theme, you can probably skip the rest of these steps (or at least most of them).

I preferred to use the prosilver_se theme, so I modified that theme (as follows). I used the Joomla template.css and phpBB common.css files that came with the phpBB China "ja_purity" phpBB theme, as they have fairly extensive tweaks that were required in order for the forum to display properly.

B) Modify your prosilver template/theme

1) Edit overall_header.html

Replace:

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}">

With (note: customise menus and site name/URLs):

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">&nbsp;</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>

Remove this code to remove phpBB header and search box:

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>

2) Upload following CSS files to {phpBB}/styles/prosilver/theme:

(make sure to edit relative URL's within this CSS file - e.g. I changed the url(../images to url(./images

JA_Purity CSS files:
template.css (use the phpBB China one, or else figure out the necessary changes yourself

)
ja-sosdmenu.css
menu.css

phpBB CSS files:
common.css (use the phpBB China one, or make similar changes)

3) Add the following ja_purity images to {phpBB}/styles/{template}/theme/images:

You may need other images, depending on your settings.

{Joomla}/templates/ja_purity/images/header/header2.jpg
{Joomla}/templates/ja_purity/images/header-mask.png
{Joomla}/templates/ja_purity/images/logo.png
{Joomla}/templates/ja_purity/images/grad3.gif
{Joomla}/templates/ja_purity/images/hdot2.gif
{Joomla}/templates/ja_purity/images/bullet.gif
{Joomla}/templates/ja_purity/images/bullet2.gif
{Joomla}/templates/ja_purity/images/bullet3.gif
{Joomla}/templates/ja_purity/images/opaque.png
{Joomla}/templates/ja_purity/images/arrow2.png

4) Edit overall_footer.html

I'm not sure whether this is necessary (I found I had to remove this for prosilver_se):

Remove

Code: Select all

<span class="corners-bottom"><span></span></span>

You can also customise the footer to make it match your site, e.g. by including your footer copyright text within:

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>

bookysmell · Post by **bookysmell** » Wed Oct 01, 2008 7:08 pm

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.

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 · Post by **Severus Snape** » Wed Oct 01, 2008 9:18 pm

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.

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 · Post by **bookysmell** » Thu Oct 02, 2008 5:25 am

Check out http://research.deece.gr/newsite/phpbb3/index.php.

My ja-sosdmenu.css is

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;
}

and the code producing the menu on overall_header.html is

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 -->

PS. Site is for testing purposes and probably will change the next days.

Severus Snape · Post by **Severus Snape** » Thu Oct 02, 2008 12:23 pm

Thanks, that is promising. My menus now drop-down, but the style/formatting of the menu looks different from what it used to be and from the rest of my site. I will compare the sosdmenu later to see exactly what the differences are.

For the overall_header, the only thing I needed to change was class="menu" to class="menu-nav". I looked to find where menu-nav is defined, but couldn't find it. Is "menu-nav" something you created? I tried "menu-wonky", and it still worked for me the same way as "menu-nav".

bookysmell · Post by **bookysmell** » Thu Oct 02, 2008 12:39 pm

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".

No, I pasted it from the original css file. And yes the problem is just that.
Don't forget to take care of the links to images on your css file as they should point to the new image folder inside phpBB root path.

Edit: Just noticed that it does not matter what class you will give to the ul tag (menu-haha will have the same effect).

Severus Snape · Post by **Severus Snape** » Thu Oct 02, 2008 12:54 pm

Thanks, I did forget to change those URLS. I'm not sure what you mean by "the problem is just that".

The style differences are still there, and I notice that some aspects of the forum appear over-top of the drop-downs (like the forum text, and the horizontal white line along the top that is just below the board index link, and the vertical lines that separate the topics and posts columns.

Getting closer...

Severus Snape · Post by **Severus Snape** » Thu Oct 02, 2008 12:59 pm

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).

That's right, and that is why my formatting changed.

If you replace class="menu" to class="menu-nav", then it doesn't call all the formatting stuff within the sosdmenu file (which is for ul.menu). If I change the overall header to "menu-nav" and change within sosdmenu "ul.menu" to "ul.menu-nav", then I get the same thing I started with (i.e. correct formatting, but the drop-downs don't appear over the forum).

So, this tells me the solution (or at least part of it) has to do with the settings for class="menu" within ja-sosdmenu.css.

advertisements