آموزش کامل طراحی و ساخت قالب برای ویبولتین(همه ورژن ها)

[EbiramGs]

سلام خدمت دوستان گرامی و وی بی کاران عزیز!!!

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

خب برای شروع کار باید بگم اگه با html و کد های مربوط به تیبل ها (table) آشنایی ندارید حتما قبلش تو این زمینه مطالعه کنید تا در حین آموزش دچار مشکل نشید...لازمه بگم که تمام قالب های وی بی رو با همین کد های تیبل می نویسن...

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

برای این کار اول به admincp برید و بعد از وارد شدن به صفحه اصلی مدیریت روی تب استایل ها & قالب ها کلیک کنید تا پنل گزینه هاش باز بشه،بعد تنظیمات استایل رو انتخاب کنید تا به صفحه مورد نظرمون بریم.

بعد از باز شدن صفحه تنظیمات استایل،یه لیست از تمام استایل های نصب شده روی فرومتون هست که میشه برای هرکدوم تنظیمات خاص خودشو انجام داد،اما ما اینجا برای ایجاد یه قالب درست و بدون نقض از همون قالب اصلی انجمن استفاده می کنیم (Default Style).

برای آشنایی با خصوصیات و اجزای عمومی و جلوه های گرافیکی قالب روی کلید برو مخصوص قالب اصلی کلیک کنید تا وارد صفحه تنظیمات بشید:

بعد از ورود به صفحه تنظیمات با چندین گزینه مواجه میشید که هر کدومو اینجا یکی یکی معرفی می کنم و شرح میدم...

ادامه دارد.............................

[EbiramGs]

دوستان به جز 16 نفر کس دیگه ای نمی خواد قالب بسازه؟؟؟؟؟؟؟

حداقل یه فحش بدید ما بفهمیم یه نفر حواسش هست(البته بجز مدیران گل)

[tofane69]

دوست عزیز کارت درسته
فقط یه سوال با این آموزش شما فارسی کردن یه قالب دیگه هم یاد خواهیم گرفت انشالله؟:دی

[EbiramGs]

بله دوست عزیز سعی می کنم آموزش بدم...

[EbiramGs]

خب تا css نویسی یه منو رسیدیم:

کلاس های css ما بود nbt-menu و nbt-link :

برای نوشتن css به تنظیمات استایل برید و در بخش تعریف CSS اضافی توی کادر نوشتاری دومی (پایین) شروع به نوشتن کد های کنید:

من کد ها رو می نویسم و اونایی که تازه هست رو توضیح میدم:

.nbt-menu
{
background:#ffffff;
text-align:right;
}

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

.nbt-link
{
background:#ffffff;
dispaly:block;
line-height:23px;
width:80px;
float;right;
text-align:center;
}

dispaly:block; و line-height:23px; و float;right; کد های جدید ماست که:

dispaly:block; برای لینک ما تعریف می کنه که به صورت یک بلاک نمایش داده بشه...

line-height:23px; برای تمام خطوط با کلاس nbt-link تعریف می کنه که ارتفاع هر خط باید 23 پیکسل باشه...

float;right; برای تمام بلاک ها تعریف می کنه که باید به سمت راست شناور باشن...

خب این کد ها برای ساخت منوی ما بود اما ما می تونیم منو رو زیبا تر کنیم به این صورت کنه اگه موس روی منوی ما اومد به یه رنگ دیگه ای در بیاد:

.nbt-link a:hover
{
background:#eeeeee;
dispaly:block;
line-height:23px;
width:80px;
float;right;
text-align:center;
}

اینجا کد های ما بجر پس زمینه تغییری نکرد و فقط یه a:hover به آخر کلاس اضافه شد،این یعنی زمانی که موس روی منطقه کلاس قرار گرفت...

متاسفانه من فردا امتحان معادلات دارم و هنوز هیچی نخوندم به خاطر همین نمی تونم زیاد بنویسم...

فقط خواهشا دوستان هر چی می خواید یاد بگیرید رو بگید که من زیاد متفرقه آموزش ندم!!!

تشکر.......

[EbiramGs]

دوستان کسی چیزی نمی خواد که مد نظرش باشه من توضیح بدم؟؟؟

خب اگه نیست برم سر آوردن thead زیر tcat مثل [برای مشاهده لینک ها شما باید عضو سایت باشید برای عضویت در سایت بر روی اینجا کلیک بکنید]

[EbiramGs]

خب میریم سر انتقال thead به زیر tcat

یکی از کار هایی که به یه قالب وی بی جلوه خاصی میده همین کاری هست که ما الان می خوایم انجام بدیم،سایتی که معرفی کردم یه نمونه از این جور قالب روشه...

برای شروع کار به تنظیمات استایل برید و به بخش ویرایش قالب استایل دیفالت برید و روی <<>> کلیک کنید تا لیست کامل قالب ها باز بشه...

بعد از باز شدن لیست به بخش قالب های صفحه اصلی برید و froumhome رو با دوبار کلیک باز کنید تا به بخش ویرایش قالب منتقل بشید:

برای اینکه ما thead رو به زیر tcat منتقل کنیم مرحله اول اینه که ما thead رو از بالای tcat برداریم،برای این کار کد زیر رو پیدا کنید و حذف کنید...

