آموزش زیبا سازی بخش پست ها ( بخش یکم بدون تصویر )

[میدوری]

آموزشی برای زیباتر کردن پست ها قرار میدهم امید که بکار بیاید .
اگر می خواهید پست های خود را در کادری زیبا و به حالت نقل قول در بیاورید از آموزش زیر استفاده کنید . این آموزش برای دو حالت عمودی و افقی در پست بیت فرق میکند . هر کدام را جداگانه باید وارد بخش مربوطه بکنید .

ابتدا حالت افقی یا معمولی پست بیت

به مسیر زیر بروید
پنل مدیر کل > قالب ها و پوسته > قالب ها > قالب مورد نظر > زیرمجموعه >postbit < postbit template
و کد زیر را پیدا کنید

کد php:

<div class="post_body" id="pid_{$post['pid']}"> 


و درست قبل از آن کد های زیر را وارد کنید

کد php:

<div class="post_arrow"></div>
<style type="text/css">
.post_body {
-moz-border-radius:6px 6px 6px 6px;
border-radius:6px 6px 6px 6px;
border:1px solid #E5E5E5;
background:none repeat scroll 0 0 #EAEAEA;
margin:5px;
margin-bottom:10px;
padding:15px;
color:#000;
}
.post_arrow {
border-bottom:15px solid #EAEAEA;
border-left:15px solid transparent;
border-right:15px solid transparent;
position:relative;
z-index:1;
margin-bottom:-1;
height:0;
margin-bottom:-12px;
margin-right:25px;
margin-top:3px;
width:0;
}
</style><div class="post_arrow"></div> 


نتیجه کار را در تصویر زیر ببینید

===============
[attachment=7779]
===============

حالت پست بیت عمودی یا کلاسیک

به مسیر زیر بروید
پنل مدیر کل > قالب ها و پوسته > قالب ها > قالب مورد نظر > زیرمجموعه >postbitclassic < postbit template
و کد زیر را پیدا کنید

کد php:

<div class="post_body" id="pid_{$post['pid']}"> 


و درست قبل از آن کد های زیر را وارد کنید

کد php:

<div class="post_arrow"></div>
<style type="text/css">
.post_body {
-moz-border-radius:6px 6px 6px 6px;
border-radius:6px 6px 6px 6px;
border:1px solid #E5E5E5;
background:none repeat scroll 0 0 #EAEAEA;
margin:5px;
margin-bottom:10px;
padding:15px;
color:#000;
}
.post_arrow {
border-top:15px solid #EAEAEA;
border-left:10px solid transparent;
border-right:10px solid transparent;
position:relative;
z-index:10px;
margin-bottom:-15px;
height:15px;
margin-bottom:-40px;
margin-right:-5px;
margin-top:10px;
width:5px;
}
</style><div class="post_arrow"></div> 


نتیجه کار را در تصویر زیر ببینید

================
[attachment=7780]
================

توضیح اینکه این آموزش بدون نیاز به هیچگونه تصویر به این نتیجه میرسد و حالت دومی هم دارد که می توان حاشیه برای کادرایجاد کرد و فلش نمایشگر دارد که با تصویر انجام می گیرد و در بخش دوم توضیح خواهم داد .

کار تمام است . سعی کنید با تغییر در رنگ بندی و گرد کردن کم و زیاد گوشه ها ی کادر به الگوی مورد نظر خودتان برسید .

منبع : تالار میدوری