تنظیمات استایل و قالب برای ماژول ها

[آبجی]

اگر بخواهیم قالبی خاص به یک ماژول بدهیم به شکل زیر :

http://www.mambolearn.com/fa/images/stories/modules_example.png

از روش زیراستفاده میکنیم :

1. بخش بالایی ماژول را طراحی کنید و بعد از برش ذخیره کنید .
2.بخش بدنه ماژول را طراحی کنید و پس از برش ذخیره کنید.

http://www.mambolearn.com/fa/images/stories/modules_example1.png

---------------------------------------------------------------------------

نکته1 : ارتفاع بدنه ماژول که با نام boady ذخیره شده است بایدحتما زیاد باشد .زیرا با استفاده از کدی که شما وارد css میکنید .میتوانید تعیین کنید که هر وقت تعداد

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

http://www.mambolearn.com/fa/images/stories/modules_example2.png

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


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

---------------------------------------------------------------------------

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

---------------------------------------------------------------------------

نکته2 : در فایل 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;
}


---------------------------------------------------------------------------

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

شما هنگامی که در css تغییراتی میدهیدو میخواهید آن تغییرات مثلا رنگ فونت ، قالب و ... روی ماژول مورد نظر شما اعمال شود .یک پسوند یا نام به آن ماژول اختصاص میدهید.
(که ما در اینجا -main را انتخاب کردیم و میخواهیم یک استیل خاص به آن بدهیم ، سپس ماژول مورد نظر خود را در بخش مدیریت سایت باز میکنیم . و در قسمت پسوند

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

---------------------------------------------------------------------------

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

http://www.mambolearn.com/fa/images/stories/modules_example3.png

http://www.mambolearn.com/fa/images/stories/modules.gif

---------------------------------------------------------------------------

نکته 4 : کد زیر مربوط به بدنه ماژول میباشد . که ما با دادن مشخصات به قسمت background مشخص کردیم که هر چه نوشته ها بیشتر باشد بدنه رو به پایین کشیده شود .
کد:




table.moduletable-main {
width : 100%;
table-layout : auto;
background: url(../images/boady.png) no-repeat bottom right;
}


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

عماد هوشمند - تيم مامبولرن