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

ساخت قالب اختصاصی دروپال

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

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

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

 

  • global.css = global
  • yoursubthemename-alpha-default.css = default
  • yoursubthemename-alpha-default-narrow.css = narrow
  • yoursubthemename-alpha-default-normal.css = normal
  • yoursubthemename-alpha-default-wide.css = wide

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

global → default → narrow → normal → wide

یعنی شما باید css های خودتون مربوط به کوچک ترین اندازه رو در فایل global بنویسید به همین ترتیب تا مثلا نوشتن CSS برای تلوزیون ها در wide نوشته میشه.

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

در قسمت های بعدی یاد میگیریم چطور یک ناحیه جدید به قالب امگا اضافه کنیم و کمی در مورد نوشتن css در قالب خودمان صحبت میکنیم.
در ضمن بابت وقفه ای که در این قسمت از مقاله افتاد عذر خواهی میکنم. امیدوارم قسمت بعدی در 4 روز آینده آماده بشه.

قسمت پنجم را بخوانید.

تگ های مطلب: 

دیدگاه‌ها

مرسی داداش لایک داره این

مرسی داداش لایک داره این انگیزه دمت گرم مرسی 30 موفقتر باشی

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

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

دقیقا همون در نظر گرفتن

دقیقا همون در نظر گرفتن mobile first تو طراحی هست.

سلام

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

سلام همینطور که توی مقاله

سلام همینطور که توی مقاله قابل مشاهده است ترتیب نوشتن css ها در فایل ها به این ترتیبه global → default → narrow → normal → wide یعنی برای نوشتن css هایی که قراره در همه سایزها استفاده بشه در default بنویسید. برای css ها برای موبایل در global . css های مربوط به تبلت ها در narrow و css های مربوط به نمایشگرهای عادی و قدیمی در normal و در نهایت css های مربوط به صفحات wide هم در فایل wide نوشته میشه.

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

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

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

درباره ما

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

تماس با ما

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

logo-samandehi