BBCodebox Light

Mixed forum with code snippets, guides and styles
Forum rules
Everything in this forum is for everybody
But support only for Donators!
User avatar
Stoker
Site Admin
Site Admin
Posts: 3511
Joined: 12 May 2008, 21:26
BBCodes: 239
Favourite BBCode: Anipro
Favourite MOD: PrettyPhoto
Location: Denmark

BBCodebox Light

Post by Stoker » 05 Sep 2011, 08:35

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
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;
}
You do not have the required permissions to view the files attached to this post.
Board rules! No PM support
Sure, I can install the Mod for you ;)
Like the site? Then buy me a bear


User avatar
slash
BBCoder II
BBCoder II
Posts: 57
Joined: 27 Oct 2011, 16:53
BBCodes: 31

BBCodebox Light

Post by slash » 01 Mar 2012, 13:44

If I wont create a image button for custom bbcode?

User avatar
Stoker
Site Admin
Site Admin
Posts: 3511
Joined: 12 May 2008, 21:26
BBCodes: 239
Favourite BBCode: Anipro
Favourite MOD: PrettyPhoto
Location: Denmark

BBCodebox Light

Post by Stoker » 01 Mar 2012, 14:14

Try a search for it. I think Simon posted the code once.
Dont remember where though.
Board rules! No PM support
Sure, I can install the Mod for you ;)
Like the site? Then buy me a bear

User avatar
slash
BBCoder II
BBCoder II
Posts: 57
Joined: 27 Oct 2011, 16:53
BBCodes: 31

BBCodebox Light

Post by slash » 01 Mar 2012, 14:17

but in your forum?

User avatar
Martin_K
BBCoder III
BBCoder III
Posts: 121
Joined: 02 Sep 2011, 09:13
BBCodes: 10
Favourite BBCode: textarea
Favourite MOD: Newsletter Add on
Location: London, UK

BBCodebox Light

Post by Martin_K » 07 Dec 2012, 19:31

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
BBCoder II
BBCoder II
Posts: 43
Joined: 12 Sep 2013, 22:40
BBCodes: 1

BBCodebox Light

Post by Gamers Talk » 13 Sep 2013, 19:06

I followed instructions step by step and when I go to view a new post page It came out like this...
bbcodes.png
What did I do wrong?

thanks
You do not have the required permissions to view the files attached to this post.

User avatar
Steve
BBCoder VI
BBCoder VI
Posts: 803
Joined: 04 Mar 2010, 23:10
Extra Rank: Donator.png
BBCodes: 2000
Favourite BBCode: porn tube
Favourite MOD: Non of Stokers
Location: up your bum

BBCodebox Light

Post by Steve » 13 Sep 2013, 20:53

Refresh your theme and f5 your web browser
NAPWR wrote: Nice, Stoker is Hot

Gamers Talk
BBCoder II
BBCoder II
Posts: 43
Joined: 12 Sep 2013, 22:40
BBCodes: 1

BBCodebox Light

Post by Gamers Talk » 14 Sep 2013, 00:07

I did that but no luck. Any other ideas?

User avatar
Stoker
Site Admin
Site Admin
Posts: 3511
Joined: 12 May 2008, 21:26
BBCodes: 239
Favourite BBCode: Anipro
Favourite MOD: PrettyPhoto
Location: Denmark

BBCodebox Light

Post by Stoker » 14 Sep 2013, 05:09

Changes to css files MUST be done to all installed and used themes. After that, refresh the theme.
Board rules! No PM support
Sure, I can install the Mod for you ;)
Like the site? Then buy me a bear

Gamers Talk
BBCoder II
BBCoder II
Posts: 43
Joined: 12 Sep 2013, 22:40
BBCodes: 1

BBCodebox Light

Post by Gamers Talk » 14 Sep 2013, 06:11

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