Beez 20 قالب برای Jumla. پیکربندی قالب های مختلف برای صفحات مختلف جوملا

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

همچنین شامل مکانیسم هایی است که تعیین داده ها، روش ها و فواصل نمایش ماژول های مختلف داده ها، پارامترهای زبان و غیره را تعیین می کنند.
در نسخه های قبلی جوملا از قالب پایه Beez استفاده کرد. در آخرین نسخه ها، قالب ها بر اساس آن ساخته شده اند (Beez5، Beez_20) تغییرات قابل توجهی در مقایسه با آن انجام داده اند. ایجاد یک توسعه دهندگان قالب Beez در گزینه های ممکن برای تنظیم تحت نیاز به هر صاحب سایت سرمایه گذاری کرده اند. کد منبع قالب را می توان به راحتی تغییر داد. ایجاد تغییرات در صفحات سبک آبشار، به راحتی یک قالب طراحی کاملا جدید را بدون هزینه های قابل توجهی ایجاد می کند. اما در فرایند کار، طراحان سعی کردند از این الگو استفاده نکنند، اما خودشان را از ابتدا توسعه دادند.
در نتیجه، دو قالب کاملا جدید برای جوملا 2.5 توسعه یافتند. در هر دو قالب، زبان جاوا اسکریپت استفاده می شود، قالب Beez5 از زبان HTML5 استفاده می کند، الگو Beez_20 نیازی به اصلاح مجدد ندارد. هنگام تخمگذار نیازی به استفاده از جداول وجود ندارد. اسامی کلاس های جداول Cascading تغییر یافت.

الگوهای خواص

قالب های جدید به طور گسترده ای در دسترس قرار گرفته اند، می توان مکان واحد ناوبری را در صفحه انتخاب کرد، برچسب های تابع Wai-Aria اضافه شده است، ماژول ها در زبانه ها را می توان در حالت خودکار، موقعیت های قابل انعطاف برای ماژول ها و ستون ها نمایش داده می شود اضافه شده است، دو فرم طراحی در قالب Beez_20 ساخته شده است: طبیعی و انسانی، پشتیبانی از زبان HTML5 در قالب Beez5 اضافه شده است.
این راز نیست که افرادی هستند که با امکان درک جهان تضعیف می شوند. کسی قادر به ادراک بصری نیست، کسی به درک صدا محدود می شود. با این حال، این افراد همچنین از منابع اطلاعاتی اینترنت استفاده می کنند. و تمام پورتال های آنلاین ایجاد شده باید به این دسته از کاربران طراحی شوند. قالب های جوملا دارای تمام ابزارهای لازم برای ارائه افراد معلول برای استفاده از شبکه اینترنت هستند.
هنگام ایجاد الگوها، لازم است که به الزامات اساسی پایبندیم: مواد سایت نباید با طراحی این مواد تقسیم شوند، ساختار سایت نباید بیش از حد بارگذاری شود، انتقال از طریق صفحات سایت باید توسط دستورات از طریق دستورات پشتیبانی شود صفحه کلید، طراحی رنگ محتوای باید متضاد باشد.
مهمترین نکته از نقطه نظر توسعه دهنده جداسازی محتوا از طراحی است. برای انجام این کار، شما باید از طراحی جدول در صفحه خلاص شوید. هنگام قالب بندی، فقط CSS استفاده می شود. مواد باید به صورت خطی از بالا به پایین ساخته شوند.
طراحی معنایی اجازه می دهد تا شما را به انتقال بین صفحات سایت بر اساس سرفصل ها، لیست ها، و غیره، و همچنین ایده کلی مواد سند را تنظیم کنید.
با این حال، با طراحی خطی محتویات صفحه، یک نقص وجود دارد - برای رسیدن به اطلاعات مورد نیاز شما ممکن است نیاز به زمان داشته باشید (اگر اطلاعات موجود در پایین صفحه باشد). برای اصلاح این مشکل، می توانید از بوک مارک های HTML برای سرعت بخشیدن به حرکت در صفحه استفاده کنید. در این مورد، فرض بر این است که یک منوی اضافی برای حرکت در صفحه ایجاد کنید. برای کسانی که قبلا با ساختار سایت آشنا هستند، این منو می تواند پنهان شود.
مثلا:

• به متن اصلی بروید
• به واحد ناوبری اصلی بروید و وارد شوید

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

این مقاله نشان می دهد چگونه استاندارد Beez_20 الگو "لاستیک" را تشکیل می دهند. به طور مستقل از وضوح صفحه نمایش، سایت تمام عرض صفحه را اشغال کرد. این روش برای جوملا 1.7 و جوملا 2.5 مورد آزمایش قرار گرفته است

اگر مدیر فایل ارائه دهنده میزبانی یا مدیریت FTP استفاده شود، باید فایل سبک را پیدا کنید " uS_Site \\ Templates \\ beez_20 \\ CSS \\ poore.css". اگر استفاده شود صفحه کنترل جوملا، پس شما باید بروید پسوند -> مدیر قالب

در سمت راست همه سبک های قالب Beez_20 است. ما یک رشته را پیدا می کنیم تغییر CSS / موقعیت .CSS و روی آن کلیک کنید. پنجره باز می شود مدیر قالب: ویرایش فایل.

در اینجا ما قادر خواهیم بود این فایل را ویرایش کنیم.
ما عرض اصلی div'a را پیدا می کنیم. برابر با 1050 پیکسل است.

#همه.
{
حاشیه: 0 خودکار؛
حداکثر عرض: 1050px؛
padding: 0px؛
text-align: left؛
}

ما این مقدار را با 100٪ تغییر می دهیم.

#همه.
{
حاشیه: 0 خودکار؛
حداکثر عرض: 100٪؛
padding: 0px؛
text-align: left؛
}

سپس در همان فایل ما عرض پایین صفحه را پیدا می کنیم. این برابر با 1020px است.

# footer-inner
{
حداکثر عرض: 1020px؛
حاشیه: 0 خودکار؛
فونت اندازه: 0.8em؛
padding: 10px 15px 15px 10px؛
}

ما این مقدار را با 100٪ تغییر می دهیم.

# footer-inner
{
حداکثر عرض: 100٪؛
حاشیه: 0 خودکار؛
فونت اندازه: 0.8em؛
padding: 10px 15px 15px 10px؛
}

ما فایل را ذخیره می کنیم و به سایت شما می رویم - ما به آنچه اتفاق افتاده نگاه می کنیم. به منظور بلافاصله نتیجه را پس از تغییر CSS مشاهده کنید، لازم است که به روز رسانی مرورگر سبک جدید. برای انجام این کلیک Ctrl + R.

آخرین کاری که باید انجام دهیم این است که کلاه را تاخیر دهیم. پس از آنکه سایت به کل عرض صفحه کشیده شد، کلاه به سمت راست حرکت کرد و یک مستطیل آبی از LEV ظاهر شد. این اتفاق افتاد زیرا عرض تصویر 1060 پیکسل است. کلاه های تصویری در پوشه هستند " uS_Site \\ Templates \\ beez_20 \\ images \\ personal \\ personal2.jpg". شما می توانید تصویر بزرگتر خود را ایجاد کنید و فایل personal2.jpg را به خود اضافه کنید (نام فایل نیاز به ترک Personal2.jpg). اگر هیچ تصویر مناسب وجود نداشته باشد، می توانید خروجی تصویر را در صفحه سبک خاموش کنید و کل کلاه آبی رنگ خواهد بود.

برای غیرفعال کردن تصویر، ما به یک فایل با تنظیمات سبک که در " uS_Site \\ Templates \\ beez_20 \\ CSS \\ personal.css"در آن پیدا کنید:

LogoHeader
{
سابقه و هدف: # 0C1A3E URL (../ images / personal / personal2.png) بدون تکرار پایین سمت راست؛
رنگ: #fff؛
حداقل ارتفاع: 200px؛
}

ما URL را حذف می کنیم (../ images / personal / personal2.png) بدون تکرار پایین سمت راست. باید اتفاق بیفتد:

LogoHeader
{
سابقه و هدف: # 0C1A3E؛
رنگ: #fff؛
حداقل ارتفاع: 200px؛
حاشیه: 0 10px 0 10px! مهم؛
}

فایل را ذخیره کنید این همه است

تمام فایل های جایگزینی طرح در پوشه قرار می گیرند. قالب /<имя_шаблонa>/ HTML. بنابراین، اگر قالب نامیده شود my_beautiful_template.تمام طرح بندی طرح بندی در پوشه قرار می گیرد قالب ها / my_beautiful_template / html. این به این معنی است که فایل های جایگزینی در پوشه جداگانه جداگانه ذخیره می شوند. اما چنین حفظ "مرفه" تنها در صورتی امکان پذیر است که شکل اساسی نیست.

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

پوشه الگو را به یک پوشه جدید کپی کنید. برای این منظور، از عملکرد کپی پوشه در سطح سیستم عامل استفاده کنید تا پوشه قالب / Beez_20 (با تمام زیر پوشه ها و فایل های موجود در آن) را به قالب جدید / پوشه Beez_20_Copy منتقل کنید. اطمینان حاصل کنید که اطمینان حاصل کنید که تمام فایل های پوشه منبع به درستی به پوشه هدف کپی می شوند.

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

• کپی خود را از قالب Beez_20_Copy ایجاد کنید، به دنبال دستورالعمل های زیر.
• بارگیری فایل بایگانی beez_20_copy.zip از وب سایت اختصاص داده شده به این کتاب (http://joomlaprogrammingbook.com/downloads.html)، و سپس نصب را توسط مدیر Extension ^ Command نصب کنید (Manager Expansion1 ^ SET).

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

2. تغییر نام فایل ها در فایل XML Beez_20_COPY. برای این منظور، از File XML XML Beez_20_Copy / Templateetails.xml برای ویرایش. همان ویرایش خود تنها از جستجوی جهانی و جایگزینی متن Beez_20 به متن Beez_20_Copy است. باید سه جایگزین وجود داشته باشد: در عنصر پاش و دو فایل پشتیبانی از زبان در عناصر زبان.

3. تغییر نام فایل های پشتیبانی زبان. در این روش، نام فایل ها در یک فایل XML تغییر کرده اند. و حالا شما باید آنها را در سطح سیستم فایل تغییر نام دهید:

• en-gb.tpl_beez_20.ini در en-gb.tpl_beez_20_copy.ini
• en-gb.tpl_beez_20.sys. ini در en-gb.tpl_beez_20_copy.sys .ini

هر دو فایل از این فایل ها را از قالب / Beez_20_Copy / زبان / زبان / En-GB / به زبان / en-gb / پوشه کپی کنید، دوباره با استفاده از تابع کپی در سطح سیستم عامل.

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

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

با استفاده از ابزار تشخیص کشف، شما می توانید فایل ها را در پوشه به صورت دستی کپی کنید و سپس جوملا را برای پیدا کردن پسوندهای جدید دریافت کنید. هنگامی که فرمت جدید شناسایی می شود، می توان آن را نصب کرد. با توجه به این، پایگاه داده جوملا مطالب صحیح را ایجاد می کند. ما از این ابزار برای نصب یک قالب جدید استفاده می کنیم. اگر شما بیش از مدیران برنامه افزودنی را انتخاب کنید، دستور (مدیر فرمت\u003e تشخیص) را انتخاب کنید و آیکون کشف را در نوار ابزار انتخاب کنید، جوملا یک قالب جدید پیدا خواهد کرد.

بعد، الگوی Beez_20_Copy برای ایجاد وب سایت پیش فرض مورد نیاز است. برای انجام این کار، به Extensions \u003d\u003e Manager Manager بروید: Styles (Extensions \u003d\u003e Manager Manager: Styles)، یک قالب جدید را انتخاب کنید و روی دکمه پیش فرض کلیک کنید (به طور پیش فرض انتخاب کنید).

در نهایت، اگر لازم باشد که قالب جدید به نظر می رسد منبع است، شما باید پارامترهای یک سبک جدید را به گونه ای بیان کنید تا آن را با سبک طراحی قدیمی به ارمغان بیاورد. این در قالب صفحه نمایش Edit Style (Edit Style) با کلیک کردن بر روی نام قالب باز می شود (در این مورد - Beez_20_Copy - به طور پیش فرض)

ویرایش سبک قالب جدید

زمینه های شکل تشکیل به صورت زیر تنظیم می شوند.

ژوئن 18، 2012.

قالب های مختلف برای صفحات مختلف سایت - 3.8 از 5 بر اساس 5 رای

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

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

مرحله 1: تجزیه و تحلیل قالب استاندارد جوملا

جوملا دارای 3 قالب استاندارد است: اتمی، Beez5 و Beez2. این سه قالب برای سایت طراحی شده اند. دو نفر دیگر - BlueStork و Hathor برای پنل مدیریت جوملا منصوب می شوند. شما همچنین می توانید یک قالب دیگر را تنظیم کنید یا خودتان را ایجاد کنید.

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

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

پس از نصب جوملا، قالب پیش فرض Beez2 اختصاص داده شده است. اگر شما با نام قالب کلیک کردید، می توانید اشیاء قالب را ویرایش کنید.

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

مرحله 2: هدف از قالب های مختلف برای صفحات مختلف جوملا

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

• صفحه ویرایش الگو را ببندید beez2..
• باز به ویرایش الگو beez5 پس از چک کردن جعبه در مقابل قالب و فشار دادن دکمه: "ویرایش".

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

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

صرفه جویی در این اتصال، و سپس سایت خود را بررسی کنید. پس از صرفه جویی، شما خواهید دید که قالب Beez20 به طور پیش فرض تعیین شده است. و قالب Beez5 با علامت چک سبز مشخص شده است.

در اینجا چیزی است که صفحه اصلی با قالب Beez به طور پیش فرض است.

در حال حاضر ارزش آن یادآوری می شود که تغییر در قالب بر محتوای سایت تاثیر نمی گذارد. با این حال، عنوان، لوگو، طراحی و موقعیت ماژول ها تغییر خواهد کرد. این به این معنی است که شما نمیتوانید بدون هیچ کار اضافی این الگو را تغییر دهید.

مرحله 3: تعریف موقعیت های مختلف ماژول ها در قالب های مختلف

موقعیت ماژول ها در قالب Beez5 (در بالای صفحه) و در قالب BEEZ20 (در زیر) تقریبا یکسان هستند، بنابراین تغییرات ناچیز هستند. با این حال، تفاوت ها وجود دارد.

یکی از تفاوت های قابل توجه بین قالب ها موقعیت ماژول های نزدیک لوگو است. موقعیت قالب Beez5 1 و 0 در زیر لوگو قرار دارد.

در Beez20، موقعیت -0 در بالای لوگو قرار دارد و موقعیت 1 زیر آن قرار دارد.

این یک تفاوت نسبتا جزئی است، اما یک مثال خوب از چگونگی موقعیت های ماژول ها ممکن است در قالب ها متفاوت باشد. در این مورد، یک مثال ساده داده می شود، از آنجا که موقعیت های ماژول ها در هر دو قالب نام های مشابه دارند.

اما چه کاری باید انجام دهید اگر موقعیت ماژول ها در قالب ها نه تنها با موقعیت، بلکه عنوان نیز متفاوت باشد؟

بازگشت به مدیر قالب و اتصال قالب اتمی با صفحه رده 2شما قالب اتمی را در صفحه خواهید دید. رده 2 این موقعیت های کاملا متفاوت از ماژول ها را دارد و شما می توانید آن را در تصویر زیر ببینید.

این صفحه موقعیت های ماژول ها را ارائه می دهد:

1. atomic-TopMenu.
2. اتمی TopQuote.
3. اتمی جستجو
4. نوار کناری
5. اتمی-پایین
6. بطری اتمی

اگر می خواهید قالب اتمی را علاوه بر Beez20 کار کنید، باید کار بیشتری انجام دهید. این تضمین نمی شود که موقعیت ماژول عامل در BEEZ20 در اتمی کار کند.

مرحله 4: اضافه کردن یک ماژول منو به یک قالب جدید.

• به Extension - Module Manager بروید و روی دکمه کلیک کنید. ايجاد كردن.
• نوع ماژول منو را انتخاب کنید.
• موقعیت ماژول جدید خود را اختصاص دهید نوار کناری.
• جوملا 2.5 یک ویژگی جدید را ارائه می دهد: زمینه یادداشت ها برای ماژول. این به شما این امکان را می دهد که وقتی ماژول های زیادی دارید، اشتباه نکنید.

حالا ما می خواهیم ماژول را فقط به یک صفحه خاص متصل کنیم.

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

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

به مدیر ماژول بروید و منوی خود را به موقعیت حرکت دهید atomic-TopMenu.. نتیجه شما می توانید در تصویر زیر ببینید.

مرحله 5: سبک های یک قالب به جای قالب های مختلف.

به جای استفاده از قالب های کاملا متفاوت در صفحات مختلف سایت، می توانید به سادگی تغییر کوچکی را در قالب پیش فرض خود ایجاد کنید. این یک ویژگی جدید است که در جوملا 2.5 ظاهر شد. این تکنیک امکان ایجاد تفاوت های ظریف تر در هر صفحه را فراهم می کند بدون نیاز به انجام کارهایی که در بالا شرح داده شده است.

• به مدیر قالب بروید
• قالب مورد نظر خود را انتخاب کنید (جعبه را در مقابل آن چک کنید).
• دکمه را فشار دهید "تکراری"

• پرچم Rada را با BEEZ2-Default (2) قالب را بررسی کنید.
• دکمه را فشار دهید "تغییر دادن".

• Beez20 همراه با دو طرح رنگی است: شخصی و طبیعت. طبیعت را از لیست کشویی انتخاب کنید.
• یک قالب را برای آیتم منو اختصاص دهید رده 1در بلوک "اتصال به منو". لطفا توجه داشته باشید که تنظیمات دیگری وجود دارد که می توانید تغییر دهید. به عنوان مثال: لوگو، نام سایت و موقعیت ناوبری.

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

• شما همچنین می توانید یک قالب را هنگام ایجاد آیتم های منو اختصاص دهید.
• هنگامی که شما در مدیر منو هستید، می توانید سبک قالب را هنگام ایجاد یک آیتم منو پیوند دهید.

امتیاز 3.80

نمایش ها: 25562.

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

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

مرحله 1: اطلاعات عمومی در مورد قالب ها در جوملا

جوملا دارای سه قالب طراحی پیش فرض پیش فرض است: اتمی، Beez5 و Beez2.

این سه قالب به عنوان "سایت" در ستون "محل" مشخص شده اند و برای بخش عمومی سایت در نظر گرفته شده اند. BlueStork و Hathor Templates به عنوان "مدیر" برچسب گذاری شده اند و فقط برای admin در نظر گرفته شده اند. شما همچنین می توانید سایر قالب های شخص ثالث را نصب کنید یا قالب خود را توسعه یا ایجاد کنید.

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

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

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

همانطور که می توانید در این مثال ببینید، این الگو به طور پیش فرض استفاده می شود همه صفحات و نیازی به نصب آن برای هر مورد منو نیست.

مرحله 2. نتیجه گیری از قالب های مختلف در صفحات مختلف

بیایید نگاهی به تنظیمات دیگر قالب ها بگیریم و ببینیم چگونه آن را برای یک دسته خاص اختصاص دهید.

• مدیر قالب را باز کنید
• قالب Beez5 را علامت بزنید
• روی دکمه ویرایش کلیک کنید.

• CMS قالب های مختلف را در صفحات مختلف به طور انحصاری بر اساس لینک های منو تنظیم می کند. به بخش "اتصال به منو" بروید، و شما می توانید انتخاب کنید که کدام لینک های منو این الگو استفاده می شود.
• برای مورد پیش فرض، "نه" تنظیم شده است، زیرا ما قبلا یک قالب پیش فرض دیگری داریم.
• جعبه چک را در مقابل آیتم منوی سمت راست بررسی کنید.

• این اتصال را به منو ذخیره کنید و سپس سایت خود را بررسی کنید.
• پس از صرفه جویی، شما خواهید دید که شما باید قالب Beez_20 را به طور پیش فرض تنظیم کنید.
• و قالب Beez5 به یک آیتم منو جداگانه اختصاص داده شده و با علامت چک سبز مشخص شده است.

بنابراین صفحه اصلی به نظر می رسد یک قالب پیش فرض - Beez2:

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

شما باید لوگو را برای هر دو قالب و موقعیت های ماژول ها مطابق با ساختار سایت عمومی خود تغییر دهید.

مرحله 3. توضیح موقعیت های مختلف ماژول ها در قالب های مختلف

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

یکی از واضح ترین تفاوت بین دو قالب، موقعیت ماژول های اطراف لوگو است. در ماژول های Beez5، موقعیت-1 و موقعیت-0 در زیر لوگو قرار دارند:

در Beez 2، ماژول موقعیت-0 در بالای لوگو قرار دارد و موقعیت 1 زیر است:

این یک تمایز نسبتا جزئی است، اما یک نمونه خوب از چگونگی الگوهای ممکن است در موقعیت های ماژول ها متفاوت باشد. در این مورد، این یک مثال ساده ساده است، زیرا تمام ماژول ها دارای نام های مشابه هستند.

اما اگر موقعیت ماژول ها به طور کامل متفاوت باشد، در مکان های مختلف تحت نام های مختلف؟

• بازگشت به مدیر قالب و اتصال قالب اتمی به رده دیگر.
• شما خواهید دید که موقعیت های کاملا متفاوت از ماژول ها، شما می توانید آنها را در تصویر زیر ببینید:

در این صفحه تنها موقعیت های زیر از ماژول ها وجود دارد:

• atomic-TopMenu.
• اتمی TopQuote.
• اتمی جستجو
• نوار کناری
• اتمی-پایین
• بطری اتمی

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

مرحله 4. یک ماژول منو را برای یک قالب جدید اضافه کنید

• در منوی فرمت\u003e Module Manager را انتخاب کنید و روی دکمه Create کلیک کنید.
• منو را انتخاب کنید
• ما یک ماژول جدید را به موقعیت اتمی-نوار کناری متصل می کنیم.
• ویژگی جدید در جوملا 2.5 - یادداشت فیلد. این به شما کمک خواهد کرد که در ماژول ها، با تعداد زیادی اشتباه گرفته شود.

• در حال حاضر ما ماژول را به صفحات خاص متصل می کنیم.
• "فقط در صفحات انتخاب شده" را انتخاب کنید.
• جعبه چک را در کنار آیتم منو که نیاز دارید نصب کنید.

• در حال حاضر منو من در نوار کناری است. شما می توانید ببینید که این یک منوی افقی است و مکان هایی برای آن کافی نیست. ما باید سعی کنیم موقعیتی بهتر برای آن پیدا کنیم.

• به مدیر ماژول بروید و منو را به موقعیت Atomic-TopMenu منتقل کنید. در حال حاضر منو باید در تصویر زیر ظاهر شود:

من این مثال را فقط برای نشان دادن اینکه چه نوع مشکلاتی را که ممکن است با آنها شروع به اضافه کردن قالب ها بدون تحقیق قبلی انجام دادید، آورده ام.

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

مرحله 5. سبک سبک قالب در مقابل قالب های مختلف

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

• به مدیر قالب بروید
• کادر کنار قالب را که میخواهید یک کپی را ایجاد کنید را بررسی کنید. در این مورد، ما از Beez2 استفاده خواهیم کرد.
• روی نماد "تکراری" کلیک کنید.

• جعبه را در کنار Beez2-Default (2) بررسی کنید.
• روی دکمه "ویرایش" کلیک کنید.

• Beez2 همراه با دو طرح رنگی، شخصی و طبیعت است. طبیعت را از لیست کشویی انتخاب کنید.
• یک قالب را به بخش "اتصال به منو" تقسیم کنید.
• لطفا توجه داشته باشید که گزینه های دیگری نیز وجود دارد، شما همچنین می توانید لوگو، نام سایت و موقعیت ناوبری را تغییر دهید.

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

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

اگر سوالی دارید، پس برای پاسخ سریع، ما توصیه می کنیم با استفاده از ما