Well of Stars

Skinning a Tagboard

If you really want everything on your site to match, it is possible to skin (at least some) php tagboards. This tutorial refers to the 'txtShout' box which can be downloaded from txtbox.co.za. It's fully customisable, and you can even use different smilies on different skins if you want to ;) I'm not sure whether mine is the most efficient method of skinning it, but I've found that it works for me...

TxtShout comes with installation instructions, so I'm not going to go through those here. But this is what you need to change to skin it:

Preparing the skins

First, you need to create a 'skins' folder within the 'txtshout' folder, and within that one folder for each skin, numbered 1,2,3 etc - just like your main skins folder.

Next you need to customise your tagboard for each skin. The appearance of the tagboard (background colours, text etc) can be customised by editing 'shoutstyle.css'. You need to create a copy of this file for each of your skins, and save it in the relevant folder within the new 'skins' folder. Keep the name 'shoutstyle.css' for all of them. If you want to customise your smilies, you also need to create a 'smilies' folder for each skin, containing the smilies you want to use for that skin. Create these folders within the numbered folders inside 'skins'. You may be able to find different colour smiley sets online, or you can recolour your smilies yourself (I used Paint Shop Pro, and Animation Shop for the animated ones...)

Your txtshout folder will now look something like this:

folder txtshout
folder skins
folder 1
folder smilies
 file shoutstyle.css
folder 2
folder smilies
 file shoutstyle.css
file config.inc.php
file convert.php
file functions.inc.php
etc

Editing txtshout files

You will also need to edit some of the files that come with txtshout. There are several files where you need to add the include for your cookies.php file: at the very top of 'config.inc.php', 'index.php' and 'shout.php', add:

<? include ($_SERVER['DOCUMENT_ROOT']."/skins/cookies.php"); ?>

Next, in 'config.inc.php' scroll down until you find the following:

// Stylesheet to use for message iframe.

$cfg['stylesheet'] = 'shoutstyle.css';

Replace the second line with:

@ require_once($shoutvar.$extension);

If you want to use different sets of smilies, scroll down to the end, until you reach:

// Path to smilies. Check smilies.inc.php for smilie code-file
// assignments.

$cfg['smilies'] = 'smilies'

Replace the last line with:

@ require_once($smilievar.$extension);

Editing the cookies.php

Next, you need to go back to the main 'skins' folder for your site. First, you need to add some lines to your 'cookies.php' file. Near the end, after you have $headervar = etc and $footervar = etc, add:

$shoutvar = "$_SERVER['DOCUMENT_ROOT']."/skins/$newskin/shoutstyle";
$smilievar = "$_SERVER['DOCUMENT_ROOT']."/skins/$newskin/smiliestyle";

Leave out the second line ($smilievar) if you aren't skinning your smilies. Don't forget to change the file paths if you need to ;)

Shoutstyle.php and smiliestyle.php

Now you need to create two new files 'shoutstyle.php' and 'smiliestyle.php' for each skin. (Again, if you're not skinning smilies, you can ignore anything to do with 'smiliestyle.php'). Save these in relevant folders ('1', '2' etc) within your main 'skins' folder (NOT the new 'skins' folder inside 'txtshout'). For each skin create a blank file named 'shoutstyle.php', and past in:

<? $cfg['stylesheet'] = 'skins/1/shoutstyle.css'; ?>

For each skin, change the number of the folder to the correct number for that skin. In the same way, create a blank file named 'smiliestyle.php', and paste in:

<? $cfg['smilies'] = 'skins/1/smilies'; ?>

This defines the path to the relevant smilies folder. Again, change the number of the folder to match the number of each skin.

Editing the tag board code

Finally, you need to make some changes to the code on the page where your tagboard will be displayed on your site. The reason for doing this is that I have sometimes found that without it, if I try to change skins on a site after visiting the tagboard, the new skin doesn't 'stick'. Within this code, (inside the code for the table where txtshout will appear), there are two references to txtshout/index.php and one to txtshout/shout.php. Immediately after each of these, paste:

<? echo "?newskin=$newskin" ?>

This part of your code will then look something like this:

<iframe frameborder="0" name="shoutframe" src="txtshout/index.php<? echo "?newskin=$newskin" ?>" marginheight="2" marginwidth="2" width="180" height="200" scrolling="yes" allowtransparency="yes"></iframe> </tr><tr><td>[<a href="txtshout/index.php<? echo "?newskin=$newskin" ?>" target="shoutframe">refresh</a>]</td>
...
<form name="shoutform" action="txtshout/shout.php<? echo "?newskin=$newskin" ?>" method="post" target="shoutframe">

You should now have a skinned tagboard :)

Back to contents