Absolution has been overhauled and updated, and is now compatible with phpBB 3.0.10. The update has significantly de-cluttered the original Absolution style, as well as adding some fresh appearance and increased usability. There are a number of changes I’d still like to make to the style before it’s fully “complete”, however I’m sufficiently happy with it at the moment to release.

Where to download

Currently, the only place to download the updated version is here . You can also download it by clicking the big pink button above.

I am currently waiting for phpBB.com, phpbb3styles.net and awesomestyles.com to update their hosted versions of the style.

How do I update?

Given the huge amount of changes, there is no update file. The only way to update the style would be to overwrite your current Absolution style and refresh Absolution’s imageset, theme and template in the ACP’s “Styles” tab. This is a far from ideal situation for those with a large number of MODs, however there was little that could be done to avoid this.

Support

Support can be obtained by emailing me through the contact page. Due to the large volume of emails I receive I cannot guarantee a reply, though I will do my best to reply to most problems.

Enjoy.

For those who use either style and have already updated their boards to 3.0.9, update instructions can be downloaded from here: http://download.phpbb.com/pub/release/3.0/update/to_3.0.9/phpBB-3.0.8_to_3.0.9-codechanges.zip – Both styles are based on “Prosilver”, those are the instuctions you may follow.

Please accept my apologies for the inconvenience this may cause.

What we’re trying to achieve

User customisation is becoming more and more popular in forum software. Things like collapsible categories, collapsible sidebars, customisable backgrounds, choice of colour scheme are all things that nobody could really imagine would have existed in styles 5 years ago. Now they play a huge part in separating the best styles from the rest. This tutorial will teach you how to add a jQuery stylesheet switcher to your forum, allowing your users to choose between different colour schemes.

Preparation

You’ll need a decent Source code editor to complete this tutorial. You should also download the stylesheet-switcher.zip archive and then:

Copy: /stylesheet-switcher/jquery.cookie.js to /styles/prosilver/template/
Copy: /stylesheet-switcher/blank.css to /styles/prosilver/theme/
Copy: /stylesheet-switcher/colours to /styles/prosilver/theme/

Step 1) HTML Edits

Firstly we need to connect to jQuery and the cookie plugin. Next we’ll be adding the blank stylesheet connection (used to override the default style’s style information). Finally all we need to do here is add the links that the end user will use to change between the stylesheets.

Open: /styles/prosilver/template/overall_header.html

Find:

<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

Below, Add:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- If the above line is already present, don't add it again -->
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.cookie.js"></script>

Find:

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->

After, Add:

<link rel="stylesheet" href="{T_THEME_PATH}/blank.css" type="text/css" class="colour-switcher" />

Find:

<a name="start_here"></a>

After, Add:

    <br /><br />

    <div class="navbar">
    	<div class="inner"><span class="corners-top"><span></span></span>
        	<ul class="linklist rightside">
            	<li><strong>Colour:</strong></li>
            	<li><a href="#" rel="{T_THEME_PATH}/colours/red.css" class="switch">Red</a> &bull; </li>
                <li><a href="#" rel="{T_THEME_PATH}/colours/green.css" class="switch">Green</a> &bull; </li>
                <li><a href="#" rel="{T_THEME_PATH}/colours/yellow.css" class="switch">Yellow</a> &bull; </li>
                <li><a href="#" rel="{T_STYLESHEET_LINK}" class="switch">Default</a></li>
            </ul>
        <span class="corners-bottom"><span></span></span></div>
    </div>

Pay attention to the rel=”" attribute of each <a> tag. The stylesheet linked here will populate a blank stylesheet called after phpBB’s, therefore overwriting the default style information. We also add a “default” link which links to the default style’s CSS. It will essentially define the same stylesheet twice, but is a lot more graceful than writing a blank cookie over the user’s colour choice and then forcibly refreshing the page.

Step 2) CSS Edits

This step is largely down to yourselves and what you want to do with the script. Those of you well versed in CSS will know exactly how to override CSS information, if you’re not familiar with CSS then this probably isn’t for you.

Here we are going to take a really basic look at green.css:

