آموزش:تنظیمات استایل و قالب برای ماژولها
محتویات
مقدمه
اگر میخواهید قالبی خاص به یک ماژول همچون تصویر زیر بدهید، این آموزش را مطالعه کنید. در این آموزش فرض شده است شما اطلاعاتی در رابطه با CSS دارید. پس پیشنهاد میکنیم در صورتی که با CSS آشنایی ندارید، ابتدا آموزشهای مرتبط با CSS را مطالعه نمایید.
طریقه عملکرد
مرحله اول - ساخت فایلهای گرافیکی مورد نظر
- بخش بالایی ماژول را طراحی کنید و با توجه به نامهای مندرج در تصویر ذخیره کنید .
- بخش بدنه ماژول را طراحی کنید و با توجه به نامهای مندرج در تصویر ذخیره کنید.
مرحله دوم - پیش گفتار
نکته اول : ارتفاع بدنه ماژول که با نام boady ذخیره شده است باید حتماً به اندازه معقولی باشد، زیرا با استفاده از کدی که شما وارد CSS میکنید، میتوانید تعیین کنید که هر وقت تعداد مطالب از تعداد خاصی بیشتر باشد، بدنه ماژول به پایین کشیده شود.
در مثال زیر نشان داده شده است که ارتفاع بدنه اصلی ماژول چه اندازه بوده و به هنگام نشان دادن آن در صفحه سایت به چه اندازه تبدیل شده است.
در تصویر شماره 2 اندازه واقعی بدنه ماژول نمایش داده شده است . در تصویر شماره 1 در قسمت بدنه ماژول میبینید که ارتفاع با توجه به اندازه مطالب نمایش داده شده است .
در کل به این معنی که بدنه مانند آسانسور رو به پایین کشیده میشود و سرتیتر (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 را مینویسیم و ماژول را ذخیره میکنیم.
نکته چهارم : کد زیر مربوط به بدنه ماژول میباشد. که ما با دادن مشخصات به قسمت background مشخص کردیم که هر چه نوشتهها بیشتر باشد بدنه رو به پایین کشیده میشود.
table.moduletable-main {
width : 100%;
table-layout : auto;
background: url(../images/boady.png) no-repeat bottom right;
}
حال با انتشار ماژول در محل مورد نظر تغییرات خود را مشاهده میکنیم.
- این مقاله بمنظور ارائه به کاربران مامبو نوشته شده است، اما برای کاربران جوملا نیز قابل استفاده است. ممکن است برخی از قسمتها در این مقاله برای جوملا متفاوت و یا غیر قابل درک باشد.
 استفاده از مطالب دانشنامه جوملا فارسی - مامبو فارسی با ذکر منبع ( دانشنامه جوملا فارسی ) و لینک مستقیم به http://docs.joomlafarsi.com بلامانع است.
|
نویسنده : عماد هوشمند
