phpBB 3.0 Tutorial

This tutorial explains how to add custom links to header of your phpBB 3.0 forum.
Editing navigation for Helion style

Helion style has 3 navigations: navigation in header, left side bar, right side bar.

How to edit header menu

Important: this section requires basic knowledge of HTML.

phpBB doesn't have ability to edit menu in admin control panel. Editing header and side bars requires manually editing HTML files.

Please read "How to edit style components" tutorial before continuing.

Top menu is located in file styles/art_helion/template/_top.html

Menu is hidden by default because it contains only sample items. To show it, remove this line from _top.html:

Code:
<!-- IF false -->
and this line at the end of file:

Code:
<!-- ENDIF -->
To add an item to menu, add HTML code for it inside <div class="top-links">

Simple link

This is what simple link looks like:



To add a simple link, add code like this:

Code:
<a class="top-link" href="http://your_link"><span>Link Text</span></a>
Do not forget to wrap text inside link in "span".

Popups

There are two types of popup menus: menus that have custom content and menus that have only links. They have slightly different code and different layout.

Popup with links

You can see popup menu with links in screenshot above.

Such popup menu is a list. Here is a sample code:

Code:
<div class="popup-trigger">
  <a class="top-link" href="#"><span>Popup Sample: links</span></a>
  <div class="popup popup-list"><ul>
    <li class="popup-link"><a href="#">Link 1</a></li>
    <li class="popup-link"><a href="#">Another Link</a></li>
    <li class="popup-link"><a href="#">Link 3</a></li>
  </ul></div>
</div>
Menu item is wrapped into a div with class="popup-trigger". Popup is wrapped into div with class="popup popup-list", followed by <ul>. Links are wrapped in list items with class="popup-link".

Popup with custom content

This is what popup with custom content looks like:



You can put any HTML code in popup. Whatever you'll be adding there, make sure to add entries to CSS files. You should add those entries to theme/content.css. This is sample code for such popup:

Code:
<div class="popup-trigger">
  <a class="top-link" href="#"><span>Popup Sample: block</span></a>
  <div class="popup">
    Put your popup content here
  </div>
</div>
Menu item is wrapped into div with class="popup-trigger", popup code is placed after end of link, wrapped into div with class="popup"

Important: text in such popup has white-space:nowrap, which means long text will not wrap and instead it will increase width of popup. You will need to add line breaks yourself or set fixed width to popup content and change text wrapping like this:

Code:
<div class="popup" style="white-space: normal; width: 400px;">

Nested popups

Popups with list of links can contain nested popups. Nested popup looks like this:



or this:



First sample shows another list of links in nested popup, second sample shows custom content in nested popup.

To add a nested popup to link, add class="popup-trigger" to <li> that is wrapping that link, then add popup code after </a>. Code for first sample (showing only few menu items):

Code:
<div class="popup-trigger">
  <a class="top-link" href="#"><span>Colorize phpBB Styles</span></a>
  <div class="popup popup-list">
    <ul>
        <li class="popup-link popup-trigger">
            <a href="#">Artodia styles</a>
            <ul class="popup popup-list">
              <li class="popup-link"><a href="#">Air</a></li>
              <li class="popup-link"><a href="#">Black</a></li>
              <li class="popup-link"><a href="#">ColorizeIt</a></li>
              ... more similar list items here (removed code) ...
          </ul>
        </li>
        <li class="popup-link popup-trigger">
          <a href="#">Mobile styles</a>
            <ul class="popup popup-list">
              <li class="popup-link"><a href="#">Prosilver Mobile / SEO</a></li>
              <li class="popup-link"><a href="#">iPhone</a></li>
            </ul>
        </li>
        <li class="popup-link"><a href="#">Other prosilver based styles</a></li>
        <li class="popup-link"><a href="#">Other subsilver2 based styles</a></li>
     </ul>
  </div>
</div>
In second sample nested popup doesn't have a list of links, so div wrapping nested popup has class="popup" instead of class="popup popup-list":

Code:
    <div class="popup-trigger">
      <a class="top-link" href="#"><span>Popup Sample: links</span></a>
      <div class="popup popup-list">
        <ul>
          <li class="popup-link"><a href="#">Link 1</a></li>
          <li class="popup-link"><a href="#">Another Link</a></li>
          <li class="popup-link"><a href="#">Link 3</a></li>
          <li class="popup-link popup-trigger">
            <a href="#">Link with nested popup</a>
            <div class="popup">
              Nested popup content
            </div>
          </li>
        </ul>
      </div>
    </div>
Nested popups are not limited to two levels, you can have as many levels as you want, but it is a bad idea to make it more than 3 levels deep because then popup menu might go outside of right edge of screen.

How to edit side bars

Important: this section requires basic knowledge of HTML.

Please read "How to edit style components" tutorial before continuing.

This style has two side bars: side bar on left side and side bar on right side. Both can be customized.

Side bars are located in following files: styles/art_helion/template/_sidebar_left.html and styles/art_helion/template/_sidebar_right.html

Right side bar is hidden by default because it contains only sample items. To show it, remove this line from _sidebar_right.html:

Code:
<!-- IF false -->
and this line at the end of file:

Code:
<!-- ENDIF -->
You should add your code inside <div class="layout-left"> and <div class="layout-right">

After editing those files, save them, upload it on server, refresh page.

Make sure option "recompile stale style components" in load settings (acp -> load settings) is enabled.

How to add a section with links

Style has CSS for sections and links for side bars, you can see example on forum menu on left side. To add a section with links, use code like this:

Code:
    <ul class="menu">
      <li class="menu-item menu-section"><p>Links</p></li>
      <li class="menu-item"><a href="#" class="menu-link">Link 1</a></li>
      <li class="menu-item"><a href="#" class="menu-link">Link 2</a></li>
    </ul>
Headers have class set to "menu-item menu-section" and content must be nested in ether "p" (if header isn't clickable) or "a" (if header is a link).

Normal menu items have class set to "menu-item" and content is a usual link.

If you want to put custom block, such as ad block, put it outside of menu before <ul> or after </ul>. To make it centered, wrap it in something like this:

Code:
<div style="width: 160; margin: 2px auto;"> ad code </div>

How to increase width of side bar

Side bar content can be up to 200 pixels wide. If you want to put wider content, you need to increase width of side bars by editing style sheet.

Open theme/common.css, find this code:

Code:
    .phpbb .layout-left, .phpbb .layout-right {
      width: 200px;
      max-width: 200px;
    }
and split it into two parts:

Code:
    /* Left side bar */
    .phpbb .layout-left {
      width: 200px;
      max-width: 200px;
    }
    /* Right side bar */
    .phpbb .layout-right {
      width: 200px;
      max-width: 200px;
    }
then change width and max-width for side bar that you want to edit.

Save file, upload it on server, refresh page.

Make sure option "recompile stale style components" in load settings (acp -> load settings) is enabled.

Problems

If after editing template files you do not see changes, go to admin control panel and click "purge cache" button on admin control panel's main page.

If after editing template files your header is messed up, you most likely have used incorrect editor that messed up code. Use only simple text editors to edit template files, such as Notepad or TextEdit. Do not use FrontPage, Expression or Dreamweaver unless you know how to use them.

If you have any questions or ran into problems, please post your questions on support forum.