Log in

View Full Version : Better Messages Buttons


Inf3rnal
10-11-2011, 05:07 PM
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:

http://dl.dropbox.com/u/614379/Tutorials/Mysidia/bettermessagebuttons/messagebuttons.png

First download rte_icons.zip (http://dl.dropbox.com/u/614379/Tutorials/Mysidia/bettermessagebuttons/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 (http://www.yoursite.com)'\">
<input type=\"button\" value=\"Image\" onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'http://www.somesite.com/images/someimage.gif'\">
<input type=\"button\" value=\"Image w/ Link\" onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'http://www.somesite.com/images/someimage.gif (http://www.yourlinksite.com)'\">
<input type=\"button\" value=\"Links a Text\" onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'Linked Text Here'\">
<input type=\"button\" value=\"Striking Format\" onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'Strike Text Here'\">
<input type=\"button\" value=\"Youtube Video\" onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'http://www.youtube.com/videoname'\">
<input type=\"button\" value=\"User Profile\" onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'Username'\">
<input type=\"button\" value=\"Image Maps\" onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['mtext'].value+'http://www.urlhere.com/'\">
<input type=\"button\" value=\"Map Locations\" onClick=\"document.forms['form1']. elements['mtext'].value=document.forms['form1']. elements['pagecontent'].value+'[where=#,#,#,#=http://www.firstlinkhere.com/][wherecirc=#,#,#=http://www.secondinkhere.com/]'\">
<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
10-12-2011, 02:39 AM
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
10-28-2011, 11:11 AM
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. =\