BBCodebox Light

[Stoker]

BBCodebox Light

Author: Dakin Quelia & Simon (and a little touch by Stoker)
Graphics Author: FAMFAMFAM licensed under a Creative Commons Attribution 2.5 License.
Version: 1.0.2
Description: BBCodebox Light for phpbb3 makes presentation of the bbcode buttons nicer using images instead of buttons. This version includes onmouseover helpline.
Demo: This board
Download:

BBCodeBox Light.zip

Upload the entire "editor" folder to your forums "images" folder.

(11.49 KiB) Downloaded 2067 times

Open styles/prosilver/template/posting_buttons.html
Find:

Code: Select all

l: '{LA_BBCODE_L_HELP}',

Add after:

Code: Select all

li: '{LA_BBCODE_LISTITEM_HELP}',

Find:

Code: Select all

dE('colour_palette');
				e = document.getElementById('colour_palette');
				
				if (e.style.display == 'block')
				{
					document.getElementById('bbpalette').value = '{LA_FONT_COLOR_HIDE}';
				}
				else
				{
					document.getElementById('bbpalette').value = '{LA_FONT_COLOR}';
				}

Replace with:

Code: Select all

dE('colour_palette');
				e = document.getElementById('colour_palette');

Find:

Code: Select all

<input type="button" class="button2" accesskey="b" name="addbbcode0" value=" B " style="font-weight:bold; width: 30px" onclick="bbstyle(0)" title="{L_BBCODE_B_HELP}" />

Replace with:

Code: Select all

<input type="text" readonly="readonly" name="helpbox" style="width:80%" class="<!-- IF S_IN_UCP -->helpline2<!-- ELSE -->helpline<!-- ENDIF -->" value="{L_STYLES_TIP}" /><br />
   <input type="button" class="buttonz" accesskey="b" name="addbbcode0" value="" onclick="bbstyle(0)" style="background: url('{ROOT_PATH}images/editor/text_bold.png');" onmouseover="helpline('b')" onmouseout="helpline('tip')" />

Find:

Code: Select all

<input type="button" class="button2" accesskey="i" name="addbbcode2" value=" i " style="font-style:italic; width: 30px" onclick="bbstyle(2)" title="{L_BBCODE_I_HELP}" />

Replace with:

Code: Select all

<input type="button" class="buttonz" accesskey="i" name="addbbcode2" value="" style="background: url('{ROOT_PATH}images/editor/text_italic.png');" onclick="bbstyle(2)" onmouseover="helpline('i')" onmouseout="helpline('tip')" />

Find:

Code: Select all

<input type="button" class="button2" accesskey="u" name="addbbcode4" value=" u " style="text-decoration: underline; width: 30px" onclick="bbstyle(4)" title="{L_BBCODE_U_HELP}" />

Replace with:

Code: Select all

<input type="button" class="buttonz" accesskey="u" name="addbbcode4" value="" style="background: url('{ROOT_PATH}images/editor/text_underline.png');" onclick="bbstyle(4)" onmouseover="helpline('u')" onmouseout="helpline('tip')" />

Find:

Code: Select all

<input type="button" class="button2" accesskey="q" name="addbbcode6" value="Quote" style="width: 50px" onclick="bbstyle(6)" title="{L_BBCODE_Q_HELP}" />

Replace with:

Code: Select all

<input type="button" class="buttonz" accesskey="q" name="addbbcode6" value="" style="background: url('{ROOT_PATH}images/editor/comment.png');" onclick="bbstyle(6)" onmouseover="helpline('q')" onmouseout="helpline('tip')" />

Find:

Code: Select all

<input type="button" class="button2" accesskey="c" name="addbbcode8" value="Code" style="width: 40px" onclick="bbstyle(8)" title="{L_BBCODE_C_HELP}" />

Replace with:

Code: Select all

<input type="button" class="buttonz" accesskey="c" name="addbbcode8" value="" style="background: url('{ROOT_PATH}images/editor/page_white_code.png');" onclick="bbstyle(8)" onmouseover="helpline('c')" onmouseout="helpline('tip')" />

Find:

Code: Select all

<input type="button" class="button2" accesskey="l" name="addbbcode10" value="List" style="width: 40px" onclick="bbstyle(10)" title="{L_BBCODE_L_HELP}" />

Replace with:

Code: Select all

<input type="button" class="buttonz" accesskey="l" name="addbbcode10" value="" style="background: url('{ROOT_PATH}images/editor/text_list_bullets.png');" onclick="bbstyle(10)" onmouseover="helpline('l')" onmouseout="helpline('tip')" />

Find:

Code: Select all

