قالب بندی پست بیت های افقی (کمکم کنید)

[kamran0080]

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


اینم فایل هایی که برا طراحیش لازمتون میشه
http://wle.ir/up/do.php?id=44



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

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

-------------------
استایل:

کد php:

.postbit1_kog {
    border-style:solid;
    border-width:1px;
   border-radius:6px 0 6px 0;
    background-color:#EFEFEF;
    border-color:#DDDDDD #DDDDDD #C4C4C4 #C4C4C4;
    direction:rtl;
    font-family:Tahoma;
    font-size:11px;
    margin:5px 6px;
    padding:3px;
    text-align:right;
    -moz-transition:all 0.8s ease-out;
    -webkit-transition:all 0.8s ease-out;
    -o-transition:all 0.8s ease-out;
    -ms-transition:all 0.8s ease-out;
    }
.postbit1_kog:hover {
border-radius:0 0 6px 6px;
box-shadow:0 0 3px #9b9b9b;
    -moz-transition:all 0.5s ease-in;
    -webkit-transition:all 0.5s ease-in;
    -o-transition:all 0.5s ease-in;
    -ms-transition:all 0.5s ease-in;
} 


کد فراخوانی :

کد php:

<div class="postbit1_kog"> <center><strong><span class="largetext">{$post['profilelink']}</span></strong></center> </div>
    <div class="postbit1_kog"><center>{$post['useravatar']}</center></div>
    <div class="postbit1_kog"><center>{$post['groupimage']}</center></div>
    <div class="postbit1_kog"><font color="#4d4d4d"><a href="search.php?action=finduser&amp;uid={$post['uid']}">یافتن تمام ارسالهای نویسنده</a></font></div>
    <div class="postbit1_kog"><font color="#800080">وضعیت : {$post['onlinestatus']}</font></div>
    <div class="postbit1_kog"><font color="#800080">{$post['user_details']}</font></div>
       </strong>
       <br />
       </span> 


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

کد php:

postbit_classic 


حالا این کد ها را پیدا کنید :

کد php:

<strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />
        <span class="smalltext">
            {$post['usertitle']}<br />
            {$post['userstars']}
            {$post['groupimage']}
            {$post['useravatar']}<br />
            {$post['user_details']}
        </span> 


به جای کدبالا ، شما باید کد استایل + کد فراخوانی رو قرار بدید . البته می تونید کد استایل رو در Global.css قالبتون قرار بدید و کد فراخوانی رو به جای کد بالا قرار بدید .

[kamran0080]

دوستان قرار بود راهنماییمون کنید

[jan123]

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

کد:

postbit

به اول کد ها کد

کد:

<style>

.postbit1_kog {
    border-style:solid;
    border-width:1px;
   border-radius:6px 0 6px 0;
    background-color:#EFEFEF;
    border-color:#DDDDDD #DDDDDD #C4C4C4 #C4C4C4;
    direction:rtl;
    font-family:Tahoma;
    font-size:11px;
    margin:5px 6px;
    padding:3px;
    text-align:right;
    -moz-transition:all 0.8s ease-out;
    -webkit-transition:all 0.8s ease-out;
    -o-transition:all 0.8s ease-out;
    -ms-transition:all 0.8s ease-out;
    text-align:center;
    }
.postbit1_kog:hover {
border-radius:0 0 6px 6px;
box-shadow:0 0 3px #9b9b9b;
    -moz-transition:all 0.5s ease-in;
    -webkit-transition:all 0.5s ease-in;
    -o-transition:all 0.5s ease-in;
    -ms-transition:all 0.5s ease-in;
}
</style>

رو اضافه نمایید برای کادر بندی
کد

کد:

{$post['useravatar']}

را باکد

کد:

<div class="postbit1_kog">{$post['useravatar']}</div>

وکد

کد:

{$post['user_details']}

را با کد

کد:

<div class="postbit1_kog">{$post['user_details']}</div>

وکد

کد:

{$post['profilelink']}

را با کد

کد:

<div style="width:120px" class="postbit1_kog">{$post['profilelink']}</div>

وکد

کد:

{$post['usertitle']}

را با کد

کد:

