Hi, and Happy New Year!

I’m really pleased to announce the release of the dark prosilver imageset. Designed for use in dark prosilver styles, it’s now available for anyone (literally, users, style authors, your dog…?) to download and use.

The last half of 2012 was pretty busy for me with custom styles , though I finally came across a couple of free days this weekend to knock these out. I love designing dark styles, but the icons are always a nightmare. I figured since I was making them anyway, there would be no harm releasing them to the phpBB Community for other people to use in their styles.

To download, click the big pink “download” button above. I’ve chucked in some example screenshots below.

Enjoy!!

What we’re trying to achieve

In phpBB each topic is a certain type. In addition to your standard topics, some may have a special purpose or require some emphasis. The topic types are: Standard, Sticky, Announcement, Locked, Moved and Poll. phpBB uses a different icon from the imageset to differentiate between these topic types, however I like to use as few different icons as possible. This short snippet adds a pretty text-based topic type prefix before the topic title, to quickly emphasise the different topic type.

Step 1) HTML Edits

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

Find:

Before, Add:

Step 2) CSS Edits

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

Add this to the bottom of the file:

Finishing Touches

If you’re really pedantic like me, you’ll probably want to remove the colon following the topic type. Follow the instructions below to achieve this.

Open: /language/en/common.php

Find:

Replace with:

Finishing off

Since this doesn’t use any hard coded text or images, it will work regardless of the language set on your forum. If you’d prefer the topic types to have a gradient background, uncomment the marked block of CSS in step 2 above. There is an awesome CSS3 gradient generator if your style is dark or a colour other than the default prosilver blue.

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

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.

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:

Below, Add:

Find:

After, Add:

Find:

After, Add:

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:

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:

Below, Add:

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:

Below, Add:

Find:

After, Add:

Find and delete:

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:

Replace with:

Find:

Replace with:

Below that, Add:

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

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:

Below, Add:

Notice at very top of page

Find:

Below, Add:

Notice below header

Find:

Before, Add:

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:

Below, Add:

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:

Below, Add:

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:

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

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:

Below, Add:

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:

Before, Add:

Find:

Below, Add:

Find:

Before, Add:

Find:

Below, Add:

Find:

Below, Add:

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:

Below, Add:

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:

Below, Add:

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:

Below, Add:

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

Find:

Before, Add:

Find:

Replace with:

Find:

Before, Add:

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:

Below, Add:

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:

Before, Add:

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:

Then, add the following code to the bottom of /styles/prosilver/theme/common.css:

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:

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:

Replace with:

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:

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:

Below, Add:

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.