PhpBB3 BBCodes

Database and Demo for phpBB3 BBCodes, Mods and Smilies
https://phpbb3bbcodes.com/

OnMouseOver Helpline BBCodes

https://phpbb3bbcodes.com/viewtopic.php?t=370

Page 1 of 1

OnMouseOver Helpline BBCodes

Posted: 11 Mar 2010, 18:10
by Post Bot
OnMouseOver Helpline BBCodes

Author: Simon
Adds a help line for bbcode when mouse over (use phpbb3's function ;) )
help.gif
Modifications template
in : ./styles/prosilver/theme/buttons.css
search :

Code: Select all

/* Fix profile icon default margins */
ul.profile-icons li.edit-icon	{ margin: 0 0 0 3px; }
ul.profile-icons li.quote-icon	{ margin: 0 0 0 10px; }
ul.profile-icons li.info-icon, ul.profile-icons li.report-icon	{ margin: 0 3px 0 0; }
add after :

Code: Select all

/* helpline */
.helpline {
  background-color: #ECF1F3;
  border-style: none;
  cursor: default;
  padding: 3px;
  /* color: #5e8dee; */ text color
  width: 80%;
}
/* helpline */    

in : ./styles/prosilver/template/posting_button.html
search : (help line does not exist in javascript)

Code: Select all

l: '{LA_BBCODE_L_HELP}',
add after :

Code: Select all

li: '{LA_BBCODE_LISTITEM_HELP}',    
search :

Code: Select all

<div id="format-buttons">
	<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}" />
	<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}" />
	<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}" />
	<!-- IF S_BBCODE_QUOTE -->
		<input type="button" class="button2" accesskey="q" name="addbbcode6" value="Quote" style="width: 50px" onclick="bbstyle(6)" title="{L_BBCODE_Q_HELP}" />
	<!-- ENDIF -->
	<input type="button" class="button2" accesskey="c" name="addbbcode8" value="Code" style="width: 40px" onclick="bbstyle(8)" title="{L_BBCODE_C_HELP}" />
	<input type="button" class="button2" accesskey="l" name="addbbcode10" value="List" style="width: 40px" onclick="bbstyle(10)" title="{L_BBCODE_L_HELP}" />
	<input type="button" class="button2" accesskey="o" name="addbbcode12" value="List=" style="width: 40px" onclick="bbstyle(12)" title="{L_BBCODE_O_HELP}" />
	<input type="button" class="button2" accesskey="t" name="addlitsitem" value="[*]" style="width: 40px" onclick="bbstyle(-1)" title="{L_BBCODE_LISTITEM_HELP}" />
	<!-- IF S_BBCODE_IMG -->
		<input type="button" class="button2" accesskey="p" name="addbbcode14" value="Img" style="width: 40px" onclick="bbstyle(14)" title="{L_BBCODE_P_HELP}" />
	<!-- ENDIF -->
	<!-- IF S_LINKS_ALLOWED -->
		<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}" />
	<!-- ENDIF -->
	<!-- IF S_BBCODE_FLASH -->
		<input type="button" class="button2" accesskey="d" name="addbbcode18" value="Flash" onclick="bbstyle(18)" title="{L_BBCODE_D_HELP}" />
	<!-- ENDIF -->
	<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}">
		<option value="50">{L_FONT_TINY}</option>
		<option value="85">{L_FONT_SMALL}</option>
		<option value="100" selected="selected">{L_FONT_NORMAL}</option>
		<option value="150">{L_FONT_LARGE}</option>
		<option value="200">{L_FONT_HUGE}</option>
	</select>
	<input type="button" class="button2" name="bbpalette" id="bbpalette" value="{L_FONT_COLOR}" onclick="change_palette();" title="{L_BBCODE_S_HELP}" />
	<!-- BEGIN custom_tags -->
		<input type="button" class="button2" name="addbbcode{custom_tags.BBCODE_ID}" value="{custom_tags.BBCODE_TAG}" onclick="bbstyle({custom_tags.BBCODE_ID})" title="{custom_tags.BBCODE_HELPLINE}" />
	<!-- END custom_tags -->
