برترین های سایت

با سلام چنین افزونه ای برای جوملا 2.5 و 3 وجود ندارد. یاعلی

از این پلاگین که خود جومینا منتشر کرده استفاده کنید : ModulesAnywhere_joomina_ir.zip بعد از نصب پلاگین ، کد زیر رو در مطلب قرار بدید فقط شماره id ماژول مربوطه رو به جای id در کد زیر قرار بدید {module id} موفق باشید

به نام یگانه طراح عالم هستی سلام دوستان چندروز پیش یکی از کاربران انجمن سوالی در مورد کلاس ماژول و نحوه ی استفاده از آنها در قالب هاشون رو داشتند ( این پست ) من در این پست میخوام در مورد کلاس های ماژول و نحوه ی ایجاد و استفاده از آنها توضیحات مختصری به همراه مثال رو ارائه کنم تا شاید برای برخی دوستان مفید باشد البته اصول کلاس های ماژول به این ترتیب که ارائه میشه نیست، اگه از ابتدا بخواییم قالب رو بصورت اختصاصی طراحی کنیم اونموقع باید کلاس های ماژول رو هم به صورت اصولی و به صورت اختصاصی تعریف کنیم که در این آموزش واقعا امکانش نیست ( یعنی نمیشه یه قالب رو از ابتدا شروع به طراحی بکنیم!) کلاس ماژول در عین حال که بسیار ساده است کمی پیچیده هم هست! برای یادگیری کامل کلاس های ماژول و خیلی چیزهای مفید دیگر توصیه ی من شرکت در کلاس های طراحی قالب جومیناست، چون مطمئنا راحت تر و بهتر و تو مدت زمان کمی موارد زیادی رو میتونید یاد بگیرید. این آموزش برای افرادی مفید خواهد بود که یک قالب آماده دارن و فقط میخوان برخی قسمت های اونو اختصاصی کنن شروع آموزش: کلاس های ماژول استایل هایی هستند که در فایل css خودمون ایجاد میکنیم و موقع ایجاد ماژول ها به هرکدوم میگیم که از کدوم استایل استفاده کنه. من همیشه وقتی ماژول جدیدی ایجاد میکردم با یه گزینه به نام "پسوند کلاس ماژول" مواجه میشدم و همیشه خالی رهاش میکردم! http://www.jmdownload.ir/download.php?imgf=13360723431.gif حتما شده که نواحی موجود در قالب و یا منوها برای شما یک دست باشند و بخواهید قسمتی از آن را به دلخواه تغییر دهید، بله کلاس ماژول همینجا به دردمون میخوره، برای روشن تر شدن موضوع کاررو روی یه قالب به نام ja_purity که روی جوملا نصب هستش امتحان میکنم این قالب یک ناحیه به نام Right داره که هر یک از ماژول های موجود در آن به این ترتیب از هم جدا شدن http://www.jmdownload.ir/download.php?imgf=13360726991.gif نواحی که در تصویر بالا با فلش مشخص شده اند هر کدام یک ماژول هستند که در ناحیه ی Right این قالب قرار داده شده اند و من میخوام کلاس مربوط به یه قسمت مثل "آخرین ارسال ها" رو تغییر بدم قبل از اعمال تغییرات برای مشاهده سورس صفحه روی صفحه مرورگر کلیک راست و گزینه "view page source" رو اتخاب میکنم تا سورس صفحه رو بهم نشون بده در سورس صفحه دنبال قسمتی از کد که قسمت "آخرین ارسال ها" رو نمایش میده میگردم و پیداش میکنم به این ترتیبه: http://www.jmdownload.ir/download.php?imgf=13360740831.gif قسمتی که ماژول آخرین ارسال های من توش قرار گرفته یه تگ div هستش که خاصیت کلاسش هم نوشته "jamod module"، تو تصویر بالا مشخصه. خب میرسیم به اصل کاری و اعمال تغییرات: اول میام و در ماژول آخرین ارسال ها در قسمت پسوند کلاس ماژول این عبارت رو به این شکل مینویسم: _akharin http://www.jmdownload.ir/download.php?imgf=13360730251.gif توجه کنید که ابتدا "_" و سپس بقیه رو نوشتم بعد از ذخیره تنظیمات و رفرش کردن صفحه اصلی سایت قسمت آخرین ارسال های من به این شکل نشون داده میشه: http://www.jmdownload.ir/download.php?imgf=13360737301.gif وقتی هم که سورس صفحه رو نگاه میکنم قسمت سورس یه تغییراتی کرده که به این صورته: http://www.jmdownload.ir/download.php?imgf=13360742271.gif همونطور که مشاهده میکنین به انتهای تمام کلاس های این ماژول یه _akharin اضافه شده و چون کلاس یا همون استایلی با این نام در فایل css من تعریف نشده ماژول رو بدون استایل و به شکل ساده نشون میده حالاما باید یه کلاس با این نام ایجاد کنیم تا ماژول ما از این خصوصیات استفاده کنه توجه کنید کلاس اصلی ما رو به اسم "jamod module_akharin" نشون میده ولی کلاسی که تعریف خواهیم کرد با module شروع وبه شکل "module_akharin" خواهد بود! کلاس مورد نظر رو در فایل css به این صورت تعریف میکنیم و داخل اون کدهای مورد رو مینویسیم: .module_akharin { background: #00CCCC; } شکل کلی برای کلاس اصلی به این صورت خواهد بود و این کد بالا به این معنیه که رنگ بک گراند هر ماژول که از این کلاس استفاده میکنه رنگ مشخص شده باشه، شکل زیر نتیجه ی این کد هستش: http://www.jmdownload.ir/download.php?imgf=13360772481.gif از این به بعد دیگه کارمون راحته و فقط با کد ها کار میکنیم سورس قسمت ماژول آخرین ارسال ها به این صورت بود: <div class="jamod module_akharin" id="Mod67"> <div> <div> <div> <h3 class="show"><span> آخرین ارسال ها</span></h3> <div class="jamod-content"><ul class="latestnews_akharin"> <li class="latestnews_akharin"> <a href="/temp/index.php/home/12-saghfe-kazeb-moshabbak.html" class="latestnews_akharin"> سقف های کاذب مشبک کناف</a> </li> <li class="latestnews_akharin"> <a href="/temp/index.php/home/11-divar-pusheshi.html" class="latestnews_akharin"> دیوار های پوششی</a> </li> <li class="latestnews_akharin"> <a href="/temp/index.php/home/10-divar-joda.html" class="latestnews_akharin"> دیوارهای جدا کننده</a> </li> <li class="latestnews_akharin"> <a href="/temp/index.php/component/content/article/7-khademat.html" class="latestnews_akharin"> خدمات</a> </li> <li class="latestnews_akharin"> <a href="/temp/index.php/component/content/article/5-news.html" class="latestnews_akharin"> جدیدترین محصولات</a> </li> </ul></div> در سورس بالا مشاهده میکنید که عنوان ماژول ما بین دو تگ h3 قرار گرفته و به این صورته : <h3 class="show"><span> آخرین ارسال ها</span></h3> حالا اگه ما بخواییم رنگ و یا مشخصات عنوان رو تغییر بدیم یه استایا به این صورت تغریف میکنیم و خصوصیاتی که میخواهیم به عنوان ماژول نسبت دهیم را داخل این استایل مینویسیم: .module_akharin h3 { color: #FFFF00; font-size: 13px; padding-right: 20px; } این کد یه کلاس برای تگ h3 در داخل کلاس "module_akharin" هستش و به این معنیه که به هرچی تگ h3 در داخل کلاس "module_akharin" هست مشخصه های زیر رو اعمال کن(رنگ و حاشیه و اندازه فونت و ...) برای سایر قسمت ها نیز به همین صورت عمل میکنیم، همونطور که در سورس بالا مشاهده میکنید زیرمنوها در داخل تگ های نمایش داده میشوند و برای تغییر خصوصیات این قسمت ها شما میتوانید به این صورت عمل کنید: .module_akharin li a { color: #6600FF; font-size: 12px; padding-right: 10px; list-style-type: disc; text-decoration: none; } بله این کد هم میگه تمام مواردی که در کلاس "module_akharin" قرار دارند و داخل تگ نوشته شدند و به صورت لینک هستند را به این شکل نمایش بده! شکل نهایی ماژول آخرین ارسال ها برای قالب ما بعد از اعمال استایل های بالا به این صورت شده است که مشاهده میکنید: http://www.jmdownload.ir/download.php?imgf=13360786741.gif البته شما بعد از کمی کاربا کلاس های ماژول و آشنا شدن با خصوصیات دیگر میتوانید ماژول های خود را با زیباتربن حالات نمایش دهید، این آموزش فقط برای معرفی و نحوه ی اعمال کلاس های ماژول به قالب های خودمون بود. دوستان، من خودم نه کلاسی رفتم نه آموزشی گرفتم(اصلا امکانش نبود چون همین اینترنتم تازه گیرمون اومده!) و فقط با تجربه ساختار محتوای جوملا رو یاد گرفتم و فکر میکنم خوب فهمیدم که چطور کار میکنه! دوستانی که میتونن تو کلاس ها شرکت کنن توصیه من به عنوان کوچیک همه ی شما اینه که کلاس ها رو از دست ندین و سعی نکنین مثل من با تجربه یادبگیرین، چون واقعا سخته و ممکنه بخاطر به نتیجه نرسیدن کلا طراحی وب رو بذارید کنار... حرف های زاید زیاد بود، به بزرگواریتون ببخشید اگه هر یک از دوستان سوالی در این مورد داشتن تو همین پست پیگیر بشن تا با کمک بقیه بزرگواران جومینا کمی در مورد کلاس های ماژول بحث بشه امیدوارم هرچند اندک ولی مفید بوده باشه حق نگهدارتان

