معرفی مقدماتی کلاس ماژول و نحوه استفاده از آن

[رامین انگوتی 583]

به نام یگانه طراح عالم هستی

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

شروع آموزش:

کلاس های ماژول استایل هایی هستند که در فایل 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
  
  البته شما بعد از کمی کاربا کلاس های ماژول و آشنا شدن با خصوصیات دیگر میتوانید ماژول های خود را با زیباتربن حالات نمایش دهید، این آموزش فقط برای معرفی و نحوه ی اعمال کلاس های ماژول به قالب های خودمون بود.
  دوستان،
  من خودم نه کلاسی رفتم نه آموزشی گرفتم(اصلا امکانش نبود چون همین اینترنتم تازه گیرمون اومده!) و فقط با تجربه ساختار محتوای جوملا رو یاد گرفتم و فکر میکنم خوب فهمیدم که چطور کار میکنه!
  دوستانی که میتونن تو کلاس ها شرکت کنن توصیه من به عنوان کوچیک همه ی شما اینه که کلاس ها رو از دست ندین و سعی نکنین مثل من با تجربه یادبگیرین، چون واقعا سخته و ممکنه بخاطر به نتیجه نرسیدن کلا طراحی وب رو بذارید کنار...
  حرف های زاید زیاد بود، به بزرگواریتون ببخشید
  اگه هر یک از دوستان سوالی در این مورد داشتن تو همین پست پیگیر بشن تا با کمک بقیه بزرگواران جومینا کمی در مورد کلاس های ماژول بحث بشه
  
  امیدوارم هرچند اندک ولی مفید بوده باشه
  
  حق نگهدارتان

[sadaf3d 18]

ممنون از آموزش خوبتون

لطفا یه توضیحی به من بدید در مورد سوالهای زیر:

اگر به جای li تو عبارتی که قرار دادید منظورم :

.module_akharin li a
{
 color: #6600FF;
 font-size: 12px;
 padding-right: 10px;
 list-style-type: disc;
 text-decoration: none;
}

عبارات ul و ol و :hover قرار داشت به چه معنی هست ؟

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

اصلا میشه یکم در مورد کلاس عکس هم توضیح بدید؟ممنون

[رامین انگوتی 583]

سلام

دوست عزیز بهترین راه برای پاسخ دادن به سوالاتون یادگیری 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 قالبتون رو قرار بدید تا دقیق تر در این مورد پاسخ داده بشه

موفق باشید

[روناتا 6]

خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیل ی مفید بود بسیار سپاسگزارم

ویرایش شده آبان 92 توسط رامین انگوتی
تصحیح ساختار نامناسب پست

[MasterMHD 0]

خیلی ممنون رامین جان

 

ولی برای بنده چند تا مشکل داره

1- وقتی پسوند کلاس ماژول رو تعریف کردم و سایت رو رفرش کردم ماژول مورد نظر بدون استایل نبود و بازهم از استایل دیگر ماژول ها بهره میبرد(کش مرورگر رو هم پاک کرده بودم)

2- سورس صفحه رو هم که نگاه میکنم اون پسوندی که تو قسمت قبل وارد کرده بودیم به عنوان کلاس اصلی تعریف شده نه به عنوان پسوند کلاس بدین شکل:  <div class="_anlz">

 

حالا میخواستم ببینم با این تفاسیر بنده چجوری میتونم Title یه ماژول خاص رو اختصاصی (Customize) کنم

 

با تشکر

[رامین انگوتی 583]

سلام

خب ببینید این بستگی به نحوه رندر کردن ماژول هاتون توسط قالب و استایل هایی که به ماژول هاتون دادید داره 

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

[MasterMHD 0]

درود

توی سایت بنده Titleها بدین شکل تعریف شدند Madule Title.

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

[رامین انگوتی 583]

سلام

متوجه نشدم!

[MasterMHD 0]

میخواستم استایل عنوان (Title) یکی از ماژول هامو تغییر بدم

توی css قالب .. کلاس Title ماژول ها بدین شکل تعریف شدند  { ... } Madule Title.

بنده هم به ماژول مورد نظرم کلاس _anlz رو اختصاص دادم و توی css کلاس Madule_anlz Title رو تعریف کردم ولی ماژول مورد نظر تغییری نکرد.

مشکل از کجاست ؟

ویرایش شده بهمن 92 توسط محمد صادقی

[adambarfi 0]

آقا رامین از این مطلب مفید شما بسیار سپاسگزارم

[mohsen kian 51]

 

به نام یگانه طراح عالم هستی

سلام دوستان

چندروز پیش یکی از کاربران انجمن سوالی در مورد کلاس ماژول و نحوه ی استفاده از آنها در قالب هاشون رو داشتند ( این پست ) من در این پست میخوام در مورد کلاس های ماژول و نحوه ی ایجاد و استفاده از آنها توضیحات مختصری به همراه مثال رو ارائه کنم تا شاید برای برخی دوستان مفید باشد

