انجمن ، رفع اشکال و راهنمای جوملا فارسی ،آموزش جوملا و پرسش و پاسخ

[dr.fox]

با این مقدمه که بیشتر مشکل من فکر کنم به CSS بر می گرده، توضیح می دهم.

قبل از هر چیز این تصویری از منوی فعلی در سمت راست سایت من است.



همانطور که مشاهده می کنید، تمام ماژول ها در یک منوی بزرگ قرار گرفته اند.

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

www.winbeta.net/download/menu.css

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



سرانجام، ضمن فراخوانی فایل بالا در core.css تغییرات زیر را در فایل Index.php بوجود آوردم.

اما منوها کماکان مشکل دارند. 

چطور می شه برای هر ماژول یک منو با استایل خاص خودش رو تعریف کرد، الان تمام ماژول ها در یک منو هستند.

[علوی نیک]

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

مثلا قالب پیش فرض جوملا 1.5 رو نگاه کنید ( قالب rhuk_milkway ) :

چند نوع سی اس اس داره.چند رنگ.رنگ آبی رو می خوایم نظاره کنیم.
فایل blue.css را ویرایش می کنیم.

کد زیر را درون این فایل دقت کنید

کد: انتخاب همه

div.module_menu {
   background: url(../images/blue/mw_box_br.png) 100% 100% no-repeat;
}

div.module_menu div {
   background: url(../images/blue/mw_box_bl.png) 0 100% no-repeat;
}

div.module_menu div div {
   background: url(../images/blue/mw_box_tr.png) 100% 0 no-repeat;
}

div.module_menu div div div {
   background: url(../images/blue/mw_box_tl.png) 0 0 no-repeat;
}

به کلمه زیر در کدهای بالا دقت زیادی کنید

کد: انتخاب همه

_menu

حالا کد سی اس اس را که گذاشته بودم رو کمی ویرایش کنید.مثلا من رنگش رو کلا عوض کردم ( قبلی از عکس می خوند) .حالا کد شد به شکل زیر:

کد: انتخاب همه

div.module_menu {
   background: url(../images/blue/mw_box_br.png) 100% 100% no-repeat;
}

div.module_menu div {
   background: url(../images/blue/mw_box_bl.png) 0 100% no-repeat;
}

div.module_menu div div {
   background: url(../images/blue/mw_box_tr.png) 100% 0 no-repeat;
}

div.module_menu div div div {
   background: #FF0033 0 0 no-repeat;

حالا برید مدیریت جوملا.
از منوی بالا "مدیریت ماژول ها ".
سپس منوی اصلی را ویرایش کنید.در سمت چپ بر روی " پارامترهای افزون " کلیک کنید.
پسوند کلاس ماژول رو دقت کنید.هست _menu
خوب حالا متوجه شدید؟

این به سی اس اس مربوط میشه.
راه دیگه هم داره که متونید تعریف کنید mod_login چه استایلی داشته باشه.
این روش رو یادم نیست.یادم  اومد بلافاصله در خدمتتون میزارم

شرمنده نتونستم خوب شرح بدم

موفق باشید

[علوی نیک]

موضوع تاپیک به " ایجاد استایل جداگانه برای هر منو یا ماژول " تغییر پیدا کرد.

[dr.fox]

خوب متوجه نشدم. 

مثلاً ما تو استایل CSS خودمون یه کلاس تعریف می کنیم به اسم BOX خب.

حالا اگر من برم تو Module Class Suffix مربوط به یکی از ماژول ها و اونجا بنویسم BOX ، منوی مربوط به این ماژول استایل BOX رو به خودشون می گیره ؟ 

---

نه فکر کنم چیزی که بالا نوشتم اشتباه باشه، چون من استایل سایت رو عوض کردم باز رفتم مسیر بالا Module Class Suffix باز هم عبارت menu_ بود، خب ظاهراً این ثابت هست برای همه منوها در همه قالب هاا!

یعنی اون استایل که من باید بسازم، باید فرمت نوشتنش حتماً توش div.module_menu باشه ؟! که وصل بشه به هم !

[علوی نیک]

گلم ، شما مثلا باید کلاس div.module_alavinik div div div  رو تعریف کنید مثل بالا ، سپس برید ماژول منو رو ادیت و اونجا که نوشته _menu  بزنید _alavinik

همین
تست کنید و متوحه خواهید شد

موفق باشید

[مجتبی عابدی پور]

در اين زمينه آموزشي توسط تيم مامبو در سايتشون بود كه براتون اينجا مي زارم

تنظیمات استایل و قالب برای ماژول ها    چاپ    ايميل
Sunday, 20 July 2008

اگر بخواهیم قالبی خاص به یک ماژول بدهیم به شکل زیر :

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

1. بخش بالایی ماژول را طراحی کنید و بعد از برش ذخیره کنید .
2.بخش بدنه ماژول را طراحی کنید و پس از برش ذخیره کنید.



---------------------------------------------------------------------------

نکته1 : ارتفاع بدنه ماژول که با نام boady ذخیره شده است بایدحتما زیاد باشد .زیرا با استفاده از کدی که شما وارد css میکنید .میتوانید تعیین کنید که هر وقت تعداد

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

در تصویر شماره 2 اندازه واقعی بدنه ماژول نمایش داده شده است . در عکس شماره 1 در قسمت بدنه ماژول می بینید که ارتفاع با توجه به اندازه مطالب نمایش داده شده است .


در کل به این معنی که بدنه مانند آسانسور رو به پایین کشیده میشود و سر تیتر (titr.png) در جای خود باقی می ماند.

---------------------------------------------------------------------------

مرحله بعد :
یک ماژول را در نظر میگیریم . ( به عنوان مثال : منوی اصلی) و مراحل زیر را انجام میدهیم .

---------------------------------------------------------------------------

نکته2 : در فایل 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;
}

---------------------------------------------------------------------------

نکته 3 :کاربرد پسوند کلاس ماژول کجاست ؟

شما هنگامی که در css تغییراتی میدهیدو میخواهید آن تغییرات مثلا رنگ فونت ، قالب و ... روی ماژول مورد نظر شما اعمال شود .یک پسوند یا نام به آن ماژول اختصاص میدهید.
(که ما در اینجا -main را انتخاب کردیم و میخواهیم یک استیل خاص به آن بدهیم ، سپس ماژول مورد نظر خود را در بخش مدیریت سایت باز میکنیم . و در قسمت پسوند

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

---------------------------------------------------------------------------

و در آخر وارد تنظیمات ماژول منوی اصلی می شویم و در قسمت پسوند کلاس ماژول عبارت -main را تایپ میکنیم و ماژول را ذخیره میکنیم .



---------------------------------------------------------------------------



نکته 4 : کد زیر مربوط به بدنه ماژول میباشد . که ما با دادن مشخصات به قسمت background مشخص کردیم که هر چه نوشته ها بیشتر باشد بدنه رو به پایین کشیده شود .

table.moduletable-main {
width : 100%;
table-layout : auto;
background: url(../images/boady.png) no-repeat bottom right;
}

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

[dr.fox]

ممنون، این جمله رو باید طلا گرفت 

در فایل css سایت کدهای زیر را اضافه کنید . این کد ها مربوط به کلاس ماژول مورد نظر ما است که در اینجا پسوند مورد نظر -main است .

[mahdi_asadi]

سلام می بخشید مثلا اگر من بخواهم در ماژول mod-feed اندازه و نوع فونت مشخصی برای فیدها در نظر بگیرم چه باید بکنم

[امید شایسته پور]

شما باید داخل فایل template.css برید و از اونجا ماژول مورد نظر رو پیدا کنید و تغییرات دلخواه رو اعمال کنید.البته اگر از اونجا به جایی نرسیدید می تونید از فایلهای خود ماژول برای ویرایش استفاده کنید
موفق باشید

[mahdi_asadi]

سلام در فایل template.css و دیگر فایلهای مربوط به css قالب و در فایلهای خود ماژول هیچ اشاره ی مشخصی به این ماژول نشده
فایلها را ضمیمه کرده ام

[علیمردانی]

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

[mahdi_asadi]

یعنی می گویید خودم یک کلاس برای این ماژول در css درست کنم ؟

[مجتبی عابدی پور]

کلاسهای ماپول رو با پسوند خاصی مانند _feed درست کنید
بعدش در سایت نیز قسمت ÷پسوند کلاس ماژول رو همین بزارید

[mahdi_asadi]

آقای عابدی پور و دیگر دوستان با تشکر فراوان درست شد

[امید شایسته پور]

آقای عابدی پور و دیگر دوستان با تشکر فراوان درست شد

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