سلام خب ببینید این بستگی به نحوه رندر کردن ماژول هاتون توسط قالب و استایل هایی که به ماژول هاتون دادید داره به هرحال این کلاسی که شما وارد کردین ماژول روشامل میشه و میتونید با استفاده از اون به المنت های داخل ماژول دسترسی داشته باشید (selectors in css)

سلام دوست عزیز بهترین راه برای پاسخ دادن به سوالاتون یادگیری css هست ببینید من فقط در مورد سوالی که فرمودید توضیح میدم تا متوجه بشید ببینید شما فرض کنید یه کد html دارید به این صورت: <ul class="ul_classes"> <li> <a href="#">Mylink</a> </li> </ul> حالا برای کد بالا چند کلاس css مینویسم: کد اول: .ul_classes{ background: blue; color: white; } کلاس بالا میگه هر تگ ul که خاصیت class برای اون با ul_classes مقدار دهی شده این خصوصیات رو بگیره(همون خصوصیاتی که نوشته، رنگ زمینه و ...) کددوم: .ul_classes li{ background: yellow; font-size: 13px; } کدبالا میگه هر li که داخل کلاس ul_classes داره خصوصیات زیر رو بگیره... کدسوم: .ul_classes li a{ background: red; color: yellow; } کد بالا میگه هر تگ a ای که در داخل li های کلاس ul_classes داره اون خصوصیات رو بگیره، در حقیقت این پشت یرهم نوشتن به این معنیه که یعنی داخل اون قرار داره کدچهارم: .ul_classes li a:hover{ font-size: 25px; } این کلاس میگه وقتی که ماوس میاد روی تگ a (لینک خای داخل li)، خصوصیات متن عوض بشه، مثلا فونتش بشه 25 یا هرچیزی... کد چهارم فقط روی تگ های a در مسیر ul_classes li a اعمال می شوند و روی لینک های دیگر در صفحه تاثیری نخواهند داشت، بقیه موارد نیز به همین ترتیب در مورد کلاس های ماژول هم ممکنه که کلاس های اختصاصی برای قالبتون نوشته باشند و اینو همینطوری نمیشه گفت، شما فایل css قالبتون رو قرار بدید تا دقیق تر در این مورد پاسخ داده بشه موفق باشید