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