/* Green stylesheet. Override everything here.
This is called after phpBB's stylesheet, so !important shouldn't be required in most cases */

html, body {
	background-color: #009900;
}

When this stylesheet is activated, the colour #009900 will override prosilver’s default white. Instead of using colours it is possible to add any style information to change element. For example, you could override the forabg and forumbg to re-colour the category / forum borders. You could override .headerbar to change the blue header, or even just give your users a choice of different background images instead of colours.

Step 3) The jQuery

This is where all the magic happens. It should be straight forward to understand reading through the code.

Open: /styles/prosilver/template/overall_header.html

Find:

<link rel="stylesheet" href="{T_THEME_PATH}/blank.css" type="text/css" class="colour-switcher" />

Below, Add:

<script type="text/javascript">
      if($.cookie("colour-choice")) {
         $("link.colour-switcher").attr("href",$.cookie("colour-choice"));
      }
   $(document).ready(function() {
      $("a.switch").click(function() {
         $("link.colour-switcher").attr("href",$(this).attr('rel'));
         $.cookie("colour-choice",$(this).attr('rel'), {expires: 365, path: '/'});
         return false;
      });
   });
</script>

Assuming you’ve done everything correctly, you should now be able to change between colours on your style by clicking the different coloured links.

Finishing off

It’s important to know that if you’re an Administrator, your chosen colour will not carry over into the “password confirmation screen” when trying to log into the Administration Control Panel. This is because the cookie the script writes your preference to is in one directory, whereas the ACP (and authentication) is in another directory entirely.

If you found this tutorial useful, please consider donating. If you have any serious problems, let me know in the comments below. Enjoy.

What we’re trying to achieve

Quite simply we’re going to learn how to add a “Moderator” column to the index page, after the “last post” column . If the Administrator has set forum-specific moderators they will be displayed next to their respective forums.

Preparation

To complete this tutorial, you’ll need a decent Source Code Editor.

Step 1) HTML Edits

Here we’re simply placing the code and the necessary IF statements. We’ll also remove the old “Moderators:” display from below the forum description. It won’t look quite right until we add the CSS later.

Open: /styles/prosilver/template/forumlist_body.html

Find:

<dd class="posts">{L_POSTS}</dd>

Below, Add:

<dd class="moderators">{L_MODERATORS}</dd>

Find:

<dd class="posts">{forumrow.POSTS} <dfn>{L_POSTS}</dfn></dd>

After, Add:

<dd class="moderators"><!-- IF forumrow.MODERATORS -->{forumrow.MODERATORS}<!-- ELSE -->--<!-- ENDIF --></dd>

Find and delete:

<!-- IF forumrow.MODERATORS -->
	<br /><strong>{forumrow.L_MODERATOR_STR}:</strong> {forumrow.MODERATORS}
<!-- ENDIF -->

Step 2) CSS Edits

At this point your index page should be looking pretty messy. We need to cut down the width of the topiclist <dt> tag (and some of the “last post” column) to accommodate the width of the Moderator column, then add some styling rules for the moderator column.

Open: /styles/prosilver/theme/content.css

Find:

ul.topiclist dt {
	display: block;
	float: left;
	width: 50%;
	font-size: 1.1em;
	padding-left: 5px;
	padding-right: 5px;
}

Replace with:

ul.topiclist dt {
	display: block;
	float: left;
	width: 40%;
	font-size: 1.1em;
	padding-left: 5px;
	padding-right: 5px;
}

Find:

dd.lastpost {
	width: 25%;
	font-size: 1.1em;
}

Replace with:

dd.lastpost {
	width: 20%;
	font-size: 1.1em;
}

Below that, Add:

dd.moderators {
	width: 15%;
	font-size: 1.1em;
	text-align: center;
	line-height: 2.2em;
}

Finishing off

What you should now see is a Moderator column on the index page (and on viewforum.php if you have subforums). If the Administrator hasn’t assigned any forum-specific Moderators, two dashes “–” will be displayed instead. To set forum-specific Moderators, click: ACP → “Permissions” tab → Forum Moderators, then choose your forums and add users using the bottom-left box. Also make sure “Enable display of moderators:” is enabled in ACP → Load Settings.

Support / Donations

If you find a mistake in this tutorial, please let me know. Did you find this tutorial useful? Make a donation. If you’re having trouble implementing this on your board, ask for help. Thanks!

What we’re trying to achieve

Recently Facebook added a prompt in the upper-right of Firefox browsers prompting them to make Facebook the homepage by dragging an icon over the home button. Using some Firefox specific CSS and jQuery we’ll learn how to add said feature to a phpBB3 forum.

Preparation

To complete this tutorial you’ll need a decent Source Code Editor. You also need to download the ff4-home-prompt.zip archive by clicking the button above. Then:

Copy: /ff4-home-prompt/arrow.png to /styles/prosilver/theme/images/
Copy: /ff4-home-prompt/icon.png to /styles/prosilver/theme/images/
Copy: /ff4-home-prompt/tip.png to /styles/prosilver/theme/images/
Copy: /ff4-home-prompt/jquery.cookie.js to /styles/prosilver/template/

Step 1) HTML Edits

Firstly we need to connect to jQuery. Then place our code.

Open: /styles/prosilver/template/overall_header.html

Find:

<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

After, Add:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- If the above line is already present, don't add it again) -->
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.cookie.js"></script>

Find:

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

Below, Add:

<div class="hp-container">
	<div class="hp-tip"></div>
    <div class="hp-inner">
    	<div class="hp-content">
        	<a href="http://www.yoursite.com" class="hp-icon"><img src="{T_THEME_PATH}/images/icon.png" width="32" height="32" alt="" /></a>
        	<strong>Make us your Homepage!</strong>
            <br /><span>&larr; Drag the icon over your Home button</span>
        </div>
        <div class="hp-links">
        	<a href="#" class="noshow">Don't show again</a> | <a href="#" class="close">No thanks</a>
        </div>
    </div>
</div>

Note: Replace http://www.yoursite.com with the link to your forum’s index page.

Step 2) CSS Edits

Here are the basic styling rules, as well as a Firefox specific rule to only show the prompt in Firefox.

Open: /styles/prosilver/theme/common.css

Find:

.clear {
	display: block;
	clear: both;
	font-size: 1px;
	line-height: 1px;
	background: transparent;
}

Below, Add:

.hp-container {
	width: 301px;
	height: 103px;
	background-color: rgba(39,107,178,0.4);
	position: absolute;
	top: 0;
	right: 30px;
	z-index: 9999;
	display: none; /* hide from non FF browsers */
}

.hp-tip {
	width: 301px;
	height: 10px;
	background: url("{T_THEME_PATH}/images/tip.png") no-repeat left top;
}

.hp-inner {
	background-color: #eaf5ff;
	margin: 5px;
	padding: 5px;
	height: 73px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
}

.hp-content {
	background: url("{T_THEME_PATH}/images/arrow.png") no-repeat right top #e0effd;
	border: 1px solid #9bcfff;
	height: 26px;
	padding: 10px;
}

.hp-content strong {
	color: #0c233b;
}

.hp-content span {
	font-size: 11px;
	color: #364c62;
}

.hp-icon {
	float: left;
	margin: -2px 6px 0 -4px;
}

.hp-links {
	color: #1d4e82;
	text-align: right;
	height: 18px;
	margin-top: 7px;
}

.hp-links a {
	color: #276bb2;
}

.hp-links a:hover {
	color: #3080d3;
}