<div style="width:120px" class="postbit1_kog">{$post['usertitle']}</div>

وکد

کد:

{$post['userstars']}

راباکد

کد:

<div style="width:120px" class="postbit1_kog">{$post['userstars']}</div>

وکد

کد:

{$post['groupimage']}

را باکد

کد:

<div style="width:120px" class="postbit1_kog">{$post['groupimage']}</div>

تعویض نمایید برای کادر بندی هر متغیر دیگری ازکد

کد:

<div class="postbit1_kog">متغیر مورد نظر</div>

استفاده نمایید.
موفق باشید.

[kamran0080]

یه دنیا ممنون . فقط یه چیز . چرا برا قالب من وقتی توی سایت اثلیم اعمال کردم . دیگه دکمه تشکر پرید ؟ اسم تمش test هست

[jan123]

دروداین که به تشکر ربطی نداره .وقتی قالب عوض میکنید متغیرا می پرن

[kamran0080]

مهندس خیلی ممنونم ازت میشه موارد زیر رو اصلاح کنیم ؟


1 - چطوری طول کادر های اول رو بیشتر کنیم ؟ مثلا الان ستاره هارو ببینید چطوری شدن ؟

2 - چطوری چطوری فاصله بین کادر های اول رو کم کنیم ؟

3 - حالت من رو چطوری تو یه کادر جدا پایینش بذاریم ؟

http://wle.ir/up/do.php?img=47

[jan123]

برای کم کردن فاصله ها

کد:

</br>یا<br>

ها رو حذفنمایید.
برای اضافه کرن طول
عبارت های

کد:

width:120px

تغییر دهید مثلا به جای 120 از 200 استفاده نمایید.
برای حالت من به پست بیت آتور یوسر رفته متغییرش رو پیدا کنید (شبیه چیزی مثل {$mood} خواهد بود) وحذف نمایید بعدا
با کد

کد:

<div class="postbit1_kog">متغیر مورد نظر</div>

زیر کد

کد:

{$post['user_details']}

قراردهید.

[kamran0080]

اقا جان ازت ممنونم مشکل طول و فواصل رو رفع کردم . فقط نتونستم ایکون حالت من رو جدا کنم .
توی postbit_author_user متغییر مای مود وجود نداشت

[kamran0080]

سلام یه سوال داشتم .

سطون سمت چپ که همه توی یه کادر هستند رو چه طور تک تک توی کادر بذارم ؟

من موارد زیر رو میتونم درست کنم .

1 - میتونم کل کادرشو بردارم
2 - میتونم سپاس ها و سپاس شده رو بذارم تو کادر

میخوام اینارو بذارم تو یه کادر ولی نمیدونم باید چه قسمتی رو ویرایش کنم

1 - اخطار
2 - اعتبار
3 - تاریخ عضویت
3 - ارسال ها


تشکر ازتون

[jan123]

دروداز قالب مورد نظر->تمپلت پستبیت-> پستبیت آتور یوسر
رفته به اولش کد:

کد:

<style>

.postbit1_kog {
    border-style:solid;
    border-width:1px;
   border-radius:6px 0 6px 0;
    background-color:#EFEFEF;
    border-color:#DDDDDD #DDDDDD #C4C4C4 #C4C4C4;
    direction:rtl;
    font-family:Tahoma;
    font-size:11px;
    margin:5px 6px;
    padding:3px;
    text-align:right;
    -moz-transition:all 0.8s ease-out;
    -webkit-transition:all 0.8s ease-out;
    -o-transition:all 0.8s ease-out;
    -ms-transition:all 0.8s ease-out;
    text-align:center;
    }
.postbit1_kog:hover {
border-radius:0 0 6px 6px;
box-shadow:0 0 3px #9b9b9b;
    -moz-transition:all 0.5s ease-in;
    -webkit-transition:all 0.5s ease-in;
    -o-transition:all 0.5s ease-in;
    -ms-transition:all 0.5s ease-in;
}
</style>

رواضافه نمایید

برای کادر بندی هر متغیری ازکد

کد:

<div class="postbit1_kog">متغیر مورد نظر</div>

استفاده نمایید.
موفق باشید.