طراحی قالب اختصاصی دروپال با Omega - قسمت سوم

ساخت قالب دروپال با omega

این هفته قصد داریم قسمت های مختلف قالب امگا (Omega) رو بهتر بشناسیم. اگر میخواهید یک قالب دروپالی خوب داشته باشید پس بهتره اول از همه از امکاناتی که داریم مطمئن بشیم. اگر هنوز قسمت های قبلی مقاله رو نخوندید پیشنهاد میکنم قبل از ادامه بحث این هفته حتما اون ها رو بخونید.

طراحی قالب اختصاصی دروپال با امگا - قسمت اول
طراحی قالب اختصاصی دروپال با امگا - قسمت دوم

پس بیایید با هم نگاهی به تنظیمات قالب امگا بندازیم. قرار نیست تک تک جزئیات رو بگیم اما حتما در مورد مواردی که قالب امگا رو بر بقیه قالب ها برتری داده صحبت میکنیم. پس برای شروع به صفحه admin/appearance بروید و بر روی settings روبروی قالب امگایی که ساخته اید کلیک کنید.

قالب امگا دروپال

در قسمت Grid settings بیشترین قابلیت های خاص قالب امگا قرار دارد. شما میتوانید در این قسمت تنظیماتی برای نحوه نمایش قالب ایجاد شده خودتون انجام بدید.
قسمت اولی که در مورد اون صحبت میکنیم گزینه Enable the responsive grid هست. برای اینکه کارایی اون رو متوجه بشید کافیه به صفحه اول سایت برید و مرورگر خودتون رو resize کنید مشاهده میکنید که المان های صفحه شما متناسب با اندازه مرورگر شما تغییر خواهند کرد. اگر تیک این گزینه را بردارید عملا قابلیت تعاملی بودن (responsive) را از قالب خود حذف میکنید.

در قسمت پایین صفحه میتوانید تنظیمات اندازه های مختلف قالب خود برای گجت (gadget) های مختلف را تنظیم کنید.

قالب امگا دروپال

اولین قسمت Narrow هست که در این قسمت شما میتوانید اندازه مناسب برای tablet ها را مشخص کنید. شما میتوانید با تغییر اندازه های مشخص شده در قسمت Media Query این اندازه ها را تنظیم کنید. خیلی مراقب این اندازه های باشید. شما باید حداقل و حداکثر اندازه برای هر گجت را مشخص کنید. قسمت Normal برای اندازه صفحه های کامپیوتر و قسمت Wide برای مانیتورهای با رزولوشن بالا یا تلوزیون ها میتواند مفید باشد. شاید بپرسید پس موبایل ها چی؟ امگا تمام اندازه های کوچک تر از Narrow را برای موبایل ها در نظر میگیرد یعنی به صورت پیش فرض اندازه های کوچک تر از 740px برای موبایل ها در نظر گرفته میشود.
پیشنهاد میکنم اگر از اندازه ها اطلاعای ندارید یا اگر سایت شما برای گجت های استاندارد تهیه میشود این اندازه ها را تغییر ندهید.

Zone And Region Configuration
این قسمت شاید جذاب ترین بخش قالب امگاست. قالب امگا میگه که من از استاندارد 960.gs استفاده میکنم. برای اینکه این استاندارد رو بهتر بشناسید پیشنهاد میکنم مطلب فارسی فریم ورک 960.gs رو بخونید. اما اگر خیلی حوصله خوندن اون مطلب رو ندارید به صورت مختصر در مورد این فریم ورک در قالب امگا برای شما توصیح میدم. به صورت کلی این فریم ورک میگه که من صفحه شما رو به 24 قسمت که به اونها grid میگه تقسیم میکنم. بنابراین اگر شما صفحه ای با اندازه استاندارد 960px داشته باشید با تقسیم این عدد بر 24 به عدد 40px برای هر grid میرسیم. یعنی از این به بعد شما با عددها سر و کار ندارید بلکه با گرید ها کار میکنید. بنابراین وقتی که تعیین میکنید که یک بلوک یا region بتونه 4 گرید رو استفاده کنه هنگامی که اندازه مرورگر کاربر به اندازه یک tablet با اندازه 740px کوچک میشه شما دیگر نباید نگران تعاملی بودن قالب خودتون باشید چون اینبار بلوک به جای 4*40px فقط 4*30px رو اشغال میکنه و قالب شما به صورت خودکار تعاملی میشه. در عمل این روش خیلی ساده تر از توضیحی است که من دادم. خیلی نگران این موضوع نباشید فقط کافیه بدونید که باید برای اندازه region ها از گرید ها استفاده کنید.