/* Display to Firefox only */
@-moz-document url-prefix(http://www.yoursite.com/)
{
  .hp-container {display: block;}
}

Important: Make sure you replace http://www.yoursite.com with your domain on the following line:

@-moz-document url-prefix(http://www.yoursite.com/)

If using localhost, use http://localhost/

Step 3) The jQuery

A basic function to fade the message out when the “No thanks” link is clicked. Add a cookie to stop the message showing “Don’t show this again” link is clicked.

Open: /styles/prosilver/template/overall_header.html

Find:

<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.cookie.js"></script>

After, Add:

<script type="text/javascript">
$(document).ready(function(){
	$("a.close").click(function(){
		$(".hp-container").fadeOut();
	});
	$("a.noshow").click(function(){
		$(".hp-container").fadeOut();
		$.cookie("hp-state","noshow", {expires: 30, path: '/'});
	});

	var hpState = $.cookie("hp-state");

	if(hpState == 'noshow') {
		$(".hp-container").hide();
	};
	return false;
});
</script>

Cookies will expire after 1 month (30 days), at which point the user would need to click the “Don’t show again” link.

Support / Donations

Since this is quite a sensative script, support (if required) can be obtained over on the Support Forum. If you use this script and like it, please consider making a donation. Finally if you find a mistake, contact me and let me know. Thanks!

What we’re trying to achieve

Simple notices in your header. As a board Admin at some point you’ve probably had to inform your users of something fairly important such as: Scheduled Maintenance, a change to your forum rules or default time zone change. Sometimes a full-on announcement isn’t appropriate, instead you can use a coloured message in the header of your site to draw your members’ attention. Supported by cookies, messages won’t re-appear when they are closed. Thanks to Unknown Bliss for inspiring me to make this into a tutorial.

Preparation

To complete this tutorial you’ll need a decent Source Code editor. Secondly, you need to download the global-notices.zip archive by clicking the “download” button above. Then:

Copy: /global-notices/blue-cross.gif   to   /phpBB/styles/prosilver/theme/images/
Copy: /global-notices/green-cross.gif   to   /phpBB/styles/prosilver/theme/images/
Copy: /global-notices/red-cross.gif   to   /phpBB/styles/prosilver/theme/images/
Copy: /global-notices/yellow-cross.gif   to   /phpBB/styles/prosilver/theme/images/
Copy: /global-notices/jquery.cookie.js   to   /phpBB/styles/prosilver/template/

Step 1) HTML Edits

So first up we need to connect to jQuery, the cookie plugin and then place the notice.

Open: /styles/prosilver/template/overall_header.html

Find:

<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

Below, Add:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- If the above line is already present, don't add it again -->
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.cookie.js"></script>

Notice at very top of page

Find:

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

Below, Add:

<div class="global-notice notice-top green">
	<strong>Notice:</strong> Scheduled Maintenance at 15:00 UTC.
    <a class="cross" href="#">Close</a>
</div>

Notice below header

Find:

<a name="start_here"></a>

Before, Add:

<br />
<div class="global-notice green">
	We're going in! See you on the other side.
    <a class="cross" href="#">Close</a>
</div>

Step 2) CSS Edits

Just some basic styling rules, accommodating 4 colour schemes by default. If you have some basic CSS knowledge you’ll be able to add your own colours.

Open: /styles/prosilver/theme/colours.css

Find:

input.disabled {
	color: #666666;
}

Below, Add:

.global-notice {
	padding: 12px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	font-weight: bold;
	margin-bottom: 10px;
	border: 1px solid;
	-moz-box-shadow: inset 0 -1px #FFFFFF;
}

.global-notice strong {
	color: #000000;
}

.notice-top {
	border-top: none;
	border-left: none;
	border-right: none;
	margin-top: -12px;
}

.blue {
	background-color: #e5f4ff;
	border-color: #a7cee2;
	color: #004b90;
}

.red {
	background-color: #ffe5e5;
	border-color: #e2a8a8;
	color: #900000;
}

.green {
	background-color: #e4ffdf;
	border-color: #b8dfb8;
	color: #3a6e31;
}

.yellow {
	background-color: #fdffe5;
	border-color: #dfe2a7;
	color: #678801;
}

.cross {
	float: right;
	width: 12px;
	height: 12px;
	background: no-repeat 50% bottom;
	text-indent: -9999px;
	display: block;
	outline: none;
}

.blue .cross {
	background-image: url("{T_THEME_PATH}/images/blue-cross.gif");
}

.red .cross {
	background-image: url("{T_THEME_PATH}/images/red-cross.gif");
}

.green .cross {
	background-image: url("{T_THEME_PATH}/images/green-cross.gif");
}

.yellow .cross {
	background-image: url("{T_THEME_PATH}/images/yellow-cross.gif");
}

Step 3) The jQuery

Here we make the message fade out when the cross is clicked, and make sure it doesn’t show up again when the page is refreshed.

Open: /styles/prosilver/template/overall_header.html

Find:

<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.cookie.js"></script>

Below, Add:

<script type="text/javascript">
$(document).ready(function() {
	$("a.cross").click(function() {
		$(".global-notice").fadeOut();
		$.cookie('noticeState', 'hidden', { expires: 3, path: '/'});
	});

	var noticeState = $.cookie('noticeState');

	if(noticeState == 'hidden') {
		$(".global-notice").hide();
	};
});
</script>

Important Information

This script is meant to be simple, and as such can only be used once per page. The only way you can display more than one message (without them both fading out when you click a cross) is to disable the cross by remove the link from the code. As this is intended to be a temporary message, the cookie is set to expire after 3 days. This is configurable by editing this line in overall_header.html:

$.cookie('noticeState', 'hidden', { expires: 3, path: '/'});

With regard to choosing between colours, that’s simple. The line that calls chosen colour is also in overall_header.html:

<div class="global-notice notice-top green">

Here you would simply replace green with red, yellow or blue.

Support / Donations

If you encounter any problems implementing this script, support is freely available over on the Support Forum. If you have found this script useful please consider making a donation. Finally if you find a mistake let me know here. Cheers.

As an end user of many large boards, I find a lot of the time most of the content is of little interest to me. By using “collapsible categories”, the end user is able to essentially “minimise” the categories they don’t want to have displayed, making it easy to navigate to the ones they do. This script is also supported by cookies, meaning the user’s preference is stored and remembered for next time they visit the site.

Preparation

To complete this tutorial, you’ll need to use a decent Source code editor. Additionally, you need to download the collapsible-categories.zip archive by clicking the download button above. Then:

Copy: /collapsible-categories/collapse-icon.png to /phpBB/styles/prosilver/theme/images/
Copy: /collapsible-categories/jquery.cookie.js to /phpBB/styles/prosilver/template/
Copy: /collapsible-categories/jquery.collapse.js to /phpBB/styles/prosilver/template/

I’d like to thank Klaus Hartl and Daniel Stocks for the jQuery Cookie and jQuery collapse plugins (respectively) used in this tutorial.

Step 1) HTML Edits

First up, we need to connect to jQuery and the two plugins we copied over in the previous step.

Open: /styles/prosilver/template/overall_header.html

Find:

<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

Below, Add:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- If the above line is already present, don't add it again -->
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.cookie.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.collapse.js"></script>

Now we need to add a container to the forumlist for the jQuery to reference, as well as containers around the content we want collapsing. Finally we’ll be adding the plus/minus icon used to trigger the script. We’ll add the actual jQuery later.

Open: /styles/prosilver/template/forumlist_body.html

Find:

<!-- BEGIN forumrow -->

Before, Add:

<div class="forumlist">

Find:

		<!-- IF (forumrow.S_IS_CAT and not forumrow.S_FIRST_ROW) or forumrow.S_NO_CAT  -->
			</ul>

Below, Add:

</div>

Find:

<ul class="topiclist forums">

Before, Add:

			<!-- IF SCRIPT_NAME eq 'index' --><div class="trigger active"></div><!-- ENDIF -->
			<div class="collapsethis">

Find:

	<!-- IF forumrow.S_LAST_ROW -->
			</ul>

Below, Add:

</div>

Find:

<!-- END forumrow -->

Below, Add:

</div>

Step 2) CSS Edits

The only CSS this script uses is to display / style the trigger icon. All of the showing / hiding is done through the jQuery.

Open: /styles/prosilver/theme/common.css

Find:

.clear {
	display: block;
	clear: both;
	font-size: 1px;
	line-height: 1px;
	background: transparent;
}

Below, Add:

.trigger {
	background: url("{T_THEME_PATH}/images/collapse-icon.png") no-repeat;
	width: 32px;
	height: 17px;
	cursor: pointer;
	float: right;
	position: relative;
	z-index: 9998;
	margin-top: -21px;
}

.active {background-position: left top;}
.inactive {background-position: left bottom;}

Step 3) The jQuery