<thead>
    <tr align="center">
      <td class="thead">&nbsp;</td>
      <td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
      <td class="thead">$vbphrase[last_post]</td>
      <td class="thead">$vbphrase[threads]</td>
      <td class="thead">$vbphrase[posts]</td>
      <if condition="$vboptions['showmoderatorcolumn']">
      <td class="thead">$vbphrase[moderator]</td>
      </if>
    </tr>
</thead>

بعد کارو ذخیره کنید و به forumhome_forumbit_level1_nopost بیاید و کد زیر رو بجای تمام کد های درون قالب بزارید:

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tbody>
    <tr>
        <td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">
                        <if condition="$childforumbits">
            <a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
                        </if>
            <a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
            <if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
            <if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
        </td>
    </tr>
</tbody>
<if condition="$childforumbits">
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
<tr align="center">
<td class="thead" width="35">&nbsp;</td>
<td class="thead" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="300">$vbphrase[last_post]</td>
<td class="thead" width="40">$vbphrase[thread]</td>
<td class="thead" width="40">$vbphrase[post]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead" width="120">$vbphrase[moderator]</td>
</if>
</tr>
$childforumbits
</tbody>
</if>
</table>
<div style="padding:0px 0px 16px 0px;"></div>

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

<div style="padding:0px 0px 16px 0px;"></div>

این کد برای اینه که وقتی یه انجمن تموم شد انجمن بعدی به اندازه 16 پیکسل از پایین فاصله دار بشه که می تونید خودتون به دلخوام تغییرش بدید.

خب میرسیم به مرحله آخر ویرایش قالب:forumhome_forumbit_level2_post

شما باید این قسمت رو:

<td class="alt2">$forum[lastpostinfo]</td>
    <td class="alt1">$forum[threadcount]</td>
    <td class="alt2">$forum[replycount]</td>
    <if condition="$vboptions['showmoderatorcolumn']">
    <td class="alt1"><div class="smallfont">$forum[moderators]&nbsp;</div></td>

به این صورت ویرایش کنید:

<td class="alt2" nowrap="nowrap" width="300">$forum[lastpostinfo]</td>
    <td class="alt1" width="40">$forum[threadcount]</td>
    <td class="alt2" width="40">$forum[replycount]</td>
    <if condition="$vboptions['showmoderatorcolumn']">
    <td class="alt1" width="120"><div class="smallfont">$forum[moderators]&nbsp;</div></td>

و کد نهایی به این صورن میشه:

<tr align="center">
    <td class="alt2"><img src="$stylevar[imgdir_statusicon]/$forum[imageprefix]forum_$forum[statusicon].gif" alt="" border="0" id="forum_statusicon_$forum[forumid]" /></td>
    <td class="alt1Active" align="$stylevar[left]" id="f$forum[forumid]">
        <div>
            <a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a>
            <if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</span></if>
        </div>
        <if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
        <if condition="$show['forumsubscription']"><div class="smallfont"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&amp;f=$forum[forumid]" rel="nofollow">$vbphrase[unsubscribe_from_this_forum]</a></strong></div></if>
        <if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
    </td>
    <td class="alt2" nowrap="nowrap" width="300">$forum[lastpostinfo]</td>
    <td class="alt1" width="40">$forum[threadcount]</td>
    <td class="alt2" width="40">$forum[replycount]</td>
    <if condition="$vboptions['showmoderatorcolumn']">
    <td class="alt1" width="120"><div class="smallfont">$forum[moderators]&nbsp;</div></td>
    </if>
</tr>
$childforumbits

خب حالا با کمترین تغییر تو قالب انجمن ما thead زیر tcat قرار گرفت و 16 پیکسل فاصله بین هر انجمن تعیین شد...

امیدوارم مفید بوده باشه...

[Behr@d]

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

[Behr@d]

این کد هم مشکل داره
ممنون
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tbody>
<tr>
<td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">
<if condition="$childforumbits">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
</if>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
</td>
</tr>
</tbody>
<if condition="$childforumbits">
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
<tr align="center">
<td class="thead" width="35">&nbsp;</td>
<td class="thead" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="300">$vbphrase[last_post]</td>
<td class="thead" width="40">$vbphrase[thread]</td>
<td class="thead" width="40">$vbphrase[post]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead" width="120">$vbphrase[moderator]</td>
</if>
</tr>
$childforumbits
</tbody>
</if>
</table>
<div style="padding:0px 0px 16px 0px;"></div>

[EbiramGs]

خب بهراد عزیر سلام

برای این کار تو باید یه تیبل بسازی که شکل اصلیش به این صورته:

<table cellpadding="0" cellspacing="0" align="center" class="tcat">
<tr>
<td class="tleft">
</td>
<td class="tcat">
</td>
<td class="tright">
</td>
</tr>
</table>

بعد از ساخت اونو در جایی که می خوای قرار بدی و برای css تعریف کنی:

.tleft
{
background:#fff url(images/youtheme/yourpicleft.gif) no-repeat left;
width:15px;
}

و

.tright
{
background:#fff url(images/youtheme/yourpicright.gif) no-repeat right;
width:15px;
}

که مقادیرو خودت می تونی به دلخواه تغییر بدی...

[EbiramGs]

کجاش مشکل داره بهراد جان توی فروم خودم هم از همین استفاده کردم؟؟؟