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

[EbiramGs]

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

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

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

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

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

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

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

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

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

[EbiramGs]

وارد صفحه تنظیمات استایل که شدید با این بخش ها سروکار داریم کع اینجا فقط معرفیشون می کنم تا بعد درباره همش توضیح بدم:

1.قلم ها / رنگ ها
2.کلید رنگ
3.قالب های عمومی
4.اندازه ها و ابعاد
5.مسیر تصویر
6.متفرقه
7.پیکره
8.صفحه پشت انجمن
9.<td>, <th>, <p>, <li>
10.Table Border
11. Category Strips
12.Category Strips
13.Table Header
14.Table Footer
15. اولین رنگ متناسب
16.Second Alternating Color
17.WYSIWYG Editor (Should usually be the same as 'اولین رنگ متناسب' or 'Input Fields')
18.Input Fields
19. دکمه ها
20. <انتخاب> تنظیمات
21. قلم بزرگ
22.Time Color
23.Navbar Text
24. قلم هایلایت شده
25.Inline Moderation Element Highlight
26.Panel Surround
27.Panel (Forms)
28.<legend>
29.Popup Menu Controls
30.Popup Menu Body
31.Popup Menu Option Row
32.Popup Menu Highlighted Option
33. مراجعه سریع
34. تعریف CSS اضافی
35. تنظیم ظاهر ویرایشگر متن
36. تنظیمات منوی تولبار ویرایشگر

[EbiramGs]

1.قلم ها / رنگ ها

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

2.کلید رنگ

این بخش مثل راهنما تو نقشه ها می مونه و کارش اینه که رنگ قسمت های مختلف استایل که حالا یا تغییر کرده یا نکرده رو برامون نمایش میده که بعدا گمراه نشیم:

قالب از حالت استایل پیش فرض تغییر نکرده است:این یعنی بخشی که نوشته ها و کد ها توش به رنگ سفید نمایش داده میشه تغییر نکرده و مثل حالت پیشفرض خود وی بی هست...

قالب با توجه به استایل مادر تنظیم شده است:اگر استایلی که شما در حال مشاهده تنظیماتش هستید استایل بچه یا زیر استایل یا استایل ضمیمه باشه،یعنی از استایل دیگه ای بعضی از تاثیراتشو بگیره اون قسمت متنش به رنگ زرد در میاد...

قالب از حالت استایل پیش فرض و یا مادر تغییر کرده است:اگر استایل شما از حالت پیشفرض تغییر کرده باشه رنگ متنش به قرمز تغییر میکنه...تمام قسمت هایی که ما تو طراحی استایل تغییر میدیم به این رنگ در میاد.

3.قالب های عمومی

قالب های عمومی همونطور که اسمش پیداست قالب هایی از استایل مارو تشکیل میدن که تقریبا توی تمام قسمت های فروم به یک شکل وجود دارن مثل:

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

headinclude:این قسمت کد هایی مثل meta,title,و... هستن که برای طراحی استایل ما با این قسمت کار نداریم...

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

[EbiramGs]

4.اندازه ها و ابعاد

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

پهنا جدول اصلی:این قسمت پهنا یا عرض صفحه فروم رو تغییر میده که توی قالب اصلی روی 100% تنظیم شده که یعنی تمام صفحه انجمن رو به تیبل اصلی فروم اختصاص میده،منظور تمام صفحه نمایش مانیتوره...این مقدار بر حسب پیکسله که فقط باید مقادیری به این صورت توش وارد بشه:

1.مثلا 900px

2. مثلا 90%

اندازه فضا:این قسمت اندازه یا همون فاصله انجمن ها از صفحه پشت انجمنه که توی استایل اصلی با رنگ سفید نمایش داده میشه و فاصله ای که بین انجمن ها و کناره های سفحه سفید رنگ مشاهده میشه و از همین جا تنظیم می کنیم.

حاشیه بیرونی عرض:کار خاصی نمی کنه که لازم به تغییر باشه