</div>
replace by :

Code: Select all

<div id="format-buttons">
    <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}" onmouseover="helpline('b')" />
    <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}" onmouseover="helpline('i')" />
    <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}" onmouseover="helpline('u')" />
    <!-- IF S_BBCODE_QUOTE -->
        <input type="button" class="button2" accesskey="q" name="addbbcode6" value="Quote" style="width: 50px" onclick="bbstyle(6)" title="{L_BBCODE_Q_HELP}" onmouseover="helpline('q')" />
    <!-- ENDIF -->
    <input type="button" class="button2" accesskey="c" name="addbbcode8" value="Code" style="width: 40px" onclick="bbstyle(8)" title="{L_BBCODE_C_HELP}" onmouseover="helpline('c')" />
    <input type="button" class="button2" accesskey="l" name="addbbcode10" value="List" style="width: 40px" onclick="bbstyle(10)" title="{L_BBCODE_L_HELP}" onmouseover="helpline('l')" />
    <input type="button" class="button2" accesskey="o" name="addbbcode12" value="List=" style="width: 40px" onclick="bbstyle(12)" title="{L_BBCODE_O_HELP}" onmouseover="helpline('o')" />
    <input type="button" class="button2" accesskey="t" name="addlitsitem" value="[*]" style="width: 40px" onclick="bbstyle(-1)" title="{L_BBCODE_LISTITEM_HELP}" onmouseover="helpline('li')" />
    <!-- IF S_BBCODE_IMG -->
        <input type="button" class="button2" accesskey="p" name="addbbcode14" value="Img" style="width: 40px" onclick="bbstyle(14)" title="{L_BBCODE_P_HELP}" onmouseover="helpline('p')" />
    <!-- ENDIF -->
    <!-- IF S_LINKS_ALLOWED -->
        <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}" onmouseover="helpline('w')" />
    <!-- ENDIF -->
    <!-- IF S_BBCODE_FLASH -->
        <input type="button" class="button2" accesskey="d" name="addbbcode18" value="Flash" onclick="bbstyle(18)" title="{L_BBCODE_D_HELP}" onmouseover="helpline('d')" />
    <!-- ENDIF -->
    <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}"; onmouseover="helpline('f')";>
        <option value="50">{L_FONT_TINY}</option>
        <option value="85">{L_FONT_SMALL}</option>
        <option value="100" selected="selected">{L_FONT_NORMAL}</option>
        <option value="150">{L_FONT_LARGE}</option>
        <option value="200">{L_FONT_HUGE}</option>
    </select>
    <input type="button" class="button2" name="bbpalette" id="bbpalette" value="{L_FONT_COLOR}" onclick="change_palette();" title="{L_BBCODE_S_HELP}" onmouseover="helpline('s')" />
    
    <!-- BEGIN custom_tags -->
        <input type="button" class="button2" name="addbbcode{custom_tags.BBCODE_ID}" value="{custom_tags.BBCODE_TAG}" onclick="bbstyle({custom_tags.BBCODE_ID})" title="{custom_tags.BBCODE_HELPLINE}" onmouseover="helpline('cb_{custom_tags.BBCODE_ID}')" />
    <!-- END custom_tags -->
        <br />
        <input type="text" name="helpbox" class="helpline" value="{L_STYLES_TIP}" /></div>
</div>    




Addon for : Custom BBCodes in a select box

Modifications template
in : ./styles/prosilver/template/posting_button.html
search : (help line does not exist in javascript)

Code: Select all

d: '{LA_BBCODE_D_HELP}'
replace by :

Code: Select all

d: '{LA_BBCODE_D_HELP}',
y: 'Choose a bbcode for Help'  
(or use a language variable in posting.php )

search :

Code: Select all

var panels = new Array('options-panel', 'attach-panel', 'poll-panel');
	var show_panel = 'options-panel';


// ]]>
</script>
add after :

Code: Select all

<SCRIPT TYPE="text/javascript">
// <![CDATA[
function select_custom_BBcod(custom)
{
    var id_custom = custom.value*1;
    if (custom.value != "#")
    {
        bbstyle(id_custom);
        var aide = 'cb_'+id_custom;
        helpline(aide);
    }
}
// ]]>
</SCRIPT>
search :

Code: Select all

<select name="addbbcode_custom" onchange="bbstyle(this.form.addbbcode_custom.options[this.form.addbbcode_custom.selectedIndex].value*1);this.form.addbbcode_custom.selectedIndex = 0;">
      <option value="#" selected="selected">Custom BBCodes</option>
      <!-- BEGIN custom_tags -->
      <option value="{custom_tags.BBCODE_ID}" title="{custom_tags.BBCODE_HELPLINE}">{custom_tags.BBCODE_TAG}</option>
      <!-- END custom_tags -->   
     </select>
replace by :

Code: Select all

<select name="addbbcode_custom" onchange="select_custom_BBcod(this.form.addbbcode_custom.options[this.form.addbbcode_custom.selectedIndex]); this.form.addbbcode_custom.selectedIndex = '#'"; onmouseover="helpline('y')";>
          <option value="#" selected="selected" >Custom BBCodes</option>
          <!-- BEGIN custom_tags -->
          <option value="{custom_tags.BBCODE_ID}" title="{custom_tags.BBCODE_HELPLINE}">{custom_tags.BBCODE_TAG}</option>
          <!-- END custom_tags -->   
    </select>  
:smile2:

Re: OnMouseOver Helpline BBCodes

Posted: 23 Mar 2010, 01:44
by Fire-Fox
Can't get it to return the "Tip" line, when the mouse is not over a icon ?

how do i do that

Here is my posting_buttons.html

Code: Select all

