آموزش افزودن قالبی خاص به یک ماژول در جوملا

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

اگر می‌خواهید قالبی خاص به یک ماژول همچون تصویر زیر بدهید، این آموزش را مطالعه کنید. در این آموزش فرض شده است شما اطلاعاتی در رابطه با CSS دارید. پس پیشنهاد می‌کنیم در صورتی که با CSS آشنایی ندارید، ابتدا آموزش‌های مرتبط با CSS را مطالعه نمایید.
طریقه عملکرد
مرحله اول – ساخت فایل‌های گرافیکی مورد نظر

بخش بالایی ماژول را طراحی کنید و با توجه به نام‌های مندرج در تصویر ذخیره کنید .
بخش بدنه ماژول را طراحی کنید و با توجه به نام‌های مندرج در تصویر ذخیره کنید.
مرحله دوم – پیش گفتار

نکته اول : ارتفاع بدنه ماژول که با نام boady ذخیره شده است باید حتماً به اندازه معقولی باشد، زیرا با استفاده از کدی که شما وارد CSS می‌کنید، می‌توانید تعیین کنید که هر وقت تعداد مطالب از تعداد خاصی بیشتر باشد، بدنه ماژول به پایین کشیده شود.

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

در تصویر شماره ۲ اندازه واقعی بدنه ماژول نمایش داده شده است . در تصویر شماره ۱ در قسمت بدنه ماژول می‌بینید که ارتفاع با توجه به اندازه مطالب نمایش داده شده است .

در کل به این معنی که بدنه مانند آسانسور رو به پایین کشیده می‌شود و سرتیتر (titr.png) در جای خود باقی می ماند.
مرحله سوم – ساخت استایل و کلاس مورد نیاز

یک ماژول را در نظر می‌گیریم. ( به عنوان مثال : منوی اصلی ) و مراحل زیر را انجام می‌دهیم.

نکته دوم : در فایل CSS کلاسهایی به شرح زیر موجود است. این کلاس‌ها مربوط به کلاس کلی ماژول‌ها می‌باشد .

table.moduletable { }
table.moduletable th { }
table.moduletable td { }

و در صورتی که ما بخواهیم برای هر ماژول کلاسی خاص تعلق بگیرد باید به کلاس‌های بالا پسوند اضافه کنیم. به صورت زیر خواهند بود.
table.moduletable-main { }
table.moduletable-main th { }
table.moduletable-main td { }

همانطور که در بالا مشاهده می‌کنید ، پسوند تشکیل شده از هر کلمه مورد نظر شما باضافه (-) می‌باشد.

در فایل CSS قالب کدهای زیر را اضافه کنید. این کدها مربوط به کلاس ماژول مورد نظر ما است که در اینجا پسوند مورد نظر -main است.
table.moduletable-main {
width : 100%;
table-layout : auto;
background: url(../images/boady.png) no-repeat bottom right;
}
table.moduletable-main th {
font-size : 11px;
font-weight : bold;
text-transform : uppercase;
text-align : right;
height : 84px;
line-height : 22px;
text-indent : 8px;
letter-spacing : 1px;
color : #fff;
background-image : url(../images/titr.png);
background-position : 100%;
}

table.moduletable-main td {
padding-left : 2px;
padding-right : 2px;
padding-top : 2px;
padding-bottom : 2px;
margin : 4px;
}

نکته سوم : کاربرد پسوند کلاس ماژول کجاست ؟!

شما هنگامی که در CSS تغییراتی می‌دهید و می‌خواهید آن تغییرات مثلا رنگ فونت ، قالب و … روی ماژول مورد نظر شما اعمال شود. یک پسوند یا نام به آن ماژول اختصاص می‌دهید. (که ما در اینجا -main را انتخاب کردیم و می‌خواهیم یک استایل خاص به آن بدهیم، سپس ماژول مورد نظر خود را در بخش مدیریت سایت باز می‌کنیم و در قسمت “پسوند کلاس ماژول” نام انتخابی خود را وارد کنید، با این کار به ماژول دستور می‌دهید که همه مشخصات ظاهری خود را از این کلاس دریافت کند.
مرحله چهارم – معرفی پسوند کلاس در ماژول

وارد تنظیمات ماژول منوی اصلی می شویم و در قسمت “پسوند کلاس ماژول” عبارت -main را می‌نویسیم و ماژول را ذخیره می‌کنیم.

Prostyle-mod 04.png

Prostyle-mod 05.gif

نکته چهارم : کد زیر مربوط به بدنه ماژول می‌باشد. که ما با دادن مشخصات به قسمت background مشخص کردیم که هر چه نوشته‌ها بیشتر باشد بدنه رو به پایین کشیده می‌شود.
table.moduletable-main {
width : 100%;
table-layout : auto;
background: url(../images/boady.png) no-repeat bottom right;
}

حال با انتشار ماژول در محل مورد نظر تغییرات خود را مشاهده می‌کنیم.
تغییر موقعیت ماژول
سوال

اگر بخواهیم قالبی که به ماژول می‌دهیم کمی پیچیده‌تر باشد. یعنی اینکه بیش از دو تصویر در آن استفاده شده باشد، یا اینکه این ماژول را در موقعیتی غیر از راست و چپ، مثلا در header یا debug یا یک چیزی مشابه موقعیت‌های دیگر که عرض آنها بیشتر از موقعیت‌های راست و چپ هست نشان داد چه باید کرد؟
روش کار

اول اینکه که باید طول و عرض کادر را نسبی و غیر صریح درنظر بگیرید تا قابل انعطاف باشه. مثلا ۱۰۰%

بعد اینکه باید از چند لایه استفاده کنید تا برای هر کدام بتوان زمینه جداگانه‌ای درنظر گرفت و با این کار برای گوشه‌ها و اضلاع زمینه‌های جداگانه‌ای داشته باشید تا مجبور نباشید طول یا عرض کادر و زمینه مورد نظر را fixed در نظر بگیرید.

برای پیاده سازی لایه ها از چند DIV تو در تو استفاده می‌شود. به این منظور در فراخوانی موقعیت ماژول ، آرگومان دوم رو باید ۳- انتخاب کنید:
<?php mosLoadModules( MyPosition, -3 ) ?>

با اینکار خروجی سورس HTML موقعیت ماژول به این صورت خواهد بود :
<div class=”module”>
<div>
<div>
<div>
<h3>[[ First Module Title ]]</h3>
[[ First Module Body ]]
</div>
</div>
</div>
</div>

<div class=”module”>
<div>
<div>
<div>
<h3>[[ Next Module Title ]]</h3>
[[ Next Module Body ]]
</div>
</div>
</div>
</div>

MyPosition اسم موقعیت موردنظر شماست. مثلا right یا header یا debug

First Module و Next Module ماژول‌های منتشر شده در این موقعیت هستند.

Title عنوان ماژول و Body خروجی HTML بدنه ماژول می‌باشد. مثلاٌ در ماژول‌های دستی متن وارد شده مورد نظر هست.

حالا برای هر کدام از این لایه‌ها باید یک زمینه انتخاب کنید، هر زمینه به عنوان یکی از اضلاع کادری که مد نظر هست.

بطور مثال برای ضلع راست، تعیین می‌کنید که زمینه لایه (DIV) در سمت راست لایه قرار بگیرد. چپ و بالا و پایین هم همینطور.

به این صورت :
TAG {
background: url(../images/bg_1.gif);

background-position: right;

}

ممکن است که ارتفاع کادر شما تغییر کند بنابراین قطعاٌ ارتفاع این ضلع راست هم تغییر خواهد کرد.

دو راه وجود دارد:

۱- زمینه ضلع راست بزرگ در نظر گرفته شود تا در صورت بزرگ‌تر شدن کادر بتواند ضلع راست را پوشش دهد (توضیح: اگر ابعاد زمینه از ابعاد تگی که زمینه آن هست بیشتر باشد، قسمت اضافی زمینه نمایش داده نمی‌شود) اگر گوشه‌های کادر شما گرد (smooth) باشد باید از این حالت استفاده کنید و بالای زمینه ضلع راست رو گرد در نظر بگیرید. همینطور بالای ضلع چپ و سمت راست و سمت چپ ضلع بالا و پایین.

۲- از الگوی تکرار استفاده کنید. مثلا یک یا چند نقطه (pixel) که بصورت عمودی تکرار شود.

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

( توضیح: اگر ابعاد زمینه از ابعاد تگی که زمینه آن هست کوچکتر باشد، بطور پیش فرض زمینه تکرار می‌شود)
TAG {
background: url(../images/bg_1.gif);
background-position: right;

background-repeat: no-repeat;

}
اما اگر گوشه‌ها گرد نیستند، می‌توانید از الگوی تکرار استفاده کنید. در حالتی که از الگوی تکرار استفاده می‌کنید، با توجه به اینکه تکرار فقط در راستای عمودی انجام می‌شود، باید برای زمینه وضعیت تکرار را در جهت محور y مشخص کنید:
TAG {
background: url(../images/bg_1.gif);
background-position: right;

background-repeat: repeat-y;

}
اگر دقت کرده باشید در تعریف Style تگ‌ها از عبارت TAG استفاده کردیم و در خروجی سورس HTML این DIVها، هیچ کلاس یا ID به آنها نسبت داده نشده است. بنابراین برای مشخص کردن این تگ‌ها باید از وراثت استفاده کنید.
DIV.module {
background: url(../images/bg_top.gif);
background-position: top;
background-repeat: repeat-x;
}

DIV.module DIV {
background: url(../images/bg_right.gif);
background-position: right;
background-repeat: repeat-y;
}

DIV.module DIV DIV {
background: url(../images/bg_left.gif);
background-position: left;
background-repeat: repeat-y;
}

DIV.module DIV DIV DIV {
background: url(../images/bg_bottom.gif);
background-position: bottom;
background-repeat: repeat-x;
}
در این مثال از الگوی تکرار استفاده شده و گوشه‌های کادر گرد نیستند.
نویسندگان: عماد هوشمند – سعید
این مقاله بمنظور ارائه به کاربران مامبو نوشته شده است، اما برای کاربران جوملا نیز قابل استفاده است. ممکن است برخی از قسمت‌ها در این مقاله برای جوملا متفاوت و یا غیر قابل درک باشد.

Indent support.png
هر گونه سوال و یا مشکلی در این رابطه دارید، می‌توانید در انجمن تخصصی تیم جوملا فارسی جستجو کرده و در صورت عدم دریافت نتیجه مورد نظر، سوال جدیدی را مطرح کنید.