مقاله: آموزش کادربندی و زیباسازی امضا نسخه 2

درود .

آموزش کادربندی و زیباسازی امضا نسخه 2 که توسط علی خلیلیفر عزیز آماده شده هست .

نمونه شات :



ابتدا پوشه پیوست شده رو در روت انجمن آپلود کنید .

سپس به قالب Additional.css بروید و کد های زیر را به انتهای آن اضافه کنید :

کد:

@font-face {
font-family: 'BYekan';
src: url('emza/BYekan.eot?#') format('eot'),  /* IE6–8 */ url('emza/BYekan.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('emza/BYekan.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}


.emza {
box-shadow: 0px 0px 87px rgb(238, 238, 238) inset,rgba(0, 0, 0, 0.4) 0px 4px 4px -4px;
margin: 10px;
padding: 10px;
border-radius: 10px 10px 17px 17px;
border: 2px solid rgb(235, 235, 235);
background:white url(emza/blockquote.png) no-repeat 98.54% 27px;
border-bottom:4px solid rgb(235, 235, 235);
}


.module {
background: #eee;
margin: 0 0 20px 0;
}


.module h2 {
background: #ccc;
line-height: 2;
padding: 0 0 0 10px;
font-size: 16px;
box-shadow: inset 0 25px 10px -10px rgba(255, 255, 255, 0.2);
border-radius: 9px;
}


.module h2 a {
float: right;
position: relative;
text-decoration: none;
color: rgb(255, 255, 255);
padding: 0 10px;
-webkit-transition: padding 0.1s linear;
-moz-transition: padding 0.1s linear;
-ms-transition: padding 0.1s linear;
-o-transition: padding 0.1s linear;
border-radius: 0px 10px;
font: 14px "BYekan",Calibri;
direction: rtl;
text-shadow: 1px 1px rgb(131, 0, 0);
padding-top: 4px;
padding-bottom: 4px;
margin-top: -37px;margin-right: 38px;
}


.module h2 a:hover {
padding: 0 14px;
padding-top:4px;
padding-bottom:4px;
}


.module h2 a:active {
padding: 0 16px;
padding-top:4px;
padding-bottom:4px;
}


.module h2 a:before,.module h2 a:after {
content: "";
position: absolute;
top: 50%;
width: 0;
height: 0;
}


.module h2 a:before {
left: -12px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
margin-top: -8px;
}


.module.blue h2 a {
background: rgb(233, 0, 0);
}


.module.blue h2 a:hover {
background: #ff8400;
}


.module.blue h2 a:after {
left: -5px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid rgb(233, 0, 0);
margin-top: -6px;
}


.module.blue h2 a:hover:after {
border-right-color: #ff8400;
}


.matn {
direction:rtl;
border-right:0px solid #cecece;
font:14px BYekan;
color: rgb(134, 134, 134);
padding-right:6px;
font-weight:normal;
margin-right:50px;
}


.c {
float:left;
background:none;
margin-top:-22px;
}


.c a {
background: rgb(219, 219, 219) !important;
}


.c a:after {
left: -5px !important;
border-top: 6px solid transparent !important;
border-bottom: 6px solid transparent !important;
border-right: 6px solid rgb(219, 219, 219) !important;;
margin-top: -6px !important;;
}

سپس به قالب postbit_legacy بروید و به کد زیر را پیدا کنید :

کد:

<div class="signaturecontainer">{vb:raw post.signature}</div>

و جایگزین کنید با :

کد:

<div class="emza">
<div class="module blue">
<img src="emza/text_signature.png" style="float: right;margin-top: -38px;" />
<h2> <a href="#">امضاي {vb:raw post.musername}</a></h2></div>
<div class="matn">{vb:raw post.signature}</div>
</div>

موفق باشید .