[Code] Làm bảng nổi, khung chú ý trong bài viết

Demo:








Hướng dẫn:


Thêm vào cuối CSS:
- ACP> Display> Colors & Pics> Colors> Css
- copy và chèn codes sau vào cuối Css
- bấm nút submit

Code:

/* Action Notice ---------------------------------------- */ .bvinfo, .bvsuccess, .bvwarning, .bvalert, .bverror, .bvcancel, .bvhelp, .bvref { border: 1px solid; margin: 10px 0px; padding:15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px center; /* Bo tròn góc ---------------------------------------- */ -moz-border-radius: 10px; -webkit-border-radius: 10px; } .bvinfo { color: #00529B; background-color: #BDE5F8; background-image: url('http://i1199.photobucket.com/albums/aa464/finalclap/Icon%20BaoVyMMO/Knob20Info.png'); } .bvref { color: #00529B; background-color: #BDE5F8; background-image: url('http://i1199.photobucket.com/albums/aa464/finalclap/Icon%20BaoVyMMO/referido.png'); } .bvwarning { color: #9F6000; background-color: #FEEFB3; background-image: url('http://i1199.photobucket.com/albums/aa464/finalclap/Icon%20BaoVyMMO/Knob20Attention.png'); } .bvsuccess { color: #4F8A10; background-color: #DFF2BF; background-image:url('http://i1199.photobucket.com/albums/aa464/finalclap/Icon%20BaoVyMMO/Knob20Valid20Green.png'); } .bverror { color: #D8000C; background-color: #FFBABA; background-image: url('http://i1199.photobucket.com/albums/aa464/finalclap/Icon%20BaoVyMMO/Knob20Remove20Red.png'); } .bvcancel { color: #D63301; background-color: #FFCCBA; background-image: url('http://i1199.photobucket.com/albums/aa464/finalclap/Icon%20BaoVyMMO/Knob20Cancel.png'); } .bvhelp { background-color: #CD9BFF; border: 2px solid #6200C4 ; background-image: url(http://i1199.photobucket.com/albums/aa464/finalclap/Icon%20BaoVyMMO/Knob20Help.png) ; } /*-------------------Mod Notice------------------*/ .mod1 { background-color: #ADCBE7; border: 2px solid #0F5C8E; color: #004DFF; background-image: url('http://i1199.photobucket.com/albums/aa464/finalclap/Icon%20BaoVyMMO/register-icon-2-1-1.png'); background-repeat: no-repeat; background-position: 10px center; margin: 10px 0px; padding:15px 10px 15px 50px; /* Bo tròn góc ---------------------------------------- */ -moz-border-radius: 15px; -webkit-border-radius: 15px; } .mod2 { background-color: #D6ECA6; border: 2px solid #8DC93E; background-image: url('http://i1199.photobucket.com/albums/aa464/finalclap/Icon%20BaoVyMMO/Mail-icon-1-1.png'); margin: 10px 0px; padding:15px 10px 15px 80px; background-repeat: no-repeat; background-position: 10px center; /* Bo tròn góc ---------------------------------------- */ -moz-border-radius: 15px; -webkit-border-radius: 15px; } /*-------------------Mod Notice------------------*/ .bvmod{text-align:center;} .bvmod1, .bvmod2, .bvmod3, .bvmod4, .bvmod5{ width: 80%; margin-top:2em; margin-left: auto; margin-right: auto; border-radius: 10px 10px; -moz-border-radius: 10px 10px; -webkit-border-radius: 10px 10px; padding: 15px 20px 15px 80px; margin: 0px 0px 0px 0px; -webkit-box-shadow: 2px 2px 3px #999; -moz-box-shadow: 2px 2px 3px #999; /*IE min-height ♥♥♥*/ min-height:40px; height:auto !important; height:40px; overflow:visible; position:relative; bottom:6px;    right: 6px; border: 1px solid #999999; /*Set the position of the background image*/ background-position: 20px 50%; background-repeat: no-repeat; text-align: justify; } .bvmod1, .bvmod2, .bvmod3, .bvmod4,.bvmod5 { /* IE5 ♥♥♥ */ \margin: 0px 0px -3px 0px; \margin: 0px 0px 0px 0px; } .bvmod1 { background-color: #EEF; background-image: url(http://i1199.photobucket.com/albums/aa464/finalclap/Icon%20BaoVyMMO/note.png); } .bvmod2 { background-color: #FFC; background-image: url(http://i1199.photobucket.com/albums/aa464/finalclap/Icon%20BaoVyMMO/important.png); } .bvmod3 { background-color: #FDD; background-image: url(http://i1199.photobucket.com/albums/aa464/finalclap/Icon%20BaoVyMMO/warning.png); } .bvmod4 { background-color: #E4F6F8; background-image: url(http://i1199.photobucket.com/albums/aa464/finalclap/Icon%20BaoVyMMO/tip.png); } .bvmod5 { background-position: 10px center; background-color: #D8F3C9; background-image: url(http://i1199.photobucket.com/albums/aa464/finalclap/Icon%20BaoVyMMO/help.png);} .bvdown { background:url(http://i1199.photobucket.com/albums/aa464/finalclap/Icon%20BaoVyMMO/gicnL.png) top left no-repeat; padding-top: 30px; padding-left: 70px; color:blue !important; font-family:"Times New Roman", Times, serif; font-weight: bold; font-style: italic; font-size:14px; height:92px; text-align:left !important; } .bvdown a { text-decoration:underline !important; } div .bvdown { margin:auto; width:70%; }

Thay một phần codes trong Posting_body
- ACP> Display > Post & Tin nhắn> Posting_body
- Tìm cái này:

Code:

{SWITCH_EDITOR_MODE}" /></button>

- Thêm vào ngay sau nó:

Code:

<button class="button2" onclick="selectWysiwyg(this,'notes')" onmouseover="helpline('nt')" type="button"><img src="http://i40.servimg.com/u/f40/15/90/59/25/inote110.gif" /></button><div style="visibility:hidden" class="select" id="notes"><button onclick="bbfontstyle('[table class=bvalert][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false">Ghi chú thường</button>
<button onclick="bbfontstyle('[table class=bvinfo][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false"><img src="http://i20.servimg.com/u/f20/15/90/59/25/knob2026.png">Ghi chú: Lưu ý</button>
<button onclick="bbfontstyle('[table class=bvwarning][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false"><img src="http://i20.servimg.com/u/f20/15/90/59/25/knob2027.png">Ghi chú: Chú ý</button>
<button onclick="bbfontstyle('[table class=bvsuccess][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false"><img src="http://i20.servimg.com/u/f20/15/90/59/25/knob2028.png">Ghi chú: Cho điểm</button>
<button onclick="bbfontstyle('[table class=bverror][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false"><img src="http://i20.servimg.com/u/f20/15/90/59/25/knob2029.png">Ghi chú: Gặp lỗi</button>
<button onclick="bbfontstyle('[table class=bvcancel][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false"><img src="http://i20.servimg.com/u/f20/15/90/59/25/knob2030.png">Ghi chú: Thoát</button>
<button onclick="bbfontstyle('[table class=bvhelp][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false"><img src="http://i20.servimg.com/u/f20/15/90/59/25/knob2031.png">Ghi chú: Trợ giúp</button>
<button onclick="bbfontstyle('[table class=bvmod3][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false"><img src="http://i20.servimg.com/u/f20/15/90/59/25/warnin10.png" height="17">Ghi chú cảnh báo</button>
<button onclick="bbfontstyle('[table class=bvmod1][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false"><img src="http://i20.servimg.com/u/f20/15/90/59/25/note1111.png" height="17">Ghi chú chung</button>
<button onclick="bbfontstyle('[table class=bvmod2][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false"><img src="http://i20.servimg.com/u/f20/15/90/59/25/import10.png" height="17">Khóa bài viết</button>
<button onclick="bbfontstyle('[table class=bvmod5][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false"><img src="http://i20.servimg.com/u/f20/15/90/59/25/help1210.png" height="17">Ghi chú giúp đỡ</button>
<button onclick="bbfontstyle('[table class=bvmod4][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false"><img src="http://i20.servimg.com/u/f20/15/90/59/25/tip1110.png" height="17">Ghi chú ý tưởng</button>
<button onclick="bbfontstyle('[table class=bvref][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false"><img src="http://i1199.photobucket.com/albums/aa464/finalclap/Icon%20BaoVyMMO/referido.png" height="17">Ghi chú thành viên</button>
</div>

Xong !

Nguồn: Cntt-k3