البته اصول کلاس های ماژول به این ترتیب که ارائه میشه نیست، اگه از ابتدا بخواییم قالب رو بصورت اختصاصی طراحی کنیم اونموقع باید کلاس های ماژول رو هم به صورت اصولی و به صورت اختصاصی تعریف کنیم که در این آموزش واقعا امکانش نیست ( یعنی نمیشه یه قالب رو از ابتدا شروع به طراحی بکنیم!)

کلاس ماژول در عین حال که بسیار ساده است کمی پیچیده هم هست!

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

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

شروع آموزش:

کلاس های ماژول استایل هایی هستند که در فایل 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

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

  دوستان،

  من خودم نه کلاسی رفتم نه آموزشی گرفتم(اصلا امکانش نبود چون همین اینترنتم تازه گیرمون اومده!) و فقط با تجربه ساختار محتوای جوملا رو یاد گرفتم و فکر میکنم خوب فهمیدم که چطور کار میکنه!

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

  حرف های زاید زیاد بود، به بزرگواریتون ببخشید

  اگه هر یک از دوستان سوالی در این مورد داشتن تو همین پست پیگیر بشن تا با کمک بقیه بزرگواران جومینا کمی در مورد کلاس های ماژول بحث بشه

  امیدوارم هرچند اندک ولی مفید بوده باشه

  حق نگهدارتان

 

با سلام

من واقعا عذر می خوام که پست قدیمی رو بالا میارم گفتم شاید برخی از دوستان دنبال همچین چیزی باشند. و از دوستان یک سوال داشتم من کلاس ماژول رو کجا باید تعریف کنم. شاید سوالم خیلی پیش پا افتاده باشه شما ببخشید اگر میشه بیشتر توضیح بدید

[mohsen kian 51]

با سلام

من واقعا عذر می خوام که پست قدیمی رو بالا میارم گفتم شاید برخی از دوستان دنبال همچین چیزی باشند. و از دوستان یک سوال داشتم من کلاس ماژول رو کجا باید تعریف کنم. شاید سوالم خیلی پیش پا افتاده باشه شما ببخشید اگر میشه بیشتر توضیح بدید

لطفا یکی از دوستان راهنمایی نمایید

[m4mali 478]

با سلام

من واقعا عذر می خوام که پست قدیمی رو بالا میارم گفتم شاید برخی از دوستان دنبال همچین چیزی باشند. و از دوستان یک سوال داشتم من کلاس ماژول رو کجا باید تعریف کنم. شاید سوالم خیلی پیش پا افتاده باشه شما ببخشید اگر میشه بیشتر توضیح بدید

 

در گزینه های پیشرفته ماژول

[mohsen kian 51]

در گزینه های پیشرفته ماژول

آقای تیرداد اونجا که باید نام کلاس رو بنویسیم خود کلاس و کجا می تونم تعریف کنم

[m4mali 478]

آقای تیرداد اونجا که باید نام کلاس رو بنویسیم خود کلاس و کجا می تونم تعریف کنم

 

توی پرونده های css پوسته.

[mohsen kian 51]

توی پرونده های css پوسته.

ببخشید یعنی منظورتون اینه که در فایل css ماژول در پوشه css ها قالب باید کلاس تعریف کنم

[m4mali 478]

ببخشید یعنی منظورتون اینه که در فایل css ماژول در پوشه css ها قالب باید کلاس تعریف کنم

تفاوتی نمی کند در هر فایل css  که بارگزاری می شود می توانید فرامین را بنویسید.

پیشنهاد من این است که به پوشه پوسته (قالب جوملا) بروید و پرونده ی css پوسته را باز کنید و کلاس دلخواه خود را بنویسید

ویرایش شده شهریور 93 توسط تیرداد

[mohsen kian 51]

تفاوتی نمی کند در هر فایل css  که بارگزاری می شود می توانید فرامین را بنویسید.

پیشنهاد من این است که به پوشه پوسته (قالب جوملا) بروید و پرونده ی css پوسته را باز کنید و کلاس دلخواه خود را بنویسید

من فایل css ماژول را باز کردم و دستور زیر را وارد نمودم 

.module_akharin 

{

 

color: #FFFF00;

 

font-size: 13px;

 

padding-right: 20px;

 

}

و در کلاس ماژول عبارت _akhrain را وارد کردم اما اتفاقی نیافتاد.

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

[m4mali 478]

 

من فایل css ماژول را باز کردم و دستور زیر را وارد نمودم 

.module_akharin 

{

 

color: #FFFF00;

 

font-size: 13px;

 

padding-right: 20px;

 

}

و در کلاس ماژول عبارت _akhrain را وارد کردم اما اتفاقی نیافتاد.

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

 

 

بهتر است در فایل های css  پوسته (قالب) این کار را انجام دهید.

اگر همانند آموزش پیش بروید باید درست کار کند.

 

با firebug  یا firefox developer tools بررسی کنید

 

از !important هم استفاده کنید.

 

شوربختانه چون روی local هستنید بیشتر از این نمی توانم کمک بکنم