حاشیه درونی پهنا بخش ها:این قسمت اندازه عرض خطوط اطراف انجمنه که با کد Table Border تعیین میشه و دور تمام تیبل ها هم هست و اگه 1 باشه یا بیشتر،دور تمام جدول ها یا همون تیبل ها یه خط میندازه و اگه 0 باشه هیچ خصی دور تیبل ها نمیزاره...

لایه پوششی بین جدول ها انجمن:این هم فاصله متن داخل Category Strips رو اطراف کم و زیاد می کنه...

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

عرض ترکیب،ترکیب عرض کنترل پنل کاربر،پیام فضا عرض،پیام کنترل پنل کاربر در عرض،عرض کد ها در انجمن،این قسمت ها اندازه باکس های نوشتاری تمام انجمن هست که معمولا اینا رو کس تغییر نمیده اما اگه خواستید می تونید امتحان کنید ولی این مقادیر نیازی به تغییر ندارن (معمولا)...

5.مسیر تصویر

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

6.متفرقه

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

خب میرسیم به بخش های اصلی css استایل که توی پست بعدی توضیح میدم دربارشون..............

[EbiramGs]

7.پیکره

این بخش از css قالب وی بی همونطور که از اسمش پیداست پیکره و ترکیب پایه فروم رو تغییر میده.

خواص CSS استاندارد

این بخش استایل،مشخصات اصلی css مربوط به بخش پیکره رو کنترل می کنه که برای همه قالب های css وی بی هم وجود داره و حالا براتون توضیح میدم تا باهاش آشنا بشید:

پس زمینه:فیلد پس زمینه که کد معادلش توی css همون background هست رنگ و کلا مشخصات گرافیکی رنگ پشت مکان مورد نظر رو تغییر میده که اینجا رنگ پشت صفحه انجمنه.

رنگ قلم:اینم که دیگه معلومه چیه،کارش تغییر رنگ قلم یا همون نوشته ها هست توی مکان مورد نظر...معادل=color

استایل قلم:این بخش جلوه های تصویری روی نوشته رو کنترل میکنه مثل bold و...معادل=font-weight

اندازه قلم:اینم اندازه فونت نوشته رو تغییر میده معادل=font-size

نوع قلم:فیلد نوع قلم نام فونت نوشته رو تغییر میده که فونت استاندارد برای وب Tahoma هست که توی تمام قسمت هایی که نوع قلم مشاهده میشه بهتره از این فونت استفاده بشه.معادل=font-family

خواص CSS اضافی

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

مثلا تو اینجا اگه ما

border:1px solid #000000;

رو به خواص CSS اضافی بخش پیکره اضافه کنیم،تمام مکان هایی که با body مشخص شدن (body به معنی تمام قالب css میباشد) دورشون به بوردر قرار میگیره به اندازه 1 پیکسل و نوع خطی و رنگ مشکی...

توضیح

اینجا هم توضیح مختصری در مورد تاثیر کدی که می نویسیم روی مکان مورد نظرمونو نوشته.

معمولی لینک های CSS

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

پس زمینه،رنگ قلم رو که مثل توضیح بالا عمل می کنه توضیح دادم اما:

نوشته تزینی:معادل=font-style،که ایتالیک و... بدون لینک ها رو تعیین می کنه...

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

منتظر بودن لینک های CSS:در صورتی که شما موس رو روی لینکی بیارید (فقط روش حرکت کنید) می بینید رنگ لینک عوض میشه،این خاصیت های اعمال شده توی منتظر بودن لینک های CSS هست که باعث این تاثیرات میشه...

اگر شما قالب رو از حالت پیشفرض در آورده باشید علاوه بر قرمز رنگ شدن قسمت های تغییر کرده یه نواری پایین همون قسمت ظاهر میشه که توی اون نوشته:

برای بازگشت به حالت پیش فرض و یا حالت استایل مادر جعبه را علامت بزنید و ذخیره کنید.(اگر استایل مادر باشد به حالت پیش فرض و اگر استایل کودک باشد به حالت استایل مادر برگشت داده می شود)

