PHP File
Create a new PHP file called "rules.php" and place it in the root of your board installation (usually where config.php is) with the following code in the file:
- Code: Select all
<?php
/**
*
* @package
* @version $Id$
* @copyright (c)
* @license http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/
/**
* @ignore
*/
define('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);
// Start session management
$user->session_begin();
$auth->acl($user->data);
$user->setup();
page_header('Rules');
$template->set_filenames(array(
'body' => 'rules.html',
));
page_footer();
?>
Instructions for prosilver
Create a new CSS file called "rules.css" in /styles/prosilver/theme/ directory with the following code:
- Code: Select all
.activerule
{
background-color:#ECD5D8;
color: #BC2A4D;
font-weight: bold;
}
p.pages
{
font-size: 10pt;
}
ol.headers
{
margin-left: 19px;
}
ol.headers h3
{
border-bottom: none;
color: #BC2A4D;
font-size: 9pt;
list-style-type: decimal;
margin-bottom: 2px;
}
ol.rulespage li
{
line-height: 1.2em;
padding: 5px;
font-size: 10pt;
list-style-type: lower-alpha;
margin-left: -10px;
}
#col1
{
float: left;
width: 69%;
}
#col2
{
margin-left: 1%;
float: right;
width: 30%;
}
div.mini-panel {
padding: 0 10px;
background-color: #ebebeb;
margin-bottom: 5px;
}
div.mini-panel h3 {
font-family: Verdana, Helvetica, Arial, sans-serif;
margin: 5px 0 0 0;
font-weight: bold;
color: #333333;
}
div.mini-panel span.corners-top, div.mini-panel span.corners-bottom {
margin: 0 -10px;
}
ul.menu {
border-top: 1px solid #FFFFFF;
list-style: none;
}
ul.menu li {
padding: 5px 0 4px 0;
border-bottom: 1px solid #CCCCCC;
margin: 0;
}
ul.menu li.last {
border-bottom: none;
}
Next, open /styles/prosliver/theme/stylesheet.css and find the following code:
- Code: Select all
@import url("colours.css");
On a new line after that, add the following code:
- Code: Select all
@import url("rules.css");
Then, create a file called "rules.html" in /styles/prosilver/template directory. Take note of the following points:
- Each
<li>item under the<ol>headers class are your forum section headers (forum rules, warnings / bans, whatever you want). - Each
<li>item under the<ol>rulespage class are your rules. The<li id="xxx">,<a href="#xxx", andonclick="highlight('xxx')must match! Just replace xxx with the value you want.
- Code: Select all
<!-- INCLUDE overall_header.html -->
<div id="col1">
<div class="panel" style="background-color: #FFFFFF;">
<div class="inner"><span class="corners-top"><span></span></span>
<div class="content">
<ol class="headers">
<li><h3 id="rule1">SECTION 1</h3>
<ol class="rulespage">
<li id="rule1a">rule 1a <a href="#rule1a" onclick="highlight('rule1a');"><span style="text-decoration: underline;">#</span></a></li>
<li id="rule1b">rule 1b <a href="#rule1b" onclick="highlight('rule1b');"><span style="text-decoration: underline;">#</span></a></li>
</ol>
</li>
<li><h3 id="rule2">SECTION 2</h3>
<ol class="rulespage">
<li id="rule2a">rule 2a <a href="#rule2a" onclick="highlight('rule2a');"><span style="text-decoration: underline;">#</span></a></li>
<li id="rule2b">rule 2b <a href="#rule2b" onclick="highlight('rule2b');"><span style="text-decoration: underline;">#</span></a></li>
</ol>
</li>
</ol>
</div>
<span class="corners-bottom"><span></span></span></div>
</div>
</div>
<div id="col2">
<div class="mini-panel">
<div class="inner"><span class="corners-top"><span></span></span>
<h3>Rules Sections</h3>
<ul class="menu">
<li><a href="#rule1" onclick="highlight('');">SECTION 1</a></li>
<li class="last"><a href="#rule2" onclick="highlight('');">SECTION 2</a></li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
</div>
<!-- INCLUDE overall_footer.html -->
Next, we need to edit two phpBB core files. Open /styles/prosilver/template/overall_header.html and find the following code:
- Code: Select all
<script type="text/javascript" src="{T_TEMPLATE_PATH}/styleswitcher.js"></script>
On a new line above that, add the following code:
- Code: Select all
<!-- IF SCRIPT_NAME eq 'rules' -->
<script type="text/javascript">
// <![CDATA[
window.onload = function()
{
var pos = location.href.indexOf("#");
if(pos != -1)
{
highlight(location.href.slice(pos + 1));
}
};
var oldID = false;
function highlight(id)
{
if(oldID != false && oldID != id)
{
document.getElementById(oldID).className = '';
}
document.getElementById(id).className = 'activerule';
oldID = id;
}
// ]]>
</script>
<!-- ENDIF -->
Instructions for subsilver2 (by HGN)
Open /styles/subsilver2/theme/stylesheet.css and find the following code:
- Code: Select all
.username-coloured {
font-weight: bold;
}
On a new line after that, add the following code:
- Code: Select all
/* Rules
------------ */
.activerule
{
background-color: #F9CC79;
color: #323D4F;
font-weight: bold;
}
ol.headers li
{
list-style-type: decimal;
}
ol.headers h3
{
font-size:1.1em;
margin-top: 1em;
font-weight: bold;
color: #323D4F;
}
ol.rulespage li
{
line-height: 1.2em;
padding: 5px;
font-size: 10pt;
list-style-type: lower-alpha;
margin-left: 1.5em;
}
Now we create a file called "rules.html" in /styles/subsilver2/template directory. Take note of the following points:
- Each
<li>item under the<ol>headers class are your forum section headers (forum rules, warnings / bans, whatever you want). - Each
<li>item under the<ol>rulespage class are your rules. - The
<li id="xxx">,<a href="#xxx", andonclick="highlight('xxx')must match! Just replace xxx with the value you want.
- Code: Select all
<!-- INCLUDE overall_header.html -->
<div id="pagecontent">
<table class="tablebg" width="100%" cellspacing="1">
<tr>
<th>Rules</th>
</tr>
<tr>
<td class="row1">
<span class="gen"><b>Rules Sections</b></span><br />
<span class="gen"><a class="postlink" href="#rule1" onclick="highlight('');">SECTION 1</a></span><br />
<span class="gen"><a class="postlink" href="#rule2" onclick="highlight('');">SECTION 2</a></span><br />
<br />
</td>
</tr>
<tr>
<td class="cat"> </td>
</tr>
</table>
<br clear="all" />
<table class="tablebg" width="100%" cellspacing="1">
<ol class="headers">
<tr>
<td class="cat" align="center"></td>
</tr>
<tr>
<td class="row1" valign="top">
<div class="postbody">
<li><h3 id="rule1">SECTION 1</h3>
<ol class="rulespage">
<li id="rule1a">rule 1a <a href="#rule1a" onclick="highlight('rule1a');"><span style="text-decoration: underline;">#</span></a></li>
<li id="rule1b">rule 1b <a href="#rule1b" onclick="highlight('rule1b');"><span style="text-decoration: underline;">#</span></a></li>
</ol>
</li>
<li><h3 id="rule2">SECTION 2</h3>
<ol class="rulespage">
<li id="rule2a">rule 2a <a href="#rule2a" onclick="highlight('rule2a');"><span style="text-decoration: underline;">#</span></a></li>
<li id="rule2b">rule 2b <a href="#rule2b" onclick="highlight('rule2b');"><span style="text-decoration: underline;">#</span></a></li>
</ol>
</li>
</div>
</td>
</tr>
<tr>
<td class="spacer" height="1"><img src="images/spacer.gif" alt="" width="1" height="1" /></td>
</tr>
</ol>
</table>
</div>
<!-- INCLUDE breadcrumbs.html -->
<br clear="all" />
<div align="{S_CONTENT_FLOW_END}"><!-- INCLUDE jumpbox.html --></div>
<!-- INCLUDE overall_footer.html -->
Next, we need to edit two phpBB core files.
Open /styles/subsilver2/template/overall_header.html and find the following code:
- Code: Select all
<script type="text/javascript">
// <![CDATA[
<!-- IF S_USER_PM_POPUP and S_NEW_PM -->
popup('{UA_POPUP_PM}', 400, 225, '_phpbbprivmsg');
<!-- ENDIF -->
On a new line above that, add the following code:
- Code: Select all
<!-- IF SCRIPT_NAME eq 'rules' -->
<script type="text/javascript">
// <![CDATA[
window.onload = function()
{
var pos = location.href.indexOf("#");
if(pos != -1)
{
highlight(location.href.slice(pos + 1));
}
};
var oldID = false;
function highlight(id)
{
if(oldID != false && oldID != id)
{
document.getElementById(oldID).className = '';
}
document.getElementById(id).className = 'activerule';
oldID = id;
}
// ]]>
</script>
<!-- ENDIF -->
All Styles
Make sure you purge your cache and refresh your templates / themes. If the page doesn't render correctly when you browse to it, try reloading the page in your browser (using the keyboard - usually Ctrl + F5 or Shift + browser refresh key).
20101113 - fixed problem with JS code affecting posts
20110120 - fixed rule1b html; fixed css affecting memberlist last active column
20120222 – added subsilver2 instructions by HGN