<script type="text/javascript">
// <![CDATA[
	var form_name = 'postform';
	var text_name = <!-- IF $SIG_EDIT -->'signature'<!-- ELSE -->'message'<!-- ENDIF -->;
	var load_draft = false;
	var upload = false;

	// Define the bbCode tags
	var bbcode = new Array();
	var bbtags = new Array('[b]','[/b]','[i]','[/i]','[u]','[/u]','[quote]','[/quote]','[code]','
','
  • ','
','
  • ','
','[img]','[/img]','','','[flash=]', '[/flash]','[size=]','[/size]'<!-- BEGIN custom_tags -->, {custom_tags.BBCODE_NAME}<!-- END custom_tags -->);
var imageTag = false;

// Helpline messages
var help_line = {
b: '{LA_BBCODE_B_HELP}',
i: '{LA_BBCODE_I_HELP}',
u: '{LA_BBCODE_U_HELP}',
q: '{LA_BBCODE_Q_HELP}',
c: '{LA_BBCODE_C_HELP}',
l: '{LA_BBCODE_L_HELP}',
li: '{LA_BBCODE_LISTITEM_HELP}',
o: '{LA_BBCODE_O_HELP}',
p: '{LA_BBCODE_P_HELP}',
w: '{LA_BBCODE_W_HELP}',
a: '{LA_BBCODE_A_HELP}',
s: '{LA_BBCODE_S_HELP}',
f: '{LA_BBCODE_F_HELP}',
ff: '{LA_BBCODE_FF_HELP}',
e: '{LA_BBCODE_E_HELP}',
d: '{LA_BBCODE_D_HELP}',
y: 'Custom BBCodes',
<!-- BEGIN custom_tags -->
,cb_{custom_tags.BBCODE_ID}: '{custom_tags.A_BBCODE_HELPLINE}'
<!-- END custom_tags -->
}

var panels = new Array('options-panel', 'attach-panel', 'poll-panel');
var show_panel = 'options-panel';


// ]]>
</script>
<SCRIPT TYPE="text/javascript">
// <![CDATA[
function select_custom_BBcod(custom)
{
var id_custom = custom.value*1;
if (custom.value != "#")
{
bbstyle(id_custom);
var aide = 'cb_'+id_custom;
helpline(aide);
}
}
// ]]>
</SCRIPT>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/editor.js"></script>

<!-- IF S_BBCODE_ALLOWED -->
<div id="colour_palette" style="display: none;">
<dl style="clear: left;">
<dt><label>{L_FONT_COLOR}:</label></dt>
<dd>
<script type="text/javascript">
// <![CDATA[
function change_palette()
{
dE('colour_palette');
e = document.getElementById('colour_palette');

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

colorPalette('h', 15, 10);
// ]]>
</script>
</dd>
</dl>
</div>
<div id="format-buttons">
<input type="text" readonly="readonly" name="helpbox" style="width:80%" class="helpline" value="{L_STYLES_TIP}" /><br />
<input type="button" class="buttonz" accesskey="b" name="addbbcode0" value="" onclick="bbstyle(0)" title="{L_BBCODE_B_HELP}" style="background: url('./images/editor/text_bold.png');" onmouseover="helpline('b')" />
<input type="button" class="buttonz" accesskey="i" name="addbbcode2" value="" style="background: url('./images/editor/text_italic.png');" onclick="bbstyle(2)" title="{L_BBCODE_I_HELP}" onmouseover="helpline('i')" />
<input type="button" class="buttonz" accesskey="u" name="addbbcode4" value="" style="background: url('./images/editor/text_underline.png');" onclick="bbstyle(4)" title="{L_BBCODE_U_HELP}" onmouseover="helpline('u')" />
<!-- IF S_BBCODE_QUOTE -->
<input type="button" class="buttonz" accesskey="q" name="addbbcode6" value="" onclick="bbstyle(6)" title="{L_BBCODE_B_HELP}" style="background: url('./images/editor/comment.png');" onmouseover="helpline('q')" />
<!-- ENDIF -->
<input type="button" class="buttonz" accesskey="c" name="addbbcode8" value="" onclick="bbstyle(8)" title="{L_BBCODE_C_HELP}" style="background: url('./images/editor/page_white_code.png');" onmouseover="helpline('c')" />
<input type="button" class="buttonz" accesskey="l" name="addbbcode10" value="" onclick="bbstyle(10)" title="{L_BBCODE_L_HELP}" style="background: url('./images/editor/text_list_bullets.png');" onmouseover="helpline('l')" />
<input type="button" class="buttonz" accesskey="o" name="addbbcode12" value="" onclick="bbstyle(12)" title="{L_BBCODE_O_HELP}" style="background: url('./images/editor/text_list_numbers.png');" onmouseover="helpline('o')" />
<input type="button" class="buttonz" accesskey="t" name="addlitsitem" value="" onclick="bbstyle(-1)" title="{L_BBCODE_LISTITEM_HELP}" style="background: url('./images/editor/bullet_black.png');" onmouseover="helpline('li')" />
<input type="button" class="buttonz" name="bbpalette" id="bbpalette" value="" style="background: url('./images/editor/color_wheel.png');" onclick="change_palette();" title="{L_BBCODE_S_HELP}" onmouseover="helpline('s')" />

<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}" onmouseover="helpline('f')" />
<option value="50">{L_FONT_TINY}</option>
<option value="85">{L_FONT_SMALL}</option>
<option value="100" selected="selected">{L_FONT_NORMAL}</option>
<!-- IF not MAX_FONT_SIZE or MAX_FONT_SIZE >= 150 -->
<option value="150">{L_FONT_LARGE}</option>
<!-- IF not MAX_FONT_SIZE or MAX_FONT_SIZE >= 200 -->
<option value="200">{L_FONT_HUGE}</option>
<!-- ENDIF -->
<!-- ENDIF -->
</select>
<select name="addbbcodefont" onchange="bbfontstyle('[font=' + this.form.addbbcodefont.options[this.form.addbbcodefont.selectedIndex].value + ']', '[/font]');this.form.addbbcodefont.selectedIndex = 6;" title="{L_BBCODE_FF_HELP}" onmouseover="helpline('ff')" />
<option style="font-family: Tahoma;" value="Tahoma">Tahoma</option>
<option style="font-family: Verdana;" value="Verdana">Verdana</option>
<option style="font-family: Arial Black;" value="Arial Black">Arial Black</option>
<option style="font-family: Comic Sans MS;" value="Comic Sans MS">Comic Sans MS</option>
<option style="font-family: Lucida Console;" value="Lucida Console">Lucida Console</option>
<option style="font-family: Palatino Linotype;" value="Palatino Linotype">Palatino Linotype</option>
<option value="" selected="selected">Font Family</option>
<option style="font-family: MS Sans Serif4;" value="MS Sans Serif4">MS Sans Serif4</option>
<option style="font-family: System;" value="System">System</option>
<option style="font-family: Georgia1;" value="Georgia1">Georgia1</option>
<option style="font-family: Impact;" value="Impact">Impact</option>
<option style="font-family: Courier;" value="Courier">Courier</option>
<option style="font-family: Symbol;" value="Symbol">Symbol</option>
</select>
<select name="addbbcode_custom" onchange="select_custom_BBcod(this.form.addbbcode_custom.options[this.form.addbbcode_custom.selectedIndex]); this.form.addbbcode_custom.selectedIndex = '#'"; onmouseover="helpline('y')";>
<option value="#" selected="selected" >Custom BBCodes</option>
<!-- BEGIN custom_tags -->
<option value="{custom_tags.BBCODE_ID}" title="{custom_tags.BBCODE_HELPLINE}">{custom_tags.BBCODE_TAG}</option>
<!-- END custom_tags -->
</select>
<!-- ENDIF -->
[/code]

Re: OnMouseOver Helpline BBCodes

Posted: 23 Mar 2010, 07:22
by Stoker
Add this: onmouseout="helpline('tip')" after the onmouseover thing and it should be fine

Re: OnMouseOver Helpline BBCodes

Posted: 23 Mar 2010, 11:41
by Fire-Fox
Thanks M8.

Working now :)