امگا صفحه رو به 3 بخش تقسیم کرده که به هر بخش Section میگه. هر section میتونه چند قسمت داشته باشه که این قسمت ها Zone گفته میشه و هر Zone دارای چند قسمت کوچک تر هست که به اونها Region گفته میشه. برای فهمیدن بهتر این قسمت ها من چند عکس رو به عاریه از سایت radarearth.com قرض گرفتم.
هر صفحه به 3 section تقسیم شده.

قسمت بالایی یعنی section header به 4 تا zone تقسیم شده.

و هر zone خودش شامل چند تا region هست.

قسمت وسط یعنی section content هم به شکل زیر تقسیم بندی شده.

قسمت پایین section footer هم به همین شکل.
حالا که مفاهیم رو بیشتر یاد گرفتیم بهتر میتونیم در مورد قالب امگا با هم صحبت کنیم. به Zone and region Configuration برید وارد section content بشید و zone content پیدا کنید و قسمت configuration رو باز کنید.

قالب امگا دروپال

در این قسمت میتوانید برای هر zone تنظیمات خاصی انجام دهید. تیک اول برای این است که این zone تمام صفحه را پر کند. قسمت دوم برای این است که در هر صورت این zone نمایش داده شود حتی از هیچ مطلبی در آن قرار نداشت. شما میتوانید در این قسمت section این zone را تغییر دهید. میتوانید تعداد ستونهای این zone را تنظیم کنید و هم چنین مشخص کنید که کدام region در این zone اصلی است. شما میتوانید به این zone یک کلاس اختصاص دهید تا بعدا بتوانید برای آن css بنویسید.اگر لیست region ها رو ببینید.  3 region وجود دارد sidebar first و content و sidebar second. 

قالب امگا دروپال

همینطور که میبینید اندازه هر کدام از region های sidebar first و sidebar second برابر با 3 ستون است. هر ستون یعنی یک grid شما در این قسمت میتوانید به راحتی هر ناحیه (region) را به zone دیگری منتقل کنید. میتوانید قبل و بعد از هر region یک فاصله ایجاد کنید و میتوانید با تغییر وزن هر ناحیه چیدمان آن zone را تغییر دهید. برای مثال اگر وزن sidebar second را به 2 تغییر دهید و وزن content را به 3 تغییر دهید جای این 2 region با هم عوض میشود.
نکته ای که باید رعایت کنید این است که تعداد گرید های region های هر zone نباید از تعداد تعیین شده در zone آن region بیشتر باشد. یعنی در حالی که sidebar first و sidebar second هر کدام 3 ستون را اشغال کرده اند تعداد ستون های content نباید از تفریق تعداد ستون های تعیین شده در zone content بر جمع تعداد ستونهای region های دیگر (6-12) یعنی 6 بیشتر باشد.

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

Debugging
همینطور که از اسم این قسمت بر میاید مربوط میشود به مسئله عیب یابی این قالب. مثلا شما میتوانید گرید های صورتی رنگی که در صفحه اصلی مشاهده میکنید یا عکسی که در گوشه پایین سمت راست قرار دارد که در آن resize me نوشته شده را از صفحه حذف کنید.