که اگه می خواید تمام تغییرات انجام شده روی اون بخش به حالت پیشفرض برگرده تیک کنار این نوشته رو فعال کنید و تغییرات و ذخیره کنید....

پایین همه قسمت های قالب شما یه کادر مشاهده می کنید که اسم کلاس css مکان مورد نظر رو براتون نمایش میده.

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

[EbiramGs]

8.صفحه پشت انجمن

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

9.<td>, <th>, <p>, <li>

توی این بخش شما می تونید خواص css برای تمام نوشته های درون تگ های <td>, <th>, <p>, <li> رو تعیین کنید...

10.Table Border

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

11.Category Strips

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

12.Table Header

توی قالب اصلی فروم نواری که بالای انجمن هست و توی اون نوشته موضوعات و نوشته ها و آخرین پست و... رو بهش میگن Table Header...

13.Table Footer

پایین فروم،جایی که نوشته شده "تماس با ما - مدیریت سایت - مدیریت انجمن - بایگانی - بالا" این نوار همون Table Footer هست و همچنین جایی که نوشته شده "نشانه گذاري انجمن ها به عنوان خوانده شده نمايش مديران انجمن ها"...

14.اولین رنگ متناسب

این بخش از قالب مربوطه به رنگ و مشخصات نمایش انجمن ها،همونطور که می بینید در نمایش یک انجمن چند تا ستون وجود داره،ستون های فرد همه Second Alternating Color و ستون های زوج اولین رنگ متناسب هستن....

15.WYSIWYG Editor (Should usually be the same as 'اولین رنگ متناسب' or 'Input Fields')

این قسمت مربوط به تنظیمات گرافیکی ویرایشگر فروم هست که WYSIWYG نام داره و باید با تنظیمات Input Fields یکی باشه.

16.Input Fields

تمام فیلد های سایت خواص cssش از این قسمت تعیین میشه...

17.دکمه ها

تمام دکمه هایی که توی سایت هست خواص cssش از این قسمت تعیین میشه...

18.<انتخاب> تنظیمات

تمام لیست های بازشدنی سایت خواص cssش از این قسمت تعیین میشه...

19.قلم بزرگ

اگه شما از تگ های html که باعث افزایش یا بزرگ شدن نوشته ها میشه استفاده کنید خواص cssش از این قسمت تعیین میشه...

20.Time Color

رنگ ساعت سایت از این قسمت تعیین میشه...

21.Navbar Text

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

22.قلم هایلایت شده

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

23.Inline Moderation Element Highlight

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

24.Panel Surround

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

25.Panel (Forms)

کادر داخلی که بالا توضیح دادم همین قسمته و خواصش اینجا تعیین میشه

26.<legend>

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

27.Popup Menu Controls

نوار زیر navbar که توی اون لینک هایی مثل کنترل پنل کاربری و... هست خواصش از اینجا تعیین میشه...

28.Popup Menu Body

مثلا اگه شما از همون نوار قبل "کلیدهای میانبر" رو کلیک کنید یه لیست پایینش ظاهر میشه،این قسمت مربوط به تنظیمات پیزمینه همون لیسته....

29.Popup Menu Option Row

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

30.Popup Menu Highlighted Option

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

31.مراجعه سریع

32.تعریف CSS اضافی

این قسمت هم برای اینه که اگه خواستید css اضافه بنویسید ازش استفاده کنید....

همچنین این بخش شامل خواص css نمایش یوزر کاربر و.. هم هست...

33.تنظیم ظاهر ویرایشگر متن

ظاهر ویرایشگر متن فروم از اینجا تعیین میشه...

34.تنظیمات منوی تولبار ویرایشگر

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

خب توضیحات ابتدایی و آشنایی با اجزای css استایل تموم شد،حالا میریم سر ساخت یک قالب...

[EbiramGs]

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

برای اینکه بتونید برای یه تیبل یا div و... css تعریف کنید باید برای تیبل یا div مورد نظرتون یه کلاس تعریف کنید و بعد در css برای اون کلاس خواص تعیین کنید...

