OnMouseOver Helpline BBCodes

Modifications for phpBB3. Try the Mods here and share Your own Mods
There is no support here! Only Read Access!
Forum rules
You dont have to use ModX or make your mod AutoMod compatible. A simple textfile is fine
But if you post Mods here You also have to give support
Locked
User avatar
Post Bot
BBCoder II
BBCoder II
Posts: 44
Joined: 04 Mar 2010, 20:53

OnMouseOver Helpline BBCodes

Post 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:
Top
User avatar
Fire-Fox
BBCoder IV
BBCoder IV
Posts: 275
Joined: 22 Mar 2010, 13:24
Location: Denmark

Re: OnMouseOver Helpline BBCodes

Post 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]
Top
User avatar
Stoker
Site Admin
Site Admin
Posts: 3536
Joined: 12 May 2008, 23:26
BBCodes: 239
Favourite BBCode: Anipro
Favourite MOD: PrettyPhoto
Location: Denmark
Contact:
Contact Stoker

Re: OnMouseOver Helpline BBCodes

Post by Stoker »

Add this: onmouseout="helpline('tip')" after the onmouseover thing and it should be fine
Board rules! No PM support
Top
User avatar
Fire-Fox
BBCoder IV
BBCoder IV
Posts: 275
Joined: 22 Mar 2010, 13:24
Location: Denmark

Re: OnMouseOver Helpline BBCodes

Post by Fire-Fox »

Thanks M8.

Working now :)
Top
User avatar
Georgio
BBCoder II
BBCoder II
Posts: 53
Joined: 06 Mar 2010, 19:10
Location: Cabanes, Spain
Contact:
Contact Georgio

Re: OnMouseOver Helpline BBCodes

Post 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
Last edited by Georgio on 09 Jun 2010, 01:44, edited 1 time in total.
Top
cisco007
BBCoder VI
BBCoder VI
Posts: 1015
Joined: 16 Mar 2010, 18:14
Location: Don't really know!

Re: OnMouseOver Helpline BBCodes

Post by cisco007 »

i think you posted in the wrong forum, this is for the helpline, not for adding custom bbcodes to the box!
Top
User avatar
Stoker
Site Admin
Site Admin
Posts: 3536
Joined: 12 May 2008, 23:26
BBCodes: 239
Favourite BBCode: Anipro
Favourite MOD: PrettyPhoto
Location: Denmark
Contact:
Contact Stoker

Re: OnMouseOver Helpline BBCodes

Post 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 -->
Board rules! No PM support
Top
Locked

Return to “Modifications”