[Code]BB code notes phần 6

Cái này mình thêm 9 notes vào . Nếu thấy CSS chưa đc bạn chỉnh lại nhé, vì thẩm mỹ mình hơi kém

Demo :
[Code]BB code notes phần 6 Test_b10

*Cách làm :
Code : Cho vào overall_footer_end

Code::  <script type="text/javascript"> $(function(){$("<div style=\"display:inline!important\" id=\"text_editor_select_controls\"><div style=\"visibility:hidden\" class=\"select\" id=\"notes\"> <button onclick=\"bbfontstyle('[table class=Mail][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://png-4.findicons.com/files/icons/42/basic/16/letter.png\">Mail</button> <button onclick=\"bbfontstyle('[table class=Copyright2][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://png-3.findicons.com/files/icons/138/toolbar/16/copy.png\">Copyright</button> <button onclick=\"bbfontstyle('[table class=sign][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://png-5.findicons.com/files/icons/1588/farm_fresh_web/16/text_signature.png\">Sign</button> <button onclick=\"bbfontstyle('[table class=new2][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://png-2.findicons.com/files/icons/1620/crystal_project/16/konqsidebar_news.png\">News</button> <button onclick=\"bbfontstyle('[table class=contact2][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://png-2.findicons.com/files/icons/42/basic/16/address.png\">Contact</button> <button onclick=\"bbfontstyle('[table class=Download2][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://png-4.findicons.com/files/icons/829/quartz/24/box_download.png\">Download</button> <button onclick=\"bbfontstyle('[table class=Announce2][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://png-3.findicons.com/files/icons/653/the_spherical/24/mute.png\">Announce</button><hr> <button onclick=\"bbfontstyle('[table class=Bin2][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://png-4.findicons.com/files/icons/1938/xp_icandy_1/24/recycle_bin_full3.png\">Rubbish</button> <button onclick=\"bbfontstyle('[table class=Load2][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://png-4.findicons.com/files/icons/977/rrze/22/maintenance_time.png\">Time load</button> <button onclick=\"bbfontstyle('[table class=warning2][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://i34.servimg.com/u/f34/15/64/85/86/error10.png\">Warning</button> <button onclick=\"bbfontstyle('[table class=lock2][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://i34.servimg.com/u/f34/15/64/85/86/lock10.png\">Lock</button> <button onclick=\"bbfontstyle('[table class=yes2][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://i34.servimg.com/u/f34/15/64/85/86/accept10.png\">Yes</button> <button onclick=\"bbfontstyle('[table class=tag2][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://i34.servimg.com/u/f34/15/64/85/86/link_a10.png\">Tag</button> <button onclick=\"bbfontstyle('[table class=move2][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://i34.servimg.com/u/f34/15/64/85/86/page_w10.png\">Move</button> <button onclick=\"bbfontstyle('[table class=ban2][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://i34.servimg.com/u/f34/15/64/85/86/set_se10.png\">Band</button> <button onclick=\"bbfontstyle('[table class=tum2][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://i34.servimg.com/u/f34/15/64/85/86/thumb_10.png\">Tum</button><hr> <button onclick=\"bbfontstyle('[table class=okay_bbc][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://i48.servimg.com/u/f48/15/98/03/89/okay10.gif\">okae okey</button> <button onclick=\"bbfontstyle('[table class=warning_bbc][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://i48.servimg.com/u/f48/15/98/03/89/warnin10.gif\">warring erro problem</button> <button onclick=\"bbfontstyle('[table class=info_bbc][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://i48.servimg.com/u/f48/15/98/03/89/info10.gif\">info code and code</button> <button onclick=\"bbfontstyle('[table class=error_bbc][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://i48.servimg.com/u/f48/15/98/03/89/error10.gif\">Fataliti erro</button> <button onclick=\"bbfontstyle('[table class=comet_bbc][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://i48.servimg.com/u/f48/15/98/03/89/commen10.png\">cues versao</button> <button onclick=\"bbfontstyle('[table class=note_bbc][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://i48.servimg.com/u/f48/15/98/03/89/note11.png\">Note hand Note</button> <button onclick=\"bbfontstyle('[table class=nucler_bbc][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"http://i48.servimg.com/u/f48/15/98/03/89/nuclea10.png\">nuclear</button><hr> <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> <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> <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']"); $(".noteclassic, .noteimportant, .notewarning, .notetip, .notehelp, .noteinfo, .notesuccess, .noteerror, .notevalidation, .notesuggest").css({"width":"95%","border-radius":"10px 10px","-moz-border-radius":"10px 10px","-webkit-border-radius":"10px 10px","padding":"25px 20px 15px 80px","margin":"10px 0px 15px 5px","-webkit-box-shadow":"2px 2px 3px #999","-moz-box-shadow":"2px 2px 3px #999","min-height":"40px","height":"auto !important","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"});$(".noteclassic").css({"background-color":"#EEF","background-image":"url(http://i20.servimg.com/u/f20/14/50/49/34/note10.png)"});$(".noteimportant").css({"background-color":"#FFC","background-image":"url(http://i20.servimg.com/u/f20/14/50/49/34/import10.png)"});$(".notewarning").css({"background-color":"#FDD","background-image":"url(http://i20.servimg.com/u/f20/14/50/49/34/warnin10.png)"});$(".notetip").css({"background-color":"#E4F6F8","background-image":"url(http://i20.servimg.com/u/f20/14/50/49/34/tip10.png)"});$(".notehelp").css({"background-color":"#D8F3C9","background-image":"url(http://i20.servimg.com/u/f20/14/50/49/34/help10.png)"});$(".noteinfo").css({"background-color":"#BDE5F8","background-image":"url(http://i48.servimg.com/u/f48/16/28/30/49/knob_i10.png)"});$(".notesuccess").css({"background-color":"#DFF2BF","background-image":"url(http://i48.servimg.com/u/f48/16/28/30/49/knob_v10.png)"});$(".noteerror").css({"background-color":"#FFBABA","background-image":"url(http://i48.servimg.com/u/f48/16/28/30/49/knob_r10.png)"});$(".notevalidation").css({"background-color":"#FFCCBA","background-image":"url(http://i48.servimg.com/u/f48/16/28/30/49/knob_c10.png)"});$(".notesuggest").css({"background-color":"#F1AF84","background-image":"url(http://i48.servimg.com/u/f48/16/28/30/49/knob_h10.png)"})}); </script>

Cho toàn bộ code sau vào CSS

Code:: /*-------------BBcode notes phần6------------ */ .Mail { -moz-box-shadow: 1px 1px 10px red; -webkit-box-shadow: 1px 1px 10px red; border-color: red; box-shadow: 1px 1px 10px red; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid; margin: 10px auto; padding: 15px 10px 15px 70px; background-repeat: no-repeat; background-position: 10px center; width: 90%; } .Mail { -moz-box-shadow: 1px 1px 10px red; -webkit-box-shadow: 1px 1px 10px red; border-color: red; box-shadow: 1px 1px 10px red; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid; margin: 10px auto; padding: 15px 10px 15px 70px; background-repeat: no-repeat; background-position: 10px center; width: 90%; } .Mail { color: Black; font-family: 'Lobster'; font-style: normal; font-weight: normal; font-size: 15px; background-color: #FA7878; background-image: url('http://png-3.findicons.com/files/icons/1676/primo/48/email_open.png'); } .Copyright2 { -moz-box-shadow: 1px 1px 10px blue; -webkit-box-shadow: 1px 1px 10px blue; border-color: blue; box-shadow: 1px 1px 10px blue; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid; margin: 10px auto; padding:15px 10px 15px 70px; background-repeat: no-repeat; background-position: 10px center; width: 90%; } .Copyright2 { color: blue; font-family: 'Lobster'; font-style: normal; font-weight: normal; font-size: 15px; background-color: transparent; background-image: url('http://png-3.findicons.com/files/icons/138/toolbar/48/copy.png'); } .sign { -moz-box-shadow: 1px 1px 10px green; -webkit-box-shadow: 1px 1px 10px green; border-color: green; box-shadow: 1px 1px 10px green; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid; margin: 10px auto; padding:15px 10px 15px 70px; background-repeat: no-repeat; background-position: 10px center; width: 90%; } .sign { color: green; font-family: 'Lobster'; font-style: normal; font-weight: normal; font-size: 15px; background-color: transparent; background-image: url('http://png-5.findicons.com/files/icons/1588/farm_fresh_web/32/text_signature.png'); } .new2 { -moz-box-shadow: 1px 1px 10px orange; -webkit-box-shadow: 1px 1px 10px orange; border-color: orange; box-shadow: 1px 1px 10px orange; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid; margin: 10px auto; padding:15px 10px 15px 70px; background-repeat: no-repeat; background-position: 10px center; width: 90%; } .new2 { color: orange; font-family: 'Lobster'; font-style: normal; font-weight: normal; font-size: 15px; background-color: transparent; background-image: url('http://png-2.findicons.com/files/icons/1620/crystal_project/32/konqsidebar_news.png'); } .contact2 { -moz-box-shadow: 1px 1px 10px indigo; -webkit-box-shadow: 1px 1px 10px indigo; border-color: indigo; box-shadow: 1px 1px 10px indigo; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid; margin: 10px auto; padding:15px 10px 15px 70px; background-repeat: no-repeat; background-position: 10px center; width: 90%; } .contact2 { color: indigo; font-family: 'Lobster'; font-style: normal; font-weight: normal; font-size: 15px; background-color: transparent; background-image: url('http://png-2.findicons.com/files/icons/42/basic/48/address.png'); } .Download2 { -moz-box-shadow: 1px 1px 10px #000; -webkit-box-shadow: 1px 1px 10px #000; border-color: #000; box-shadow: 1px 1px 10px #000; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid; margin: 10px auto; padding:15px 10px 15px 70px; background-repeat: no-repeat; background-position: 10px center; width: 90%; } .Download2 { color: #000; font-family: 'Lobster'; font-style: normal; font-weight: normal; font-size: 15px; background-color: transparent; background-image: url('http://png-4.findicons.com/files/icons/829/quartz/48/box_download.png'); } .Announce2 { -moz-box-shadow: 1px 1px 10px brown; -webkit-box-shadow: 1px 1px 10px brown; border-color: brown; box-shadow: 1px 1px 10px brown; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid; margin: 10px auto; padding:15px 10px 15px 70px; background-repeat: no-repeat; background-position: 10px center; width: 90%; } .Announce2 { color: brown; font-family: 'Lobster'; font-style: normal; font-weight: normal; font-size: 15px; background-color: transparent; background-image: url('http://png-3.findicons.com/files/icons/653/the_spherical/48/mute.png'); } .Bin2{ -moz-box-shadow: 1px 1px 10px orange; -webkit-box-shadow: 1px 1px 10px orange; border-color: orange; box-shadow: 1px 1px 10px orange; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid; margin: 10px auto; padding:15px 10px 15px 70px; background-repeat: no-repeat; background-position: 10px center; width: 90%; } .Bin2 { color: black; font-family: 'Lobster'; font-style: normal; font-weight: normal; font-size: 15px; background-color: #f5873d; background-image: url('http://png-4.findicons.com/files/icons/1938/xp_icandy_1/48/recycle_bin_full3.png'); } .Load2 { -moz-box-shadow: 1px 1px 10px grey; -webkit-box-shadow: 1px 1px 10px grey; border-color: grey; box-shadow: 1px 1px 10px grey; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid; margin: 10px auto; padding:15px 10px 15px 70px; background-repeat: no-repeat; background-position: 10px center; width: 90%; } .Load2 { color: grey; font-family: 'Lobster'; font-style: normal; font-weight: normal; font-size: 15px; background-color: transparent; background-image: url('http://png-4.findicons.com/files/icons/977/rrze/48/maintenance_time.png'); } .warning2 { -moz-box-shadow: 1px 1px 10px red; -webkit-box-shadow: 1px 1px 10px red; border-color: red; box-shadow: 1px 1px 10px red; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid; margin: 10px auto; padding: 15px 10px 15px 70px; background-repeat: no-repeat; background-position: 10px center; width: 90%; } .warning2 { color: red; font-family: 'Lobster'; font-style: normal; font-weight: normal; font-size: 15px; background-color: transparent; background-image: url('http://i47.servimg.com/u/f47/16/97/26/79/error10.png'); } .lock2 { -moz-box-shadow: 1px 1px 10px blue; -webkit-box-shadow: 1px 1px 10px blue; border-color: blue; box-shadow: 1px 1px 10px blue; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid; margin: 10px auto; padding:15px 10px 15px 70px; background-repeat: no-repeat; background-position: 10px center; width: 90%; } .lock2 { color: blue; font-family: 'Lobster'; font-style: normal; font-weight: normal; font-size: 15px; background-color: transparent; background-image: url('http://i47.servimg.com/u/f47/16/97/26/79/lock10.png'); } .yes2 { -moz-box-shadow: 1px 1px 10px green; -webkit-box-shadow: 1px 1px 10px green; border-color: green; box-shadow: 1px 1px 10px green; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid; margin: 10px auto; padding:15px 10px 15px 70px; background-repeat: no-repeat; background-position: 10px center; width: 90%; } .yes2 { color: green; font-family: 'Lobster'; font-style: normal; font-weight: normal; font-size: 15px; background-color: transparent; background-image: url('http://i47.servimg.com/u/f47/16/97/26/79/accept11.png'); } .tag2 { -moz-box-shadow: 1px 1px 10px orange; -webkit-box-shadow: 1px 1px 10px orange; border-color: orange; box-shadow: 1px 1px 10px orange; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid; margin: 10px auto; padding:15px 10px 15px 70px; background-repeat: no-repeat; background-position: 10px center; width: 90%; } .tag2 { color: orange; font-family: 'Lobster'; font-style: normal; font-weight: normal; font-size: 15px; background-color: transparent; background-image: url('http://i47.servimg.com/u/f47/16/97/26/79/link_a10.png'); } .move2 { -moz-box-shadow: 1px 1px 10px indigo; -webkit-box-shadow: 1px 1px 10px indigo; border-color: indigo; box-shadow: 1px 1px 10px indigo; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid; margin: 10px auto; padding:15px 10px 15px 70px; background-repeat: no-repeat; background-position: 10px center; width: 90%; } .move2 { color: indigo; font-family: 'Lobster'; font-style: normal; font-weight: normal; font-size: 15px; background-color: transparent; background-image: url('http://i47.servimg.com/u/f47/16/97/26/79/page_w10.png'); } .ban2 { -moz-box-shadow: 1px 1px 10px #000; -webkit-box-shadow: 1px 1px 10px #000; border-color: #000; box-shadow: 1px 1px 10px #000; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid; margin: 10px auto; padding:15px 10px 15px 70px; background-repeat: no-repeat; background-position: 10px center; width: 90%; } .ban2 { color: #000; font-family: 'Lobster'; font-style: normal; font-weight: normal; font-size: 15px; background-color: transparent; background-image: url('http://i47.servimg.com/u/f47/16/97/26/79/set_se10.png'); } .tum2 { -moz-box-shadow: 1px 1px 10px brown; -webkit-box-shadow: 1px 1px 10px brown; border-color: brown; box-shadow: 1px 1px 10px brown; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid; margin: 10px auto; padding:15px 10px 15px 70px; background-repeat: no-repeat; background-position: 10px center; width: 90%; } .tum2 { color: brown; font-family: 'Lobster'; font-style: normal; font-weight: normal; font-size: 15px; background-color: transparent; background-image: url('http://i47.servimg.com/u/f47/16/97/26/79/thumb_10.png'); } .error_bbc, .warning_bbc, .okay_bbc, .info_bbc, .comet_bbc, .nucler_bbc, .note_bbc { margin-bottom: 1.5em; padding: 1em 1.5em 1em 5.5em; border-bottom: 2px solid #fff; border-radius: 10px 10px 10px 10px; border: 2px solid #fff; color: #444 } .error_bbc {background: #fbe3e4 url(http://i48.servimg.com/u/f48/15/98/03/89/error10.gif) 2.2em center no-repeat; border-color: #e0011b} .error_bbc a {color: #d12f19} .warning_bbc {background: #fff6bf url(http://i48.servimg.com/u/f48/15/98/03/89/warnin10.gif) 2.2em center no-repeat; border-color: #ffd324} .warning_bbc a {color: #817134} .okay_bbc {background: #e9ffdd url(http://i48.servimg.com/u/f48/15/98/03/89/okay10.gif) 2.2em center no-repeat; border-color: #72c868} .okay_bbc a {color: #529214} .info_bbc {background: #e2ecee url(http://i48.servimg.com/u/f48/15/98/03/89/info10.gif) 2.2em center no-repeat; border-color: #3474F4} .info_bbc a {color: #2d7ba2} .comet_bbc {background: #e7b3ff url(http://i48.servimg.com/u/f48/15/98/03/89/commen10.png) 2.2em center no-repeat; border-color: #a034f4} .comet_bbc a {color: #7a2da2} .nucler_bbc {background: #fff4e5 url(http://i48.servimg.com/u/f48/15/98/03/89/nuclea10.png) 2.2em center no-repeat; border-color: #f4bc34} .nucler_bbc a {color: #a2752d} .note_bbc {background: #e5faff url(http://i48.servimg.com/u/f48/15/98/03/89/note11.png) 2.2em center no-repeat; border-color: #34cef4} .note_bbc a {color: #2d88a2}

Nguồn HotroFM

Bài viết: 1 [Code]BB code notes phần 6 Sat Mar 09, 2013 2:40 pm