Demo:




Hướng dẫn:

Bước 1: ACP - Display - Pictures and Colors - Colors - CSS Stylesheet:

Code:

/* Notes ver2 www.fmvi.vn */
.noteclassic,.noteimportant,.notewarning,.notetip,.notehelp,.noteinfo,.notesuccess,.noteerror,.notevalidation,.notesuggest{width:95%;border-radius:10px 10px;-moz-border-radius:10px 10px;-webkit-border-radius:10px 10px;-webkit-box-shadow:2px 2px 3px #999;-moz-box-shadow:2px 2px 3px #999;min-height:40px;height:40px;overflow:visible;position:relative;top:6px;left:5px;border:1px solid #999999;background-position:20px 50%;background-repeat:no-repeat;text-align:justify;margin:10px 0px 15px 5px;padding:25px 20px 15px 80px}
.noteclassic{background-color:#EEF;background-image:url(http://i20.servimg.com/u/f20/14/50/49/34/note10.png)}
.noteimportant{background-color:#FFC;background-image:url(http://i20.servimg.com/u/f20/14/50/49/34/import10.png)}
.notewarning{background-color:#FDD;background-image:url(http://i20.servimg.com/u/f20/14/50/49/34/warnin10.png)}
.notetip{background-color:#E4F6F8;background-image:url(http://i20.servimg.com/u/f20/14/50/49/34/tip10.png)}
.notehelp{background-color:#D8F3C9;background-image:url(http://i20.servimg.com/u/f20/14/50/49/34/help10.png)}
.noteinfo{background-color:#BDE5F8;background-image:url(http://i48.servimg.com/u/f48/16/28/30/49/knob_i10.png)}
.notesuccess{background-color:#DFF2BF;background-image:url(http://i48.servimg.com/u/f48/16/28/30/49/knob_v10.png)}
.noteerror{background-color:#FFBABA;background-image:url(http://i48.servimg.com/u/f48/16/28/30/49/knob_r10.png)}
.notevalidation{background-color:#FFCCBA;background-image:url(http://i48.servimg.com/u/f48/16/28/30/49/knob_c10.png)}
.notesuggest{background-color:#F1AF84;background-image:url(http://i48.servimg.com/u/f48/16/28/30/49/knob_h10.png)}

Bước 2: ACP - Modules - HTML & JAVASCRIPT - Javascript codes management - Create a new javascript
Title * : BBcode Notes ver2
Placement : In all the pages
Javascript Code * :

Code:

$(function () {
    $("<div style=\"display:inline!important\" id=\"text_editor_select_controls\"><div style=\"visibility:hidden\" class=\"select\" id=\"notes\"><button onclick=\"bbfontstyle('[table class=noteclassic][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"/users/2611/10/63/87/album/note10.png\">Classic note</button><button onclick=\"bbfontstyle('[table class=notetip][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"/users/2611/10/63/87/album/tip10.png\">Tip note</button><button onclick=\"bbfontstyle('[table class=notewarning][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"/users/2611/10/63/87/album/warn10.png\">Warning note</button><button onclick=\"bbfontstyle('[table class=noteimportant][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"/users/2611/10/63/87/album/imp10.png\">Important note</button><button onclick=\"bbfontstyle('[table class=notehelp][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"/users/2611/10/63/87/album/help10.png\">Help note</button><hr><button onclick=\"bbfontstyle('[table class=noteinfo][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://i48.servimg.com/u/f48/16/28/30/49/rsz_2k11.png\">Info note</button><button onclick=\"bbfontstyle('[table class=notesuccess][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://i48.servimg.com/u/f48/16/28/30/49/rsz_2k13.png\">Success note</button><button onclick=\"bbfontstyle('[table class=noteerror][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://i48.servimg.com/u/f48/16/28/30/49/rsz_2k12.png\">Error note</button><button onclick=\"bbfontstyle('[table class=notevalidation][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://i48.servimg.com/u/f48/16/28/30/49/rsz_kn10.png\">Validation note</button><button onclick=\"bbfontstyle('[table class=notesuggest][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://i48.servimg.com/u/f48/16/28/30/49/rsz_2k10.png\">Suggest note</button></div></div><button class=\"button2\" onclick=\"selectWysiwyg(this,'notes')\" onmouseover=\"helpline('BBcode notes')\" type=\"button\"><img src=\"/users/2611/10/63/87/album/inote10.gif\" /></button> <img src=\"http://2img.net/i/fa/wysiwyg/separator.png\" style=\"vertical-align: middle;\">").insertBefore("span#text_edit input.button2[value='Others']");
});

Nguồn: fmvi

^^

^^ hay