تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
نمایش نتایج: از 1 به 7 از 7

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

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

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

      نگارش: , by (کاربر سایت)
      2011/11/04 02:58 PM
      امتیاز:  (1 رای ، میانگین : 5.00 )

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

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

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

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

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

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

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

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

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

      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. تنظیمات منوی تولبار ویرایشگر

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

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

      2.کلید رنگ

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

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

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

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

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

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

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

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

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

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

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

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

      1.مثلا 900px

      2. مثلا 90%

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

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

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

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

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

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

      5.مسیر تصویر

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

      6.متفرقه

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

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

      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 مکان مورد نظر رو براتون نمایش میده.

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

      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 استایل تموم شد،حالا میریم سر ساخت یک قالب.

      قبل از شروع کار ساخت قالب باید یه آموزش هایی در مورد 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 روی صفحه به نمایش در میاد.

      منبع:
      وی بی اسکین
      ادامه دارد...
      ویرایش توسط irank3 : 2011/11/04 در ساعت 03:56 PM
  1. Top | #2
    کاربر سایت

    ورژن ویبولتین
    4.1.4
    نوشته ها
    1,608
    میزان امتیاز
    209

    پیش فرض

    منبع هم ذكر بفرمايين كه بعد مشكلي پيش نياد

    منبع

    3 تشکر توسط:


  2. Top | #3
    کاربر سایت

    ورژن ویبولتین
    4.2.0
    نوشته ها
    245
    میزان امتیاز
    33

    پیش فرض

    چشم

    2 تشکر توسط:


  3. Top | #4
    مدیر بازنشته

    ورژن ویبولتین
    4.1.11
    نوشته ها
    1,541
    میزان امتیاز
    195

    پیش فرض

    انشاالله که دست دشمنان گزک نده

    3 تشکر توسط:


  4. Top | #5
    کاربر سایت

    ورژن ویبولتین
    4.2
    نوشته ها
    464
    میزان امتیاز
    55

    پیش فرض

    من یه قالب دارم ورژنش 3.8.6 است میخوام ورژنش رو تغییر بدم به 4.1.9 باید چی کار کنم؟

  5. Top | #6
    کاربر سایت

    ورژن ویبولتین
    4.11.2
    نوشته ها
    124
    میزان امتیاز
    17

    پیش فرض

    فایل xml ویرایش کنید ..

    کاربر مقابل از pooking بابت این پست مفید تشکر کرده است:


  6. Top | #7
    کاربر سایت

    ورژن ویبولتین
    4.2.2
    نوشته ها
    538
    میزان امتیاز
    57

    پیش فرض

    آموزش تصویری نمی ذارین؟

اطلاعات موضوع

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

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

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

  1. پاسخ: 64
    آخرين نوشته: 2016/07/30, 11:47 AM
  2. ویدیو آموزشی: تبدیل قالب ویبولتین 3 به 4
    توسط Haji در انجمن اموزشهای تصویری ویبولتین
    پاسخ: 10
    آخرين نوشته: 2016/02/03, 11:12 AM
  3. پاسخ: 43
    آخرين نوشته: 2013/12/25, 04:52 PM
  4. آموزش پهن کردن پاسخ سریع ویبولتین Wide Quick Reply ویبولتین 3
    توسط VBIran در انجمن آموزش های وی بولتین
    پاسخ: 6
    آخرين نوشته: 2013/07/05, 11:40 PM
  5. آموزش تغییر سیستم ورود ویبولتین 4 به ویبولتین 3
    توسط VBIran در انجمن آموزش های وی بولتین
    پاسخ: 2
    آخرين نوشته: 2011/03/13, 02:54 PM

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •