ShineGhost
24-02-14, 12:53 PM
Bạn đã cảm thấy nhàm chán với giao diện của BBCODE QUOTE (Trích dẫn) chưa? Nhìn mãi cũng thật là đơn điệu phải không nào? Đã đến lúc thay đổi phong cách cho nó rồi
Chỉ với vài nét "chấm phá" đơn giản, bạn đã có thể làm nó trở nên chuyên nghiệp hơn, mang phong cách khác biệt hơn để tránh sự nhàm chán khi cứ phải nhìn đi nhìn lại cái khung trích dẫn như vậy
+ Cách làm không thể đơn giản hơn:
Thay toàn bộ code trong bbcode.css bằng code dưới
@charset "UTF-8";
/* CSS Document */.bbcode_container { margin:20px; margin-top:5px; display:block;}.bbcode_container .bbcode_desc { margin-bottom:2px; font-size:{vb:stylevar small_fontSize};}/*text-align should alwais be LTR for the CODE blocks*/.bbcode_container div.bbcode_code,.bbcode_container pre.bbcode_code { margin:0; padding:6px; border:1px inset; text-align:left; overflow:scroll; direction:ltr; background:{vb:stylevar bbcode_code_background}; font-size:{vb:stylevar mid_fontSize}; }.bbcode_container code.bbcode_code { margin:0; text-align:{vb:stylevar left}; direction:ltr; font-size:{vb:stylevar mid_fontSize}; }.bbcode_container code.bbcode_code code { white-space:nowrap;}.bbcode_container div.bbcode_quote {margin: 0;padding: 5px 20px;border: none;border-left: 4px rgb(204, 204, 204) solid;display: block;background-color: rgba(204, 204, 204, 0.1);}.bbcode_container .bbcode_quote_container { display:block; width: 9px; height: 13px; position: absolute; top: 5; {vb:stylevar left}: -9px;}.bbcode_quote div.quote_container { -moz-border-radius: {vb:stylevar border_radius}; -webkit-border-radius: {vb:stylevar border_radius}; border-radius: {vb:stylevar border_radius}; padding: {vb:stylevar bbcode_quote_padding};}.bbcode_quote .bbcode_postedby img { position: relative; top: {vb:math {vb:math {vb:stylevar bbcode_quote_postedby_font.fontSize}{vb:stylevar bbcode_quote_postedby_font.units}}-11px};}.bbcode_container div.bbcode_quote.printable { background:none; border:none;}.bbcode_container div.bbcode_quote div.message { /*font-style:italic;*/ padding:8px 0px;}/* fix the bug where li's in quotes are floated */.bbcode_container div.bbcode_quote div.message ol>li, .bbcode_container div.bbcode_quote div.message ul>li{ float: none;}/* from components.css */.bbcode_postedby { font: {vb:stylevar bbcode_quote_postedby_font};}.bbcode_postedby img { margin:0;}
Cuối cùng là thay toàn bộ code trong bbcode_quote bằng code sau
<div class="bbcode_container">
<div class="bbcode_quote"> <div class="quote_container"> <div class="bbcode_quote_container"></div> <vb:if condition="$show['username']"> <div class="message">{vb:raw message}</div> <small style="font: 12px Arial italic;color: rgb(66, 58, 56);">Gửi bởi: <strong>{vb:raw username}</strong><vb:if condition="$postid"><a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}showthread.php?{vb:raw session.sessionurl}p={vb:raw postid}#post{vb:raw postid}" rel="nofollow"><img class="inlineimg" src="{vb:stylevar imgdir_button}/viewpost-{vb:stylevar right}.png" alt="{vb:rawphrase view_post}" /></a></vb:if></small> <vb:else /> {vb:raw message} </vb:if> </div> </div></div>
Theo:clbgamesvn.com
Chỉ với vài nét "chấm phá" đơn giản, bạn đã có thể làm nó trở nên chuyên nghiệp hơn, mang phong cách khác biệt hơn để tránh sự nhàm chán khi cứ phải nhìn đi nhìn lại cái khung trích dẫn như vậy
+ Cách làm không thể đơn giản hơn:
Thay toàn bộ code trong bbcode.css bằng code dưới
@charset "UTF-8";
/* CSS Document */.bbcode_container { margin:20px; margin-top:5px; display:block;}.bbcode_container .bbcode_desc { margin-bottom:2px; font-size:{vb:stylevar small_fontSize};}/*text-align should alwais be LTR for the CODE blocks*/.bbcode_container div.bbcode_code,.bbcode_container pre.bbcode_code { margin:0; padding:6px; border:1px inset; text-align:left; overflow:scroll; direction:ltr; background:{vb:stylevar bbcode_code_background}; font-size:{vb:stylevar mid_fontSize}; }.bbcode_container code.bbcode_code { margin:0; text-align:{vb:stylevar left}; direction:ltr; font-size:{vb:stylevar mid_fontSize}; }.bbcode_container code.bbcode_code code { white-space:nowrap;}.bbcode_container div.bbcode_quote {margin: 0;padding: 5px 20px;border: none;border-left: 4px rgb(204, 204, 204) solid;display: block;background-color: rgba(204, 204, 204, 0.1);}.bbcode_container .bbcode_quote_container { display:block; width: 9px; height: 13px; position: absolute; top: 5; {vb:stylevar left}: -9px;}.bbcode_quote div.quote_container { -moz-border-radius: {vb:stylevar border_radius}; -webkit-border-radius: {vb:stylevar border_radius}; border-radius: {vb:stylevar border_radius}; padding: {vb:stylevar bbcode_quote_padding};}.bbcode_quote .bbcode_postedby img { position: relative; top: {vb:math {vb:math {vb:stylevar bbcode_quote_postedby_font.fontSize}{vb:stylevar bbcode_quote_postedby_font.units}}-11px};}.bbcode_container div.bbcode_quote.printable { background:none; border:none;}.bbcode_container div.bbcode_quote div.message { /*font-style:italic;*/ padding:8px 0px;}/* fix the bug where li's in quotes are floated */.bbcode_container div.bbcode_quote div.message ol>li, .bbcode_container div.bbcode_quote div.message ul>li{ float: none;}/* from components.css */.bbcode_postedby { font: {vb:stylevar bbcode_quote_postedby_font};}.bbcode_postedby img { margin:0;}
Cuối cùng là thay toàn bộ code trong bbcode_quote bằng code sau
<div class="bbcode_container">
<div class="bbcode_quote"> <div class="quote_container"> <div class="bbcode_quote_container"></div> <vb:if condition="$show['username']"> <div class="message">{vb:raw message}</div> <small style="font: 12px Arial italic;color: rgb(66, 58, 56);">Gửi bởi: <strong>{vb:raw username}</strong><vb:if condition="$postid"><a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}showthread.php?{vb:raw session.sessionurl}p={vb:raw postid}#post{vb:raw postid}" rel="nofollow"><img class="inlineimg" src="{vb:stylevar imgdir_button}/viewpost-{vb:stylevar right}.png" alt="{vb:rawphrase view_post}" /></a></vb:if></small> <vb:else /> {vb:raw message} </vb:if> </div> </div></div>
Theo:clbgamesvn.com