طریقه تعیین سبک ماژول از طریق کلاس سفارشی

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

ماژول ها در جوملا

ما می توانیم تا حدودی رفتار ماژول ها را در وبسایت جوملا کنترل کنیم. مثلا می توانیم ماژول را به منوی خاصی تخصیص دهیم و آن ماژول تنها در صفحات مرتبط با آن منو ظاهر شود. اینکار از طریق برگه Menu Assignment ماژول در مدیر ماژول جوملا (Module Manager) انجام می شود.

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

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

طریقه افزودن کلاس به ماژول در جوملا

برای اضافه کردن نام کلاس مورد نظر برای سبک دهی سفارشی یک ماژول به صورت زیر عمل می کنیم:

ابتدا ماژول مورد نظر را در مدیر ماژول جوملا انتخاب کرده و سپس باز می کنیم. برگه Advanced ماژول را باز می کنیم. در این برگه یک جعبه متن در مجاورت گزینه Module Class Suffix وجود دارد. این جایی است که نام کلاس را وارد می کنیم.

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

<div class="moduletableredbackground">
<div class="customredbackground">
</div>
</div>

می توان برای چک نام کلاسهای وارد شده برای ماژول ها از ابزارهای تشخیصی مثل فایرباگ یا کنسول گوگل استفاده کرد و کد ماژول را مشاهده کرد. همانند کد فوق که از کنسول گوگل کپی شده است.

معمولا بطور پیش فرض جوملا نام کلاس سفارشی را در پایان نام کلاس div محفظه ماژول قرار می دهد. برای اینکه کلاس توسط جوملا شناخته شده و به نتیجه مورد نظر برسیم، بایستی حتما قبل از نام فایل در جعبه متن Module Class Suffix یک فاصله بگذاریم.

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

معمولا موقع ساخت ماژول نام کلاس را به آن اضافه کرده و سپس کلاس ماژول در استیل شیت قالب بندی می شود. مثلا کلاس ذکر شده در بالا به صورت زیر قالب بندی می شود:

.redbackground {background: #890000; color: #ffffff;}

طریقه پیشگیری از نمایش ماژول در دستگاه های موبایل

معمولا در جوملا صفحه نمایشی موبایل در نظر گرفته می شود که حداکثر عرض آن 767 پیکسل یا کمتر باشد. برای اینکه ماژول خاصی را برای دستگاه های موبایل هدف قرار دهیم، لازم است که دستور display: none را به فراخوان @media مربوطه در استیل شیت اضافه کرد، مثل:

@media (max-width: 767px) {
    .redbackground {display: none}
}