کلاس ها در css دقیقا مثل کلاس در برنامه نویسی عمل می کنه و کارش اینه که شما دیگه نیازی ندارید که برای هر جایی که خواستید مثلا قرمز باشه رنگ نوشته اون قسمت از تگ های html که برای بعضی از موارد زیا و سخت هست استفاه کنید...بجاش برای هر مکان یه کلاس تعریف می کنید و بعد برای کلاس خواص تعیین می کنید و کاذتون تقریبا خیلی خیلی راحت میشه،اما نوشتن css:

css شاید آسون ترین موردی باشه که توی طراحی صفحات وب استفاده میشه،css خواص بیساز زیادی داره که من اینجا چند تا از مهماش و انونایی که بیشتر باهاش سروکار داریمو براتون می گم:

background:با این کد میشه خواص مربوط به پسزمینه کارو تعیین کرد،مثال:

background:#000000;

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

برای اینکه برای پس زمینه رنگ بزاریم دو تا راه داره1.اینکه اسم رنگ به زبان انگلیسی رو بزاریم به این صورت:

background:black;

یا اینکه 2.کد رنگو بزاریم که این روش محدودیتی در انتخاب نوع رنگ نداره:

background:#000000;

برای background میشه از عکس هم استفاده کرد مثال:

background:#000000 url(images/test/test.gif) repeat-x;

وقتی کد پسزمینه به این صورت باشه یعنی اینکه:

رنگ پسزمینه ما سیاه هست،و عکسی که آدرسش images/test/test.gif هست در امتداد محور x روی صفحه به نمایش در میاد.

[EbiramGs]

درمورد backgroundباید بگم که اگه بخوایم عکس ما به صورت عمودی (امتداد محور y) لود بشه از repeat-y به جای repeat-x استفاده می کنیم و اگه بخوایم تکرار نداشته باشیم از no-repeat استفاده می کنیم...

در ضمن میشه از left,right,top,bottom هم برای لود عکس استفاده کرد به این صورت

 background:#000000 url(images/test/test.gif) repeat-x top left;

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


border:با این کد میشه برای مکان مورد نظر حاشیه گذاری کرد مثال:

border: 1px solid #cccccc;

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

کد های border-left،border-right،border-top،border-bottom هم برای زمانیه که می خوایم فقط یک طرف از مکان ما حاشیع داشته باشه که مثل border نوشته میشه خواصش...

font-family،font-style،font-size و... این کد ها همه برای خواص متن به کار میرن

margin:فاصله از بیرون کادر و یا تیبل هست و padding فاصله از داخل

text-align:مکان نمایش متن،چپ،راست،وسط

خب اینا چند تا از مهم ترین های css بود که تو طراحی قالب وی بی زیاد به کار میره...

[EbiramGs]

خب تا اینجا اگه سوالی هست بپرسید تا بریم سر اصل مطلب

[EbiramGs]

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

حالا برای شروع میریم سراغ درست کردن یه نوار مثل navbar اما به صورت کاملا حرفه ای و زیبا:

اول از هر چیز باید برای ساخت قالب برنامه فرانت پیج داشته باشید!!!

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

بعد از کادر کنترل ها روی کلیک "<< >>" کلیک کنید تا تمام قالب ها براتون باز بشه،از لیست کنار صفحه navbar رو انتخاب کنید و دوبار کلیک کنید روش تا باز بشه...

خب الان به صفحه قالب اصلی navbar منتقل شدیم و کد هایی که در صفحه مقالبتون مشاهده می کنید کد های قالب navbar هستن...

مرحله بعدی اینه که باید تمام کد های بین:

<!-- nav buttons bar -->

و

<!-- / nav buttons bar -->

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

وقتی صفحه جدیدی توی فرانت پیج باز کردید تمام کد های توی صفحه را پاک کنید و کد های بالا رو به جاش بزارید...

اگه روی تب design توی فرانت پیج کلیک کنید یه جدول میبینید که این جدول شامل تمام لینک های روی نوار بالای انجمنه...

ما قصد داریم اینا رو به یه شکل زیبا توی فروم نمایش بدیم با کمک جدول ها و کد های css...