Now we’ll add the jQuery. Most of the functionality takes place in the collapse.js file, though we still need to add some inline JavaScript to execute it when the collapse icon is clicked.

Open: /styles/prosilver/template/forumlist_body.html

Find:

<!-- END forumrow -->
</div>

Below, Add:

<script type="text/javascript">
            $(".forumlist").collapse({show: function(){
                    this.animate({
                        opacity: 'toggle',
                        height: 'toggle'
                    }, 300);
                },
                hide : function() {

                    this.animate({
                        opacity: 'toggle',
                        height: 'toggle'
                    }, 300);
                }
            });
        </script>

And that’s it! If everything has gone correctly then you’ll now have a nice pretty collapse icon on each category which, when clicked, slides away the content until such point as the end user chooses to display it again.

Support / Donations

If something didn’t go as you planned, let me know on the Support Forum. If you love this script, please consider liking it, tweeting it or making a donation. Finally, if you think I’ve missed something or there’s a bug in the tutorial get in touch and let me know. Thanks!

What we’re trying to achieve

As a regular forum user, what really annoys me is breaking the signature character limit…but not being told about until after I’ve spent 5 minutes formatting everything. This script will add a live character counter above the signature text box keeping the user informed of exactly how many characters they have left. Once the user reaches the maximum amount of characters, they won’t be able to enter any more into the text box. Thanks go to Remy Sharp for the jQuery functionality.

Preparation

To complete this tutorial, you’ll need a decent source code editor. You also need to download jquery.maxlength.js by clicking the download button above and extracting the zip file. Then perform the following file copy instructions:

• Copy: siglimit/jquery.maxlength.js to /phpBB/styles/prosilver/template/

The HTML Edits

First of all we need to add the message telling users how many characters they have left. We’ll then add a custom class to the textarea so the jQuery can reference it, and finally we’ll add some inline jQuery to power our counter. But firstly, we need to connect to jQuery and our max length script.

Open: /styles/prosilver/template/overall_header.html

Find:
{code type=html}{/code}
Below, Add:
{code type=html}{/code}
Note: If this line is already in your overall_header.html file (from a previous tutorial), you shouldn’t add it again.

Below that, Add:
{code type=html}{/code}

Open: /styles/prosilver/template/posting_editor.html

Find:
{code type=html}{/code}
Before, Add:
{code type=html}

Characters remaining: {L_SIGNATURE_LIMIT}

{/code}
Find:
{code type=html}

{/code}
Replace with:
{code type=html}

{/code}
Find:
{code type=html}{/code}
Before, Add:
{code type=html}

{/code}

Some PHP Edits

So you’ve probably noticed I’ve used a template variable {L_SIGNATURE_LIMIT}, which don’t exist by default in phpBB. We’re going to create it here. Doing this allows the script to use the “Maximum Signature Length” value defined in the Administration Control Panel, rather than having to hard-code a character limit value into the template file.

Open: /includes/ucp/ucp_profile.php

Find:
{code type=php}’L_SIGNATURE_EXPLAIN’ => sprintf($user->lang['SIGNATURE_EXPLAIN'], $config['max_sig_chars']),{/code}
Below, Add:
{code type=php}’L_SIGNATURE_LIMIT’ => $config['max_sig_chars'],{/code}

And that’s about it!

Support / Donations

If you encounter any problems implementing this on your board, support is freely available here. If you’d like to leave me a donation for the time spent testing the script and writing the tutorial you can do so here. And finally if you think I’ve missed something you can let me know here. Marvellous.

What we’re trying to achieve

“How can I place a banner ad right below my first category?” I hear you ask. This is one of the more requested “how-to’s” on the phpBB Support Forum, and this is what I’ll be writing about today. With some really basic template edits we’ll be placing blocks of code between our categories on the index page.

Preparation

To complete this tutorial, you’ll need a decent source code editor. It’s also important that you read the whole tutorial, and not skip straight to the images.

Step 1) Finding the Forum ID’s

Before we can start placing our code, you need to choose where you want to put it, or in other words you need to chose which two categories you want the code to appear between. You need to find the forum ID of the forum below where you want to display your code. Here’s an example:

