This section contains detailed articles elaborating on some of the common issues phpBB users encounter while using the product. Articles submitted by members of the community are checked for accuracy by the relevant phpBB Team. If you do not find the answer to your question here, we recommend looking through the Support Section as well as using the Site Wide Search.

How to create a rules page similar to phpBB.com

Description: This tutorial explains how to add a rules page similar to the one here at www.phpbb.com.

In Categories:

Link to this article: Select All
[url=https://www.phpbb.com/support/docs/en/3.0/kb/article/how-to-create-a-rules-page-similar-to-phpbbcom/]Knowledge Base - How to create a rules page similar to phpBB.com[/url]

This tutorial explains how to add a rules page similar to the one here at http://www.phpbb.com. While this is not an exact copy, the layout and functionality are all the same.

Edits to existing .php files
OPEN language/en/common.php

FIND:

Code: Select all

'FAQ'               => 'FAQ',


After, ADD:

Code: Select all

'RULES'               => 'Rules', 


OPEN includes/functions.php

FIND:

Code: Select all

'U_FAQ'               => append_sid("{$phpbb_root_path}faq.$phpEx"),


AFTER, ADD:

Code: Select all

'U_RULES'         => append_sid("{$phpbb_root_path}rules.$phpEx"),


New 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 and prosilver_se
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/prosilver/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", and onclick="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 -->


If you are using prosilver_se, you also need to do this:

OPEN styles\prosilver_se/template/overall_header.html

FIND:

Code: Select all

<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>


AFTER, ADD:

Code: Select all

<li class="icon-faq"><a href="{U_RULES}">{L_RULES}</a></li>


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", and onclick="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">&nbsp;</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
20140102 Added instructions for language file edits, includes/functions.php edit and prosilver_se edit. Corrected a typo - stevemaury