برای این کار یه صفحه جدید توی فرانت پیج باز کنید و محتویاتشو پاک کنید تا آماده انجام کار بشیم...

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

<table cellpadding="0" cellspacing="0" align="center" class="nbt-menu" width="100%">
<tr>
<td>

</td>
</tr>
</table>

حالا ببینیم چطور میشه این جدول با این کد هایی که براش گذاشتیم:

cellpadding="0"وcellspacing="0" فاصله های جدول هست که ما باید اینا رو اینجا برابر 0 بزاریم چون نمی خوایم منوی ما با اطراف و متون داخلش فاصله ای داشته باشه...

align="center" این کد باعث میشه جدول ما وسط صفحه قرار بگیره...

class="nbt-menu" اگه از قسمت css یادتون مونده باشه گفتم ما برای هر مکان یه کلاس در نظر می گیریم،این یه نمونه از کلاس هاست که می تونید به جای nbt-menu هر مقداری که خواستید بزارید،اما توجه داشته باشید که نمیشه مقادیری که قبلا استفاده شده رو بزارید چون مکان مورد نظر ما مثل اون ماکن هایی میشه که کلاس براشون تعریف شده قبلا...

width="100%" این کد عرض جدول ما رو کنترل می کنه که اینجا ما می خوایم یه جدول داشته باشیم که تمام عرض صفحه مارو بگیره...

<tr> به معنی اینه که ما یه ردیف در جوا داریم و <td> معنی اینه که ما یه ستون داریم...

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

لینک هایی که اینجا استفاده می کنیم با توضیحات:

1.کنترل پنل شما

<if condition="$show['member']">
<a href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a>
</if>

2.ثبت نام

<if condition="$show['registerbutton']">
<a href="register.php$session[sessionurl_q]" rel="nofollow">$vbphrase[register]</a>
</if>

3.تقویم

<a href="calendar.php$session[sessionurl_q]">$vbphrase[calendar]</a>

خب برای شروع کار

ما بعد از <a یه کلاس تعریف می کنیم،مثل:

class="nbt-link" که یه نمونه رو اینجا مشاهده می کنید:

<a class="nbt-link" href="calendar.php$session[sessionurl_q]">$vbphrase[calendar]</a>

برای تمام لینک هایی که می خوایم توی منومون باشه همین کارو می کنیم...

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

<table cellpadding="0" cellspacing="0" align="center" class="nbt-menu" width="100%">
<tr>
<td>

<if condition="$show['member']">
<a class="nbt-link" href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a>
</if>

<if condition="$show['registerbutton']">
<a class="nbt-link" href="register.php$session[sessionurl_q]" rel="nofollow">$vbphrase[register]</a>
</if>

<a class="nbt-link" href="calendar.php$session[sessionurl_q]">$vbphrase[calendar]</a>

</td>
</tr>
</table>

حالا دیگه کار اصلی ما تمومه و میریم سراغ ترکیب گرافیکی یا همون css نویسی:

خب کد هایی که نوشتیمو به جای کد های منوی بالای navbar میشه گذاشت و همچنین میشه اونا رو حفظ کردو یه منوی جدید درست کنیم،ما اینجا روش دومو انتخاب می کنیم:

به بالاترین بخش کد های navbar توی صفحه ویرایش قالب navbar برید و اونجا یه <br /> میبینید،موسو بزارید قبل از <br /> و یه بار اینتر بزنید تا یه خط به پایین منتقل شید بعد کد هایی که با فرانت پیج برای منوی جدید طراحی کردیمو اونجا کپی کنید و بعد از کپی کردن دوباره به بالاترین قسمت کد ها بیاید و قبل از تمام نوشته ها یه <br /> دیگه اضافه کنید:

<br />

<table cellpadding="0" cellspacing="0" align="center" class="nbt-menu" width="100%">
<tr>
<td>.......

مثل کد های بالا باید بشه کد های شما قتی کاری که گفتمو انجام دادید...

حالا هم کد ها رو ذخیره کنید و به تنظیمات استایل برگردید تا css نویسی منو رو شروع کنیم...