So, because we want to add code above “Normal category 2″, that’s the forum ID we need to find – we’ll actually be using the forum ID in the next steps. To find a Forum ID hover over a forum name and look at the end of the target URL (normally displays in the bottom-left of your web browser. The forum ID is the number that appears after viewforum.php?f=.

The example above shows us that “Normal Category 2″‘s forum ID is 3. We need to remember this for the next step.

Step 2) Placing the code

Now that we know where we want to place the code, we need to add it. We’ll be using a really simple ‘IF statement’ in the template file to only show the code where we want it.

Open: /styles/prosilver/template/forumlist_body.html

Find:
{code type=html}{/code}
Before, Add:
{code type=html}
Your code here
{/code}

Excellent! So this IF statement is telling phpBB: “Only display this block of code if the forum ID is 3″. You can use any browser-readable code here (such as HTML, or your Google Adsense code for example). If you want to use more code between other categories, read on past the presentation step.

Step 3) Making it look pretty

If you insert code as-is between inside the IF statement, sure it will work but it won’t look too pretty. We can use the following code inside the IF statement that will match your forum’s style:

{code type=html}

{/code}

Then, add the following code to the bottom of /styles/prosilver/theme/common.css:
{code type=css}li.customblock {
padding: 5px;
font-size: 1.2em;
text-align: center; /* Optional */
}{/code}

And the final result!

Optional: Using ‘ELSEIF’ to put more code between other categories

When explaining these steps to people, one of the most often asked questions is “How do I add another block of code between other categories?”. Sure, you can use the same IF-statement as above, paste it again and change the forum ID, but I don’t think this is a particularly pretty or elegant solution. Instead, we can use a chain of ‘ELSEIF’s. The process for finding forum ID’s is the same as above, but instead of using one IF statement we can use something like this:

{code type=html}
code to go above Forum ID 1

code to go above forum ID 3

code to go above forum ID 55
{/code}
So what this is telling phpBB is: “If the forum ID is 1, show this piece of code. If it’s not 1, move on…and if it’s 3 display this piece of code. If it’s not 3, move on…and if it’s 55, display this block of code”. There is no limit to the amount of ELSEIFs you can include in the chain. phpBB won’t show the code if it’s in an IF statement for a Forum ID that doesn’t exist. For example, in the code example directly above I make reference to forum ID 55 (which doesn’t exist on my demo board). Therefore, the “code to go above forum ID 55″ was not displayed.

Support / Donations

If you have any problems using the code above, support is freely available on the Support Forum. If you have found the above guide useful and have implemented it on your board please consider making a donation. Finally, if you feel I have missed anything you can let me know here. Schweeeeeet.

MyBB has quite a smart display feature in the default style. When the “login” link in the header is clicked, rather than loading a whole new page to display a form, instead the login link disappears and a quick login form shows in its place. We’ll be achieving that effect in phpBB using jQuery.

Preparation

To complete this tutorial you’ll need a decent source code editor.

Step 1) HTML Edits

Firstly need to display the form in the header (which will later be hidden with CSS). We also need to add a unique class to the login link’s <a> tag so that the jQuery can reference it.

Open: /styles/prosilver/template/overall_header.html

Find:
{code type=html}

{/code}

Replace with:
{code type=html}

{/code}

Step 2) CSS Edits

There isn’t a whole lot we need to style, although we do need to hide the form when the page loads, and add some width values so that it all displays correctly.

Open: /styles/prosilver/theme/common.css

At the bottom of the file, Add:
{code type=css}form.quicklogin {
display: none;
}

form.quicklogin input.quickinput {
width: 100px;
}{/code}

Step 3) The jQuery

For those who don’t know, jQuery is a JavaScript library which makes it really easy to add fancy effects and features to web elements. Here we’ll be telling the browser to hide the link and display the form when the link is clicked.

Open: /styles/prosilver/template/overall_header.html

Find:
{code type=html}{/code}

Below, Add:
{code type=html}
{/code}

Support / Donations

If you have found this script useful, please consider making a donation. Support is freely available on the Support Forum. Finally, if you feel I’ve missed something you can let me know here. Awesome.