تنظیمات استایل برای ماژول ها

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

سوال من این بود : میخوام قالبی خاص به یک ماژول بدم به صورت زیر :

[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]

روش کار :(البته اون چیزی که من بهش رسیدم)

ابتدا بخش بالایی ماژول (که تیتر نام ماژول نمایش داده میشه) رو طراحی میکنیم .سپس بخش بدنه ماژول .

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

کش اومدن . تکرار نشه یا قطع نشه .. به صورت زیر

[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]

خوب حالا ما یه ماژول رو در نظر میگیریم . مثلا منوی اصلی

در قسمت css سایت این کد ها رو که مربوط به کلاس ماژول هاست اضافه میکنیم (البته تو خود css هست ولی بدون پسوند کلاس ماژول )

کد:

---

table.moduletable-main {
 width                          : 100%;
 table-layout          : auto;
 background: url(../images/body.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/header.png);
 background-position : 100%;
}



table.moduletable-main td {
 padding-left    : 2px;
 padding-right    : 2px;
 padding-top    : 2px;
 padding-bottom  : 2px;
 margin              : 4px;
}

---

در کد بالا دقت میکنید که جلوی اونها نوشته شده main- این کد چه استفاده ای دارد :


در قسمت پسوند کلاس ماژول ها ! به این معنی که شما هنگامی که در css تغییراتی میدهید یا ... و میخواهید آن تغییرات مثلا رنگ

فونت روی فقط یک ماژول عمل کند . یه نامی به اون میدید . به صورت بالا .(که ما اینجا دادیم main- و میخوامیم یه استیل خاص به اون

بدیم) سپس ماژول مورد نظر خود را در بخش مدیریت سایت باز میکنیم . و در قسمت پسوند کلاس ماژول این کد رو وراد میکنیم .

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


پس ما وارد تنظیمات ماژول منوی اصلی میشیم و در قسمت پسوند کلاس ماژول مینویسیم main- . تمام !

توضیح در مورد کد بالا :

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

[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]

توضیح در مورد کد بالا :

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

کد:

---

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

}

---

ممنون عماد جان
لطف کردی

با تشكر فراوان
بسيار عالي بود

سلام
ممنون از این آموزش تر و تمیز... اما من تمام این مراحل رو برای قالب js-matrix هر چقدر انجام میذم هیچ تغییری رخ نمیده! کسی تا حالا روی این قالب این مورد رو تست کرده؟
آیا مشکل از قالب هست؟

سلام.خب شما همین کاری را که روی این قالب انجام می دید روی قالب های دیگه هم تست کنید.اونوقت معلوم میشه اشکال از روش کار شماست یا ... . البته بیشتر فکر می کنم یه جای کار ایراد داشته باشه تا قالب.

یــــــــــــــــــاعــــ ــــــــــلی

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

[quote author=biogenix link=topic=12394.msg102073#msg102073 date=1235120641]
سلام اولا برای اسایل دادن به قالبها لازمه سی اس اس خوب بلد باشید در ضمن روی هر قالب معمولا استایلهای پیش فرض وجود داره که تو بخش توضیحات معمولا تو سایت ارائه دهنده قالب وجود داره
خود شما بهتره به ماژولی که میخواین استایل بدین یه ایدی بدین بعد یک استایل برای اون آیدی تعریف کنید چون آیدی بر تمام حالتهای دیگه سی اس اس مقدمه و اول لود میشه
[/quote]

لطفا درمورد خط آخر بیشتر توضیح بدین حرفه ای نیستم...

سلام
آموزشهایی برای آشنایی با css در اینترنت هست، بگردید پیدا میکنید.
فرق آیدی و کلاس و استایل رو در این آموزشها اصولاً توضیح میدن.

یا حق

سلام
با تشکر از emad.h عزیز

من میخوام قالبی که به ماژولم میدم یکمی پیچیده تر باشه. یعنی اینکه از بیش از این دو تصویر در اون استفاده بشه
فرض کنید من بخوام این ماژول رو در موقعیتی غیر از راست و چپ ، مثلا در header یا debug یا یه چیزی مثل اینا که عرض شون بیشتر از موقعیت های راست و چپ هست نشون بدم

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

کسی میتونه کمکی بکنه؟