تنظیمات استایل برای ماژول ها
با سلام . من چند مدت پیش یه تاپیک زدم در مورد 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 یا یه چیزی مثل اینا که عرض شون بیشتر از موقعیت های راست و چپ هست نشون بدم
من میخوام قالب ماژولم خودشو با ابعاد موقعیتی که درونش هست وفق بده و در اون فیت بشه
کسی میتونه کمکی بکنه؟
پاسخ : تنظیمات استایل برای ماژول ها
سلام
به نظرم بهتره که از پسوند کلاس ماژول استفاده کنی.
یا حق
پاسخ : تنظیمات استایل برای ماژول ها
سلام
پسر مهربون! بهتره اگه وقت داری و میتونی کمک کنی، دست بکار بشی!
چون من بلد نیستم و نمیفهمم چی میگی. عاقبت به خیریش برات میمونه!
پاسخ : تنظیمات استایل برای ماژول ها
یاسر جان بلدی با 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;
}
در این مثال از الگوی تکرار استفاده شده و گوشه های کادر گرد نیستند.
یا علی
