How to add more BBcode colors to your forum.

Warning!
this tutorial can only be used with Template Editing enabled forums.
Only PunBB and PHPBB2 have template editing thus far.


Notice!
This is a high risk tutorial, you have to be EXTRA careful when editing this region,
or you will loose the ability to post sticky topics and use signatures (yes it happened to me)


First step

Well it would be wise to prepare the hex codes of the colors you wish to add to your forum.
If you do not want to add hex colors you can always use a simplified BBcode replacement.
BBcode color replacements can be located here:
http://en.wikipedia.org/wiki/Hexadecimal_color#X11_color_names

Use the fancy table to find your favorite colors.

Second Step


Now that you have your favorite colors picked
either # hexadecimel colors or the name colors from wiki
its time to add them to your forum.


Go to admin panel -> display-> template editing -> posts and private messages
then hit the yellow gear icon to edit the posting_body template

Third Step


This is the hard part. Locating the BBcode color region.


the bb color codes start from this class:
You have to locate this class... you can use the search function in your browser to make things easier
Hit F3 or ctrl+F to open the search.

Code:

<div style="visibility: hidden;" class="select" id="color">

after that code you will see a load of code, that is the colors already installed on your forum.

This is the code for 1 color:

Code:

<button style="color:enter hex or name here;" onclick="bbfontstyle('[color=enter the same hex or name as before here]', '[/color]');selectWysiwyg(this, 'color');return false;" onmouseover="this.className='selectHover';" onmouseout="this.className='';">Enter the name of this color here</button><br />

So lets do a step by step installation of a LIME color

-> first copy the above code in full
-> Go to the end of your color list, you can do this by locating the last color in your list (black by default) or by locating this
<br />
</div>
and paste the code at the end of your color div.

Code:

<button style="color:black;" onclick="bbfontstyle('[color=black]', '[/color]');selectWysiwyg(this, 'color');return false;" onmouseover="this.className='selectHover';" onmouseout="this.className='';">{L_COLOR_BLACK}</button><br />
   </div>

this is what the last color should look like ^^
its ended by a space (<br/>)
and then the div is closed (</div>)

you have to paste your code before the end of the div and after the br.
so your code looks like this:

<button style="color:black;" onclick="bbfontstyle('', '');selectWysiwyg(this, 'color');return false;" onmouseover="this.className='selectHover';" onmouseout="this.className='';">{L_COLOR_BLACK}</button><br />

^^the last black color

<button style="color:enter hex or name here;" onclick="bbfontstyle('[color:edac=enter the same hex or name as before here]', '');selectWysiwyg(this, 'color');return false;" onmouseover="this.className='selectHover';" onmouseout="this.className='';">Enter the name of this color here</button><br />

your new color^^

</div> <--and the div that closes it all

Fourth Step

Adding your own color

Like I said I want to add a lime color
so first I check the exact hex code or name of the color I want to install.
I am positive that the color "lime" exists.. so I type in all the details

Code:

style="color:lime;"
'[color=lime]'
I want to name it lime color

Now your code looks like this:

Code:

<button style="color:lime;" onclick="bbfontstyle('[color=lime]', '[/color]');selectWysiwyg(this, 'color');return false;" onmouseover="this.className='selectHover';" onmouseout="this.className='';">Lime color</button><br />

double check if this code is pasted after the <br> from the black color , and posted before the </div>

if you are done click submit and confirm your changes with the green +.


You can go and test the color change in a post:


when you click the new color it appears in your post:





-------------------------------------------------
Hex color explaination


Now all you have to do is repeat the steps to add more colors.
You can also replace colors you don't like.

Here is a quick step by step. (I'll be doing it the hex way now)

I hate the red color I want to add a sexy teal!

So I locate the red code:

Code:

<button style="color:red;" onclick="bbfontstyle('[color=red]', '[/color]');selectWysiwyg(this, 'color');return false;" onmouseover="this.className='selectHover';" onmouseout="this.className='';">Red</button><br />

and I want to change it to this teal color

Code:

I change the style="color:#1183a8;"
I change the bbcode to [color=#1183a8]
and I give it a name : Teal

in the end my code looks like this:

Code:

<button style="color:#1183a8;" onclick="bbfontstyle('[color=#1183a8]', '[/color]');selectWysiwyg(this, 'color');return false;" onmouseover="this.className='selectHover';" onmouseout="this.className='';">Teal</button><br />

I replaced the original red color with my own:




NOW you can try.



Tested and tried on PHPBB2 and PUNBB
both work


I suggest replacing a few colors, because if you add 20 new colors that list will get very long when posting.
I remind you guys again, be very careful when editing the code, watch out for "-quotation marks , () brackets and ,- commas... all of then are extremely sensitive.


If the code doesn't work you either pasted the code incorrectly, a tag is missing or your have an invalid color hex or name!

If something goes terribly wrong delete your posting_body template... it'll revert to default.



Tutorial created and written by Jalokim