Re: OnMouseOver Helpline BBCodes

Posted: 09 Jun 2010, 01:42
by Georgio
i have a problem adding new button;
added [hide] code with his button like this:
<input type="button" class="buttonz" accesskey="h" name="addlitsitem" value="" style="background: url('./images/editor/hide.png');" onclick="bbstyle(?)" title="Esconder texto" />
? = don't now what number to put in.

with:

Code: Select all

<input type="button" class="buttonz" accesskey="h" name="addlitsitem" value="" style="background: url('./images/editor/hide.png');" onclick="bbstyle(19)" title="Esconder texto" />
i have :
wrong hide bbcode on click
wrong hide bbcode on click

Re: OnMouseOver Helpline BBCodes

Posted: 09 Jun 2010, 02:11
by cisco007
i think you posted in the wrong forum, this is for the helpline, not for adding custom bbcodes to the box!

Re: OnMouseOver Helpline BBCodes

Posted: 09 Jun 2010, 04:52
by Stoker
Use:

Code: Select all

<!-- BEGIN custom_tags -->
<!-- IF custom_tags.BBCODE_TAG eq 'hide' -->
<input type="button" class="buttonz" style="background: url('./images/editor/hide.png');"  name="addbbcode{custom_tags.BBCODE_ID}" value="{custom_tags.BBCODE_TAG}" onclick="bbstyle({custom_tags.BBCODE_ID})" title="{custom_tags.BBCODE_HELPLINE}" />
<!-- ENDIF -->
<!-- END custom_tags -->
All times are UTC+02:00
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited