Better Messages Buttons

[Inf3rnal]

I know this is quite redundant seeing the next release is going to have a WYSIWYG editor but I might as well release it.
This mod with change the messengers buttons into something more pretty as shown in the image below:



First download rte_icons.zip

Unzip and place the files in yoursite.com/templates/icons/
So your directory structure should look like this: yoursite.com/templates/icons/rte_icons/

Now put the following anywhere in your theme(s) style.css file. (Or whatever you named it.)

/* Better Messages Buttons */
.msgbutton {border: 1px solid #DD3822; height:25px; width:25px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
.bold {background:#fff url(../icons/rte_icons/bold.png) no-repeat center center;}
.italic {background:#fff url(../icons/rte_icons/italic.png) no-repeat center center;}
.underline {background:#fff url(../icons/rte_icons/underline.png) no-repeat center center;}
.link {background:#fff url(../icons/rte_icons/link.png) no-repeat center center;}
.picture {background:#fff url(../icons/rte_icons/picture.png) no-repeat center center;}
.strike {background:#fff url(../icons/rte_icons/strike.png) no-repeat center center;}
.youtube {background:#fff url(../icons/rte_icons/media.png) no-repeat center center;}
.profile {background:#fff url(../icons/rte_icons/user.png) no-repeat center center;}

Now open messages.php
Around line 163 find:

<p>Message Text:  </p>
<p>
	<input type=\"button\" value=\"Bold\" onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'Bold Text Here'\">
	<input type=\"button\" value=\"Italics\" onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'Italic Text Here'\"> 
	<input type=\"button\" value=\"Underline\" onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'Underlined Text Here'\">
	<input type=\"button\" value=\"URL / Link\" onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'Link text goes here'\">
	<input type=\"button\" value=\"Image\" onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+''\">
	<input type=\"button\" value=\"Image w/ Link\" onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+''\">
	<input type=\"button\" value=\"Links a Text\" onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'[urlsame=]Linked Text Here[/urlsame]'\">
	<input type=\"button\" value=\"Striking Format\" onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'[s]Strike Text Here[/s]'\">
	<input type=\"button\" value=\"Youtube Video\" onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'[youtube]http://www.youtube.com/videoname[/youtube]'\">
	<input type=\"button\" value=\"User Profile\" onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'[profile]Username[/profile]'\">
	<input type=\"button\" value=\"Image Maps\" onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'[imgmap]http://www.urlhere.com/[/imgmap]'\">
	<input type=\"button\" value=\"Map Locations\" onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['pagecontent'].value+'[map][where=#,#,#,#=http://www.firstlinkhere.com/][wherecirc=#,#,#=http://www.secondinkhere.com/][/map]'\">
	<br />
	<textarea name='mtext' cols='45' id='mtext'></textarea> 
</p>

Replace with:

</p>  
	<p>Message Text:</p>
	<input class='msgbutton bold' type='button' title='Bold' value='' name='Bold' onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'{b}{/b}'\">
	<input class='msgbutton italic' type='button' title='Italic' value='' onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'{i}{/i}'\"> 
	<input class='msgbutton underline' type='button' title='Underline' value='' onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'{u}{/u}'\">
	<input class='msgbutton link' type='button' title='Link' value='' onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'{url=}{/url}'\">
	<input class='msgbutton picture' type='button' title='Image' value='' onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'{img}{/img}'\">
	<input class='msgbutton strike' type='button' title='Strike Through' value='' onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'{s}{/s}'\">
	<input class='msgbutton youtube' type='button' title='Youtube' value='' onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+{youtube}{/youtube}'\">
	<input class='msgbutton profile' type='button' title='User Profile' value='' onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'{profile}Username{/profile}'\">
	<br /><br /><textarea name='mtext' cols='80' rows='6' id='mtext' ></textarea>
</p>

That's it and you all done. Enjoy!

EDIT: I just noticed that the forum parsed some of the bbcode inside of the code.
So anyone who installed this please check your code.

I replaced all the ['s with {'s so when you do change those back to ['s before installing. I wish there was some sort of <pre> tag

[Hall of Famer]

This looks quite nice, thanks for making it. Members should find it useful until WYSIWYG editor is incorporated with Mys in version 1.3.x.

[Inf3rnal]

I just found a bug caused by the forum's bbcode parsing.

The forum parsed all the square brackets so I replaced all the square brackets with braces.
Just an heads up for anyone that used this. Just recopy the code and replace the braces with square brackets. =\