[emad.h]

با سلام . من چند مدت پیش یه تاپیک زدم در مورد 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 مشخص کردیم که هر چی نوشته ها بیشتر باشه بدنه رو به پایین بیاد (به زبون خودومنی گفتم که راحت متوجه بشیم)

[emad.h]

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

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

کد: [انتخاب]

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

}


[حسین شکرزاده]

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

[demo]

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

[payman_ej]

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

[علی کاظم زاده]

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

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

[biogenix]

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

[salamati]

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

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

[مهدی.]

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

یا حق

[یاسر]

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

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

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

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

[مهدی.]

سلام

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

یا حق

[یاسر]

سلام
پسر مهربون! بهتره اگه وقت داری و میتونی کمک کنی، دست بکار بشی!
چون من بلد نیستم و نمیفهمم چی میگی. عاقبت به خیریش برات میمونه!

[مهدی.]

یاسر جان بلدی با css کار کنی ؟

یا حق

[یاسر]

سلام
نه مهدی جان. مشکل همینجاست

اگه وقت داری، خواهش میکنم مثل emad.h یه راهنما برای این موضوع درست کنی

[مهدی.]

تا اونجا که یادمه، اینگلیسیت خوب بود. سایت زیر رو کامل مطالعه کن و بعد خودت متوجه میشی که پسوند کلاس ماژول چی هست و چطوری میتونی انجام بدی.
w3schools.com/css/default.asp

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

یا حق

[یاسر]

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

قالب سایتم هم ja_xenia  و  md_macphoria   است.

[مهدی.]

برای اینکه با نمونه این مورد آشنا بشید، پیشنهاد میکنم یه مامبو جدید در لوکال نصب کنید و به تنظیمات ماژول منوی بالا بروید و مشاهده کنید.
سپس پسوند کلاس را در css قالب پیشفرض پیدا کنید و جواب سوال را پیدا کنید. اصلاً سخت و پیچیده نیست.

بطور مثال قالب موجود در لینک زیر را دریافت کنید و فایل کتاب الکترونیک موجود در بسته قالب و همچنین استایل قالب را بررسی کنید، متوجه میشید که اصلاً کار سختی نیست!
info.template-help.com/pre-sale_questions/about_web_design_templates/article33.html

یا حق

[یاسر]

سلام
در کل از اینکه وقت گذاشتی، مثل همیشه، ممنون

[سعید]

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

اول اینکه که باید طول و عرض کادر رو نسبی و غیر صریح درنظر بگیرید تا قابل انعطاف باشه. مثلا 100%

بعد اینکه باید از چند لایه استفاده کنید تا برای هر کدوم بتونید زمینه جداگانه ای درنظر بگیرید و با این کار برای گوشه ها و اضلاع زمینه های جداگانه ای داشته باشید تا مجبور نباشید طول یا عرض کادر و زمینه موردنظر رو fixed در نظر بگیرید.

برای پیاده سازی لایه ها از چند DIV تودرتو استفاده میشه. به این منظور در فراخوانی موقعیت ماژول، آرگومان دوم رو باید 3-  انتخاب کنید:

کد: [انتخاب]

<?php mosLoadModules( MyPosition, -3 ) ?> 

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

کد: [انتخاب]


<div class="module">
        <div>
                <div>
                        <div>
                                <h3>[[ First Module Title ]]</h3>
                                [[ First Module Body ]]
                        </div>
                </div>
        </div>
</div>

<div class="module">
        <div>
                <div>
                        <div>
                                <h3>[[ Next Module Title ]]</h3>
                                [[ Next Module Body ]]
                        </div>
                </div>
        </div>
</div>



MyPosition اسم موقعیت موردنظر شماست. مثلا right یا header یا debug

First Module و Next Module ماژول های منتشر شده در این موقعیت هستند.

Title عنوان ماژول و Body خروجی HTML بدنه ماژول هست. مثلا در ماژول ها دستی متن وارد شده هست.


امیدوارم متوجه شده باشید.

[سعید]

حالا برای هر کدوم از این لایه ها باید یک زمینه انتخاب کنید، هرزمینه  به عنوان یکی از اضلاع کادری که مدنظرتون هست.

بطور مثال برای ضلع راست، تعیین می کنید که زمینه لایه (DIV ) در سمت راست لایه قرار بگیره. چپ و بالا و پایین هم همینطور. به این صورت :

کد: [انتخاب]

TAG {
background: url(../images/bg_1.gif);

background-position: right;

}

ممکنه که ارتفاع کادر شما تغییر کنه بنابراین قطعا ارتفاع این ضلع راست هم تغییر خواهد کرد. دو راه دارید:

1- زمینه ضلع راست رو بزرگ درنظر بگیرید تا در صورت بزرگ تر شدن کادر بتونه ضلع راست رو پوشش بده (توضیح: اگر ابعاد زمینه از ابعاد تگی که زمینه اون هست بیشتر باشه، قسمت اضافی زمینه نمایش داده نمی شه) .
اگر گوشه های کادر شما گرد (smooth) هست باید از این حالت استفاده کنید و بالای زمینه ضلع راست رو گرد در نظر بگیرید. همینطور بالای ضلع چپ و سمت راست و سمت چپ ضلع بالا و پایین.

2- از الگوی تکرار استفاده کنید. مثلا یک یا چند نقطه (pixel) که بصورت عمودی تکرار بشه.

اگر از حالت اول استفاده می کنید و گوشه های زمینه شما گرد هست، باید از تکرار زمینه جلوگیری کنید. ( توضیح: اگر ابعاد زمینه از ابعاد تگی که زمینه اون هست کوچکتر باشه، بطور پیش فرض زمینه تکرار میشه)

کد: [انتخاب]

TAG {
background: url(../images/bg_1.gif);
background-position: right;

background-repeat: no-repeat;

}

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

کد: [انتخاب]

TAG {
background: url(../images/bg_1.gif);
background-position: right;

background-repeat: repeat-y;

}


اگر دقت کرده باشید در تعریف Style تگ ها از عبارت TAG استفاده کردیم و در خروجی سورس HTML این DIV ها، هیچ کلاس یا ID به اونها نسبت داده نشده. بنابراین برای مشخص کردن این تگ ها باید از وراثت استفاده کنید.

مثلا :

کد: [انتخاب]


DIV.module {
background: url(../images/bg_top.gif);
background-position: top;
background-repeat: repeat-x;
}

DIV.module DIV {
background: url(../images/bg_right.gif);
background-position: right;
background-repeat: repeat-y;
}

DIV.module DIV DIV {
background: url(../images/bg_left.gif);
background-position: left;
background-repeat: repeat-y;
}

DIV.module DIV DIV DIV {
background: url(../images/bg_bottom.gif);
background-position: bottom;
background-repeat: repeat-x;
}


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

یا علی