switcher

jQuery stylesheet switcher for phpBB

On 05.10.11, In phpBB3 Tutorials, by

Ever wanted to allow your members to each choose from one of multiple colour schemes or backgrounds? This tutorial will teach you how to add a jQuery powered stylesheet switcher to your phpBB forum.

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.

stylesheet-switcher.zip

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>
<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.