Toggle Libraries
در این قسمت کتابخانه هایی که در قالب omega استفاده شده اند را میتوانید غیرفعال کنید.
Formalize: برای زیبا کردن المان های HTML در صفحه استفاده میشود. اطلاعات بیشتر را بخوانید
Media queries: برای پشتیبانی از قابلیت تعاملی در امگا. فکر نمیکنم توجیهی برای غیرفعال کردن این قابلیت وجود داشته باشد.
Equal heights: اگر میخواهید بلوک های چیده شده در صفحه به صورت اتوماتیک طول های برابر داشته باشند این گزینه را فعال کنید.

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

Toggle Advanced Elements
میتوانید بعضی از المان های ناخواسته مثل خرده نان (‌breadcrumb) یا Tab ها یا آیکون فید را حذف کنید هم چنین میتوانید نام سایت یا عنوان صفحه و شعار سایت را نیز از این قسمت حذف کنید.

امیدوارم تا اینجای کار این سری مقالات به درد شما خورده باشه خبر خوب اینه که کم کم داریم به قسمت های جذاب تر این سری مقالات نزدیک میشیم. پس تا قسمت بعد منتظر ما باشید.

 

تگ های مطلب: 

دیدگاه‌ها

تشكر و سوال

با تشكر از آموزش خوبتان يك سوال يا بهتر بگم يك مشكل با اين تم دارم . وقتي با omega كار ميكنم در IE Sidebar First با Sidebar Second جابجا مي شوند . و در واقع در كل صفحه بلوك هاي چپ با راست عوض مي شوند.

@#1 عجیبه. با کدام ورژن IE

@#1 عجیبه. با کدام ورژن IE مشکل دارید؟. زبان IE شما چیست؟ سایت شما 2 زبانه است؟ 

با غير فعال كردند

با غير فعال كردن و برداشتن تيك گزينه Enable the responsive grid در تنظيمات تم ، درست مي شود. ولي من مي خواهم اين گزينه فعال با شد .

@#1.1.1 مطلب زیر رو بخونید

@#1.1.1 مطلب زیر رو بخونیدhttp://stackoverflow.com/questions/6043881/how-can-i-have-special-css-for-ie 

با IE 6 -7-8 تست كردم با

با IE 6 -7-8 تست كردم با همه آنها مشكل دارد . به نسخه اصلي 7.17 زبان فارسي را اضافه كردم و در واقع سايت براي زباني فارسي طراحي مي گردد . و در ساير بروزر ها مشكلي ندارد .

omega

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

@#3 یادم نرفته سری جهارم رو

@#3 یادم نرفته سری جهارم رو کمی نوشتم اما کمی درگیر شدم توی این هفته حتما سری 4 رو میخونید 

داداش شما کارت درسته هر رزو

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

سپاس از آموزش هاتون

سپاس از آموزش هاتون

سلام من نصب کردم و همه را ها

سلام من نصب کردم و همه را ها رو رفتم اما این تنضیمات واسمه من نیومد Layout Development Compatibility Assets اومده واسم

احتمالا شما نسخه ۴ قالب امگا

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

Grid layout

با سلام. من از دروپال نسخه 7.34 استفاده میکنم. وقتی وارد admin/appearance بر روی settings روبروی قالب امگایی که ساخته ام کلیک میکنم گذینه Grid و سایر گذینه هایی که گفتید نمیبیینم! و گزینه های زیر فقط وجود دارند. Assets Layouts Compatibility Development لطفا راهنمایی کنید.

ظاهرا این بالا مشکل گفته شده

ظاهرا این بالا مشکل گفته شده باید از 3 استفاده میکردم . لطفا توضیحاتی هم در مورد نسخه 4 بدین. با تشکر.

سلام

سلام این راهنما در مورد نسخه 3 ماژول امگاست. شما احتمالا دارید از نسخه 4 استفاده میکنید.

دیدگاه جدیدی بگذارید

آخرین ارسال ها

محتواهای محبوب

درباره ما

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

تماس با ما

با ما تماس بگیرید.

logo-samandehi