You are not connected. Please login or register

 » Forumotion » Share Code » Css » tổng hợp khung code , quote , spoiler

tổng hợp khung code , quote , spoiler

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

๖ۣۜTom

avatar
Admintrator
Admintrator
c: HƯỚNG DẪN CÁCH CHÈN:

- Bảng diều khiển của người quản trị ACP > Quản lí tổng thể > Display >
Pictures and Colors > Colors > CSS Stylesheet >
- Copy và dán codes vào cuối css
- bấm nút Submit



:21.gif: DÀNH CHO VERSION PHPBB2


1. Kiểu 1

demo:
Spoiler:
[You must be registered and logged in to see this link.]
codes:
Spoiler:
Code:
.postbody table{margin-left:auto;margin-right:auto;width:auto!important}.code div.cont_code{background:#f7f7f7 url(http://illiweb.com/bl/spirale.png) no-repeat;border:1px solid #8F8F8F;color:#2E8B57;display:block;font-family:Courier,CourierNew,sans-serif;font-size:.9em;font-style:normal;font-variant:normal;font-weight:normal;line-height:1.3em;margin:2px auto;max-height:200px;overflow:auto;padding-top:5px;white-space:pre!important;width:460px!important}.quote{background:#D2E4F2 url(http://illiweb.com/fa/prosilver/quote.gif) no-repeat top left;border:1px solid #d4d4d4;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:11px;line-height:125%;min-width:500px;padding:6px;text-indent:2em;width:80%}.quote .quote{background-color:#EFE0E6}.quote .quote .quote{background-color:#EBEADD}.quote table{margin:5px 16px 0}a.copyright{color:#844A21;text-decoration:none}a.copyright:hover{color:#dd6900;text-decoration:none}


2. Kiểu 2

demo:
Spoiler:
[You must be registered and logged in to see this link.]
codes:
Spoiler:
Code:
.quote{
    background-color: #FAFAFA;
color: #444;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 125%;
padding: 7px;}
div.postbody table{background: #FFFBC3 none;
border: 1px dashed #FF9C00;}
div.postbody table span.genmed{color:#777777;display:block;padding: 6px 30px 13px 30px;background: #fffbc3 url(http://cdn1.iconfinder.com/data/icons/fatcow/16x16_0440/folder_add.png) no-repeat 5px 8px;font: bold 18px Courier New}


3. Kiểu 3

demo:
Spoiler:
[You must be registered and logged in to see this link.]
codes:
Spoiler:
Code:

.postbody table[width="90%"] .genmed{
background: white url(http://illiweb.com/fa/wysiwyg/comments.png) no-repeat 3px 4px;}

.spoiler .genmed{background: white url(http://i66.servimg.com/u/f66/11/96/49/61/arrow_16.png) no-repeat 3px 4px !important;}

.mod_news .genmed, .postbody .genmed {
border: 1px solid #1675bc;
border-bottom: 0;
padding: 5px;
padding-bottom: 4px;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
background: white url(http://illiweb.com/fa/wysiwyg/page_white_code.png) no-repeat 3px 4px;
padding-left: 22px;}

.code, .quote {
position: relative;
padding: 5px;
font-family: Arial;
font-size: 11px;
color: #858585;
background-color: white;
border: 1px solid #1675bc;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
border-radius: 0 5px 5px 5px;}

.mod_news .code, .mod_news .quote, .spoiler_content, .spoiler_closed{
padding: 5px;
font-family: Arial;
font-size: 11px;
color: #858585;
background-color: white;
border: 1px solid #1675bc;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
border-radius: 0 5px 5px 5px;}

.spoiler_closed{padding: 1px;}

#calendar_container .quote, form[name="_calendar"] .quote{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;}


4. Kiểu 4

demo:
Spoiler:
master1990 đã viết:
WindowsViet nghe nó kì kì sao ...
codes:
Spoiler:
Code:

/*quote---------------------------------------------------------------------*/
 .quote {
font: normal 10pt Segoe UI, Verdana, Tahoma, Arial, Sans-Serif, Trebuchet MS, Georgia, Courier, Times New Roman, Serif;
border-color : black;
color:black;
border-left:solid 5px black !important;
border-top:dashed 1px black !important;
border-right:dashed 1px black !important;
border-bottom:dashed 1px black !important;
background : #ffffff url(http://images.dailyinfo.vn/archive/photo/fashion/201103/20110321/21441121quote.gif) no-repeat;
padding-left: 10px;padding-top: 35px;
padding-right: 10px;padding-bottom: 5px;
max-height:300px;
overflow:auto;}

.code {
color : green;
font-family: Lucida Console;
font-size : 10pt;
border-color : green;
border-left:solid 5px green !important;
border-top:dashed 1px green !important;
border-right:dashed 1px green !important;
border-bottom:dashed 1px green !important;
background : #ffffff url(http://images.dailyinfo.vn/archive/photo/fashion/201103/20110321/21051102code.gif) no-repeat;padding-left: 10px;padding-top: 35px;padding-right: 10px;padding-bottom: 5px;
max-height:300px;   overflow:auto;}

.code div.cont_code::selection{
background-color:green;
color:#fff;
}
.code div.cont_code::-moz-selection {
   background-color:green;
   color:#fff;
}

.code div.cont_code::-webkit-selection {
   background-color:green;
   color:#fff;
}


.code div.cont_code {
max-height:300px;   overflow:auto;
   }

/* Spoiler */
.spoiler_closed {
   display:block;
   font-family: Verdana,Arial,Helvetica,sans-serif;
   font-size: 11px;
   color: #000000;
   line-height: 125%;
   background-color: #fafafa;
   border: #808080;
   border-style: solid;
   border-left-width: 1px;
   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;

   }
.spoiler_closed.hidden {

   display:none;


   }
.spoiler_content {
   display:block;
   font-family: Verdana,Arial,Helvetica,sans-serif;
   font-size: 11px;
   color: #000000;
   line-height: 125%;
   background-color: #fafafa;
   border: #808080;
   border-style: solid;
   border-left-width: 1px;
   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;
padding : 10px;
   }
.spoiler_content.hidden {
   display:none;
   }
 


:c: Kiểu 5

demo:
Spoiler:
<table width="90%" cellspacing="1" cellpadding="0" border="0" align="center" style="&lt;br /&gt; background-color: #2C2A25; border: 0px solid #0A0908; background-image: url('http://img704.imageshack.us/img704/8176/fondito2.png'); -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 12px; color: #0A0908; padding: 5px; -moz-box-shadow: 0px 0px 10px #000; -webkit-box-shadow: 0px 3px 5px #000; box-shadow: 0px 0px 0px #000;&lt;br /&gt;"><tbody><tr><td style="cursor: pointer;"><span><b style="
color: #C7C7C7;
">Spoiler:</b></span></td></tr><tr><td style=" background-color: #0A0908; border-style: solid; border-width: 1px; display: block; font-family: Verdana; font-size: 10px; line-height: 125%; border: 0px solid #0A0908; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 12px; padding: 5px;&lt;br /&gt; background-color: #0A0908; &lt;br /&gt; border: 0px solid #0A0908; &lt;br /&gt;"> </td></tr></tbody></table>

codes:
Spoiler:
Code:
.code{background-color:#;border:0px solid #;background-image:url('http://img704.imageshack.us/img704/8176/fondito2.png');
-moz-border-radius:15px;
-webkit-border-radius:15px;border-radius:12px;color:#0A0908;padding:5px;
-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow: 0px 3px 5px #000;
box-shadow: 0px 0px 0px #000;}

.quote{background-color:#;border:0px solid #;background-image:url('http://img704.imageshack.us/img704/8176/fondito2.png');
-moz-border-radius:15px;
-webkit-border-radius:15px;border-radius:12px;color:#0A0908;padding:5px;
-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow: 0px 3px 5px #000;
box-shadow: 0px 0px 0px #000;}

.spoiler{background-color:#2c2a25;border:0px solid #0A0908;background-image:url('http://img704.imageshack.us/img704/8176/fondito2.png');
-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:12px;color:#0A0908;padding:5px;
-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow: 0px 3px 5px #000;
box-shadow: 0px 0px 0px #000;}

.spoiler_closed{background-color:#0A0908;border:0px solid #0A0908;
-moz-border-radius:15px;
-webkit-border-radius:15px;border-radius:12px;color:#caba9f;padding:5px;}

.spoiler_content{background-color:#0A0908;border:0px solid #0A0908;background-image:url('http://img704.imageshack.us/img704/8176/fondito2.png');
-moz-border-radius:15px;
-webkit-border-radius:15px;border-radius:12px;color:#caba9f;padding:5px;}



:21.gif: DÀNH CHO VERSION PUNBB

Kiểu 1: khung codes nâu

demo:
Spoiler:
[You must be registered and logged in to see this link.]
codes:
Spoiler:
Code:

.resizebox {
position: relative;
left: -5px;
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
height: 25px;
margin: 5px;
background: #765034 url(http://i26.servimg.com/u/f26/11/96/49/61/magnif10.png) no-repeat 3px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;}

.resizebox .resize_border{border: none;}

.resizebox a{
margin-bottom: -5px !important;
font-size: 11px;
color: white !important;
text-shadow: 1px 1px 0px black;}

.fullsize{
margin-left: 10px;
display: block !important;}

blockquote{
width: 90%;
margin-top: 20px;
color: white;
text-shadow: 1px 1px 0px black;
border: 1px solid #4e3e2c !important;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: #735a42 !important;}

blockquote div{
margin-top: -30px;
padding-top: 30px;
background: url(http://i26.servimg.com/u/f26/11/96/49/61/commen10.png) no-repeat top right !important;}

.codebox{
width: 90%;
border: none;
padding-bottom: 10px;
background: url(http://i26.servimg.com/u/f26/11/96/49/61/codebo10.png) no-repeat bottom;
width: 614px;}

.codebox dd.cont_code, .spoiler dd{
border-top: 1px solid #8a684e !important;
margin: 0;
padding-bottom: 0px;
color: white;
text-shadow: 1px 1px 0px black;
background: #765034;}

.codebox dd.cont_code a, .spoiler dd a, blockquote a{
text-decoration:underline;
color: white !important;}

.codebox dt{
border: none;
color: white;
padding-left: 10px;
padding-top: 15px;
margin-bottom: -18px;
height: 33px;
background: transparent url(http://i26.servimg.com/u/f26/11/96/49/61/codeto10.png) no-repeat top right;}
.postmain blockquote {
background-color: white;
border: 1px solid #DDD;
padding: .5em 1em;
}
.spoiler dt{background: transparent url(http://i26.servimg.com/u/f26/11/96/49/61/spoile10.png) no-repeat top right;}


Kiểu 2: khung code kute


demo:
Spoiler:
<dl class="codebox" style="-moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: url(&quot;http://i44.servimg.com/u/f44/15/64/85/86/code10.gif&quot;) no-repeat scroll 0 0 #F5F8FA; border-color: #D7E8F0; border-style: solid; border-width: 1px 1px 1px 20px; color: black; font: 13px/16px 'Courier New',Courier,monospace; margin: 10px 0 10px 10px; max-height: 500px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; background: url(&quot;http://i44.servimg.com/u/f44/15/64/85/86/code-h10.gif&quot;) no-repeat scroll 0 0 white;"><dt>Code: <a href="#" onclick="selectCode(this); return false;"><font face="verdana" color="white">----------</font>Select content</a></dt><dd class="cont_code"><code>&lt;a href="{topics_list_box.row.U_VIEW_TOPIC}"&gt;{topics_list_box.row.TOPIC_TITLE}&lt;/a&gt;</code></dd></dl>

<blockquote style="-moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: url(&quot;http://i44.servimg.com/u/f44/15/64/85/86/quote10.gif&quot;) no-repeat scroll 0 0 #FDF9F9; border-color: #E7BABA; border-style: solid; border-width: 1px 1px 1px 20px; color: #C25252; margin: 10px 0 10px 10px; overflow: auto; padding: 28px 10px 10px; width: 90%; background: url(&quot;http://i44.servimg.com/u/f44/15/64/85/86/quote-13.gif&quot;) no-repeat scroll 0 0 white;"><div><cite>Admin wrote:</cite></div></blockquote>

codes
Spoiler:
Code:
blockquote {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: url("http://i44.servimg.com/u/f44/15/64/85/86/quote10.gif") no-repeat scroll 0 0 #FDF9F9;
    border-color: #E7BABA;
    border-style: solid;
    border-width: 1px 1px 1px 20px;
    color: #C25252;
    margin: 10px 0 10px 10px;
    overflow: auto;
    padding: 28px 10px 10px;
    width: 90%;
}
blockquote:hover {
    background: url("http://i44.servimg.com/u/f44/15/64/85/86/quote-13.gif") no-repeat scroll 0 0 #FFFFFF;
}

.codebox {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: url("http://i44.servimg.com/u/f44/15/64/85/86/code10.gif") no-repeat scroll 0 0 #F5F8FA;
    border-color: #D7E8F0;
    border-style: solid;
    border-width: 1px 1px 1px 20px;
    color: #000000;
    font: 13px/16px 'Courier New',Courier,monospace;
    margin: 10px 0 10px 10px;
    max-height: 500px;
    min-height: 16px;
    overflow: auto;
    padding: 28px 10px 10px;
    width: 90%;
}
.codebox:hover {
    background: url("http://i44.servimg.com/u/f44/15/64/85/86/code-h10.gif") no-repeat scroll 0 0 #FFFFFF;
}
nguồn : 4all



[center]Yahoo Hỗ Trợ [You must be registered and logged in to see this link.]
Chào Mừng Khách viếng thăm đã đến với 4rum
:000001:
Xem lý lịch thành viên http://www.vn-answer.tk
Share this post on: Excite BookmarksDiggRedditDel.icio.usGoogleLiveSlashdotNetscapeTechnoratiStumbleUponNewsvineFurlYahooSmarking

No Comment.

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết