آموزش استفاده از کلاس های span* در ماژول های جوملا

زمانی که در ادمین جوملا یک ماژول می سازید، در برگه Advanced مدیر ماژول یک گزینه کشویی به نام Bootstrap Size وجود دارد. در حال حاضر قالب پروتواستار از این اطلاعات استفاده نمی کند. یعنی این گزینه در برگه مدیر ماژول جوملا نمایش داده نمی شود.

بجای این گزینه می توان از پسوند کلاس ماژول (Module Class Suffix) استفاده کرد و کلاس span مورد نظر خود را به آن تخصیص داد. مطمئن شوید که قبل از نام کلاس یک فاصله بزنید تا نام کلاس درج شده به نام کلاس ماژول نچسبد و بین آنها یک فاصله وجود داشته باشد.

جوملا, قالب جوملا, ساید بار جوملا, پوزیشن جوملا, ماژول جوملا, کامپوننت جوملا, نصب جوملا, ویرایش قالب جوملا, قالب ریسپانسیو, ایجاد پوزیشن ماژول جدید,

زمانی که مثلا span4 به یک ماژول از نوع Custom HTML اختصاص داده می شود، کد ماژول در حین اجرا به صورت زیر خواهد بود:

<div class="moduletable span4">
    <div class="custom span4">
        --- Content of the module ---
    </div>
</div>

در اینجا یک مشکل وجود دارد و آن این است که در فایل template.css برای این کلاس های span درصد در نظر گرفته شده است. این درصدی از پهنای عنصری است که ماژول ها را در بر دارد. یک نمونه از این سبک دهی در زیر آمده است:

.row-fluid .span4 {    
    width: 31.9149%
}

حالا اگر بخواهیم سه ماژول در پوزیشن-3 کنار هم قرار بگیرند، چطور؟ اگر در پوزیشن های 7 و 8 وب پیج ماژول فعال داشته باشید، پوزیشن-3 دارای کلاس span6 خواهد بود. منطقی این است که به سه ماژول کلاس span2 بدهید که span6 پوزیشن-3 را در سه ستون پر کنند. اما از آنجایی که به عنصر حاوی ماژول ها یعنی پوزیشن-3 درصد اختصاص داده شده است، لازم است که به هر یک از ماژول ها نام کلاس span4 را بدهید که سه ماژول در کنار هم قرار بگیرند، یعنی هر کدام یک سوم span6 پوزیشن-3 را اشغال کنند. این حالت موجب می شود که در طراحی ریسپانسیو سه ماژول به طور منظم بالای همدیگر قرار بگیرند.

در اینجا مشکل دیگری وجود دارد که عرض داخلی <"div class="custom span4> درصدی از محفظه آن یعنی <"div class="moduletable span4> است، بنابراین خیلی باریکتر می شود. بنابراین بایستی خطی به کدهای استیل شیت اضافه کرد:

.moduletable div.span4 {width: 100%}

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

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

سفارشی کردن قالب پروتواستار

عضویت در خبرنامه پلکسا

در صورت تمایل ایمیل خود را وارد کنید و تازه های پلکسا را از طریق ایمیل دریافت کنید. خبرنامه الکسا هفته نامه بوده و حاوی جدیدترین مطالب و نشریات پلکسا است.

با ما شریک شوید

با ما باشید

قابل توجه وبمسترها

وبمستر گرامی

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