First step:
How to modify your parser.php file to allow for subscript [sub][/sub] and superscript [sup][/sup] tags:
Modify the following rows in your parser.php file:
1) while ($new_text = preg_replace('/\[(b|u|i|h|sub|sup|colou?r|quote|code|img|url|email|list)(?:\=[^\]]*)?\]\[\/\1\]/', '', $text))
Note: Basically I have added "sub" & "sup" code in all relevant places.
2) $tags = array('quote', 'code', 'b', 'i', 'u', 'sub', 'sup', 'color', 'colour', 'url', 'email', 'img', 'list', '*', 'h');
3) $tags_inline = array('b', 'i', 'u', 'sub', 'sup', 'color', 'colour', 'h');
4)
$tags_limit_bbcode = array(
'*' => array('b', 'i', 'u', 'sub', 'sup', 'color', 'colour', 'url', 'email', 'list', 'img'),
'list' => array('*'),
'url' => array('b', 'i', 'u', 'sub', 'sup', 'color', 'colour', 'img'),
'email' => array('b', 'i', 'u', 'sub', 'sup', 'color', 'colour', 'img'),
'img' => array()
);
// Tags we can automatically fix bad nesting
$tags_fix = array('quote', 'b', 'i', 'u', 'sub', 'sup', 'color', 'colour', 'url', 'email', 'h');
5)
$pattern[] = '#\[b\](.*?)\[/b\]#ms';
$pattern[] = '#\[i\](.*?)\[/i\]#ms';
$pattern[] = '#\[u\](.*?)\[/u\]#ms';
$pattern[] = '#\[sub\](.*?)\[/sub\]#ms';
$pattern[] = '#\[sup\](.*?)\[/sup\]#ms';
$pattern[] = '#\[colou?r=([a-zA-Z]{3,20}|\#[0-9a-fA-F]{6}|\#[0-9a-fA-F]{3})](.*?)\[/colou?r\]#ms';
$pattern[] = '#\[h\](.*?)\[/h\]#ms';
$replace[] = '<strong>$matches[1]</strong>';
$replace[] = '<em>$matches[1]</em>';
$replace[] = '<span class=\"bbu\">$matches[1]</span>';
$replace[] = '<sub>$matches[1]</sub>';
$replace[] = '<sup>$matches[1]</sup>';
$replace[] = '<span style=\"color: $matches[1]\">$matches[2]</span>';
$replace[] = '</p><h5>$matches[1]</h5><p>';
PS: All these changes are already done in my modified pun_bbcode extension which you can download in the first post.
If you do only the first step, you can start to use [sub] & [sup] tags in your message window, but you have to write them down manually. The second step will add a nice graphical [sub] & [sup] icons into your icon bar, so that you can use them the same way as other tags (B, I, U ... etc.).
Second step:
How to modify your .css files (+ sprite.png) to add the [sub] & [sup] icons to the icons bar:
My next step was to modify the look of pun_bbcode icons (the row "B, I, U, list ... img, color") above the message frame:
This was done by modifying the .css files (pun_bbcode.min.css & pun_bbcode.css) together with using a new icons image with added [sub] and [sup] signs (sprite2.png).
1)
...
#pun_bbcode_bar input[name="b"].image,
#pun_bbcode_bar input[name="i"].image,
#pun_bbcode_bar input[name="u"].image,
#pun_bbcode_bar input[name="sub"].image,
#pun_bbcode_bar input[name="sup"].image,
#pun_bbcode_bar input[name="list"].image,
...
#pun_bbcode_bar input[name="email"].image {
background: url(img/sprite2.png) 0 0 no-repeat
}
2)
...
#pun_bbcode_bar input[name="u"].image {
background-position: -261px 0
}
#pun_bbcode_bar input[name="sub"].image {
background-position: -313px 0
}
#pun_bbcode_bar input[name="sup"].image {
background-position: -338px 0
}
#pun_bbcode_bar input[name="list"].image {
background-position: -183px 0
}
...
PS: The "background-position" parameter determine which icon (in the "sprite2.png" image) will be used (= visible) for the tag.
You need to modify the sprite.png file also, which can be done in Photoshop (or similar image editor). Basically, you need to add another two icons at the end of the original sprite.png file. The original file is 312px wide (each icon needs 26px), so if you want to add two new icons - one for [sub] and one for [sup] - you need to add extra 52px. So you new sprite.png file should be 364px wide (312+26+26). This way you can theoretically add whatever HTML tag (probably [table], [tr], [td] also). But don't forget to modify the parser.php file accordingly.
I hope this helps in case you need to modify a different version of "parser.php" file.
