Using custom variables to make an active navigation tab indicator in phpBB
by teebling • 9th December 2018
phpBB lets you define 'custom template variables'. These allow you to 'tag' a page with a custom variable and then reference that page in a different place under conditionals. These vars can be adapted to many different uses.
A good example of using custom template variables is creating an 'active page indicator' in your navigation bar - a small graphic (or image, text, style, or whatever you want really) - that changes position depending on what template page is being requested by phpBB.
Let's start with a very simple navigation bar that has three links, and is coded into my overall_header.html file:
Code: Select all
<ul>
<li><a href="index.php">Home Page</a></li>
<li><a href="ucp.php">Control Panel</a></li>
<li><a href="ucp.php?mode=login">Log in</a></li>
</ul>
- When the user is on the Home Page, I want to show a little arrow underneath the 'Home Page' link
- The little arrow image is just a plain old <img src="arrow.png"> HTML string, for simplicity's sake
- When the user then goes to another page, for example, Log in, I want the arrow to appear under that link instead
As we know, each of these PHP pages has a different HTML template file within phpBB:
Home Page = index_body.html
User Control Panel = ucp_main_front.html
Log in = login_body.html
I can tell that arrow to move position by using custom template variables like so:
1. Give each template file a custom variable
At the very top of each of the documents (must be the very first line of code), insert the following, changing the name of the variable to whatever you want. For example, here's a snippet of my file ucp_main_front.html. At the very top, on line no.1, is my custom variable, which I have named 'ucpvar'.
Code: Select all
<!-- DEFINE $CUSTOM_VARIABLE = 'ucpvar' --> 2. Use the custom variable within a conditional
Now that each variable exists in the phpBB ether, you can use each one with a conditional in your overall_header.html file. Let's do the control panel link first, since I showed you in the example above how to give it a custom variable.
We will code in a conditional so that IF the user is on the home page, the arrow image will be loaded, ELSE the arrow image will not be loaded:
Code: Select all
<ul>
<li><a href="index.php"><!-- IF $CUSTOM_VARIABLE == 'ucpvar' --><img src="arrow.png"><!-- ELSE --><!-- ENDIF --> User Control Panel</a></li>
</ul>
3. And that's it! Finished
Repeat the process for your other links until you have a working active indicator for each one.
Alternative methods and other uses
Remember we can call the variable within any conditional, on any page, and anywhere within the HTML - that means we can do more than just show or not show an image. For example below I am changing what CSS class the element has depending on whether the user is on the custom variable page:
Code: Select all
<h1 class="<!-- IF $CUSTOM_VARIABLE == 'customvar' --> hidden<!-- ELSE --> shown<!-- ENDIF -->">Hello world!</h1>
Or adding it to a combined conditional:
Code: Select all
<!-- IF FORUM_ID eq '4' or $CUSTOM_VARIABLE == 'customvar' -->The user must be in forum with the ID '4' or must be viewing a template file with the custom template variable 'customvar' defined at it's top for this text to display<!-- ELSE -->The user isn't in the right place so I will display this text instead.<!-- ENDIF -->
Custom variables are great for adding extra styling to specific pages where phpBB has no other way of knowing whether the user is in that place on the site. For example, I could always just use a standard phpBB template variable within a conditional like this...
Code: Select all
<!-- IF S_IN_UCP --><!-- ELSE --><!-- ENDIF -->...to do exactly the same thing (if the user is in the control panel, display this, else, don't display anything).
However! There are many different sub-sections within the UCP - private messages, posting preferences, avatar settings, signature edit, etc. If I used the standard variable I wouldn't be able to distinguish between these - it would just think 'oh ok, the user is still in the UCP'.
With custom variables on the other hand, I have a much greater choice - I can set a custom variable for each of those UCP subsection's template, and then call them all in separate conditionals if I wanted to.
This is much more powerful than what standard variables, which are fixed to one .php file, mode, or 'area' of phpBB and cannot be changed.
-
Flerex • alexensuals • Kaladin
Admin • Bug reports • Avatar requests