<input type="button" class="button2" accesskey="o" name="addbbcode12" value="List=" style="width: 40px" onclick="bbstyle(12)" title="{L_BBCODE_O_HELP}" />

Replace with:

Code: Select all

<input type="button" class="buttonz" accesskey="o" name="addbbcode12" value="" style="background: url('{ROOT_PATH}images/editor/text_list_numbers.png');" onclick="bbstyle(12)" onmouseover="helpline('o')" onmouseout="helpline('tip')" />

Find:

Code: Select all

<input type="button" class="button2" accesskey="y" name="addlitsitem" value="[*]" style="width: 40px" onclick="bbstyle(-1)" title="{L_BBCODE_LISTITEM_HELP}" />

Replace with:

Code: Select all

<input type="button" class="buttonz" accesskey="t" name="addlitsitem" value="" style="background: url('{ROOT_PATH}images/editor/bullet_black.png');" onclick="bbstyle(-1)" onmouseover="helpline('li')" onmouseout="helpline('tip')" />

Find:

Code: Select all

<input type="button" class="button2" accesskey="p" name="addbbcode14" value="Img" style="width: 40px" onclick="bbstyle(14)" title="{L_BBCODE_P_HELP}" />

Replace with:

Code: Select all

<input type="button" class="buttonz" accesskey="p" name="addbbcode14" value="" style="background: url('{ROOT_PATH}images/editor/image.png');" onclick="bbstyle(14)" onmouseover="helpline('p')" onmouseout="helpline('tip')" />

Find:

Code: Select all

<input type="button" class="button2" accesskey="w" name="addbbcode16" value="URL" style="text-decoration: underline; width: 40px" onclick="bbstyle(16)" title="{L_BBCODE_W_HELP}" />

Replace with:

Code: Select all

<input type="button" class="buttonz" accesskey="w" name="addbbcode16" value="" style="background: url('{ROOT_PATH}images/editor/world_link.png');" onclick="bbstyle(16)" onmouseover="helpline('w')" onmouseout="helpline('tip')" />

Find:

Code: Select all

<input type="button" class="button2" accesskey="d" name="addbbcode18" value="Flash" onclick="bbstyle(18)" title="{L_BBCODE_D_HELP}" />

Replace with:

Code: Select all

<input type="button" class="buttonz" accesskey="d" name="addbbcode18" value="" style="background: url('{ROOT_PATH}images/editor/page_white_flash.png');" onclick="bbstyle(18)" onmouseover="helpline('d')" onmouseout="helpline('tip')" />

Find:

Code: Select all

<select name="addbbcode20" onchange="bbfontstyle('[size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/size]');this.form.addbbcode20.selectedIndex = 2;" title="{L_BBCODE_F_HELP}">

Add before:

Code: Select all

<input type="button" class="buttonz" name="bbpalette" id="bbpalette" value="" style="background: url('{ROOT_PATH}images/editor/color_wheel.png');" onclick="change_palette();" onmouseover="helpline('s')" onmouseout="helpline('tip')" />

Find and delete:

Code: Select all

<input type="button" class="button2" name="bbpalette" id="bbpalette" value="{L_FONT_COLOR}" onclick="change_palette();" title="{L_BBCODE_S_HELP}" />

Open styles/prosilver/theme/buttons.css
Find:

Code: Select all

ul.profile-icons li.info-icon, ul.profile-icons li.report-icon	{ margin: 0 3px 0 0; }

Add after:

Code: Select all

.buttonz {
width: 22px !important;
height: 22px !important;
background-position: center !important;
background-repeat: no-repeat !important;
margin: 6px 0px !important;
border: 1px solid #979797 !important;
}
.buttonz:hover {
background-color: #ffffdf !important;
border: 1px solid #BC2A4D !important;
}

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

Code: Select all

input.disabled {
	color: #666666;
}

Add after:

Code: Select all

.helpline {
	background-color: #ECF1F3;
	border-style: none;
}

.helpline2 {
	background-color: #F9F9F9;
	border-style: none;
}

[slash]

If I wont create a image button for custom bbcode?

[Stoker]

Try a search for it. I think Simon posted the code once.
Dont remember where though.

[slash]

but in your forum?

[Martin_K]

I'm getting 'undefined' instead of "Tip: Styles can be applied quickly to selected text." on mouse out, any ideas on how to fix?

[Gamers Talk]

I followed instructions step by step and when I go to view a new post page It came out like this...

What did I do wrong?

thanks

[Steve]

Refresh your theme and f5 your web browser

[Gamers Talk]

I did that but no luck. Any other ideas?

[Stoker]

Changes to css files MUST be done to all installed and used themes. After that, refresh the theme.

[Gamers Talk]

steve and stoker, thank you guys very much! works like a charm.