مشکل ماژول ها در طراحی قالب

[Hesam 0]

سلام دوستان ...

من یه مشکل در طراحی قالب‌های جوملا دارم .

مشکل :

بعضی‌ وقت‌ها پیش میاد که میخوایم ماژول ها دارای یه قالب خاص باشند (یعنی‌ماژول تیبل ها دارای یه قالب خاص باشند !)

مثل عکس زیر :

فرض کنیم که میخوایم ماژول تیبل ‌ها به شکل بالا باشند .

خوب برای این کار باید قسمت بالاش رو جدا کنیم برای :

background h۳ در moduletable‌ها .

در نتیجه عکس به این شکل می‌شه :

اما حالا عکس background خود moduletable می‌‌‌مونه ! 

برای این کار باید چی‌ کار کنیم ؟

خوب تا اینجا کد سی اس اس شده :

.moduletable h3 {width:325px; 
background-image:url(../images/side-top.png); 
background-position:right; 
background-repeat:no-repeat; 
height:48px; 
position:relative; 
} 
.moduletable {width:325px; 
???????? 
چی باید نوشت 
???????? 
} 

یه راهنمائی کنید که باید چه سی اس اسی استفاده کنیم که ماژول تیبل ‌هایی که دارای عکس‌های خاص یا حاشیه‌های خاص هستند به این شکل در بیان ؟

منتظره جوابتون هستم .

[Saeed_Shamsi 758]

با سلام

متسفانه وقت زیادی برای توضیح دادن ندارم ....

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

یا حق

[Hesam 0]

سلام سعید عزیز ...

از اینکه وقتت رو گذشتی و جوابم رو دادی خیلی‌ ممنونم .

اما من باید یه نکته رو یادا آور بشم .

من کد نویسی ماژول هارو بلدم و فقط تنها مشکلی‌ که دارم اینه که وقتی طول ماژول زیاد می‌شه کنار‌ها خالی‌ می‌‌‌مونه !

برای اینکه مشکله منو رو متوجه بشید به عکس زیر نگاه کنید :

عکس اول برای سایت

persianportal.ir

است .

اما عکس ۲ برای قالب من هست .

همون تور که توی عکس پیدا است ماژول‌های من وقتی‌ که طولشون زیاد می‌شه کادر کنار اونا از بین میره !

می‌خواستم بدونم که باید چی‌ کار کنم ؟

اگه می‌شه به همون سایت که معرفی‌ کردم برید ،چون من فکر می‌کنم برای بر طرف کردن مشکل از

border

استفاده کرده !

باید چی‌ کار کنم ؟

[رضـا دولتشاهی 1]

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

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

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

[Hesam 0]

رضـا دولتشاهی عزیز ممنون از پاسخت . :thankyou:

اما می‌شه واضح تر توضیح بدی ؟!

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

اینم عکسش:

اما ندونستم که عکس بالا رو برای بکگراند کدوم عنصر انتخاب کرده !

سوال اینه که این عکس رو برای بکگراند کدوم عنصر قرار داده ؟

منتظره جوابتون هستم (اگه امکانش هست سریع جواب بدین چون خیلی‌ به این موضوع احتیاج دارم .)

[ستار رضايي 80]

ببین حسام جان

شما اون دو عکس که پایین گذاشتی برای دریافت جوملا را در مدیرت ماژول یک خورده کوچکتر کن تا مشکل برطرف بشه

موفق باشی

[Hesam 0]

دوستان می‌شه واضح تر توضیح بدین !

شما اون دو عکس که پایین گذاشتی برای دریافت جوملا را در مدیرت ماژول یک خورده کوچکتر کن تا مشکل برطرف بشه

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

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

یا یه مثال بزنید ؟

[ستار رضايي 80]

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

در ادیتور اندازه عکس را کمی کوچکتر کن.

موفق باشید

[Hesam 0]

ستار رضايي عزیز ...

من درست متوجه نمیشم !

شما میگی‌ به مدیریت ماژول برم و از اونجا وارد ماژول مورد نظر بشم .

باشه من تا اینجا رو رفتم .

اما ...

بعدش گفتی‌ " در پایین این دو عکس موجود هست" کدوم ۲ عکس ؟ کجا ؟

می‌شه بیشتر توضیح بعدی ؟

اما من یه چیز دیگه فکر می‌کنم !

من فکر می‌کنم که برای اینکه کاردر ماژول هنگامی که طول ماژول افزایش پیدا می‌کنه ،افزایش پیدا کنه باید از css استفاده کنیم و عکسی مثل عکس زیر رو به عنوانه بکگراند یه جائی‌ قرار بدیم !(تا اونجا که من دیدم ،همه از این روش استفاده می‌کنن)

عکس :

اما من سوالم اینه که این عکس رو باید بکگراند کجا قرار بدم ؟

[ستار رضايي 80]

حسام جان

آدرس سایت را قرار بده تا بیشتر بتونیم برات توضیح بدیم

موفق باشید

[Hesam 0]

شرمنده ...

من دارم روی قالب به صورت آفلاین (localhost) کار می‌کنم !

اگه می‌خوای قالب رو بفرستم ؟

[ستار رضايي 80]

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

شما با ماژول دستی این مشکل را دارید یا با ماژولهای گوناگون؟

[Hesam 0]

مشکله من با همهٔ ماژول‌هایی است که طولشون زیاد می‌شه !

چه ماژول‌های دستی‌ چه ماژول‌های گوناگون ،هر فقط طولشون زیاد باشه این مشکل پیش میاد !

؟

[ستار رضايي 80]

شما با چه ماژولهایی تست کردید؟

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

در واقع شما باید طوری تنظیمات ماژول خود را انجام بدی که از اندازه تعریف شده ماژول بیشتر نشه

[Hesam 0]

دوستان من پست قبلیم رو موقعی که داشتم میرفتم کلاس نوشتم و یه اشتباهی‌ کردم !

اونم اینه که من با تمام ماژول‌ها این مشکل رو دارم .

اشتباه بعدی که صورت گرفته اینه که من در طرح سوالم بجای کلمه ی "ارتفاع" از "طول" استفاده کردم به خاطره همین موجب اشتباه دوستان شده !

سوال اصلاح شده :

چه طور میتونیم کاری کنیم که وقتی‌ ارتفاع ماژول افزایش پیدا می‌کنه ،کادره moduletable هم افزایش پیدا کنه ؟

اینم یه عکس از مشکلم :

مشکل رو با کادره قرمز مشخص کردم .

که همون طور که معلومه نمیدونم باید چه کدی در css برای moduletable‌ها بنویسم که وقتی‌ ارتفاع ماژول زیاد می‌شه ،کادره moduletable ها هم ارتفشون افزایش پیدا کنه ؟

البته خودم فکر می‌کنم که باید یه عکسی مثل عکس زیر رو به عنوانه بکگراند انتخاب کنیم !(فکر می‌کنم همه از راهی‌ که گفتم استفاده می‌کنن)

عکس :

اما مشکل اینه که نمیدونم برای بکگراند کجا استفاده کنم !

[Saeed_Shamsi 758]

با سلام

دوست عزیز هم میتونید از pic و هم border استفاده کنید !

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

به نظر بنده بهترین راه همونی هست که در پست 2وم خدمتتون عرض کردم . باز هم براون تاکید میکنم !

یاحق

[Hesam 0]

بله شما در پست ۲ به من گفتید که :

از افزونه یه web developer استفاده کنم .

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

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

حالا اگه برای شما مقدوره یه توضیح بدین که :

۱.اگه خواستیم با عکس این کار رو بکنیم باید عکس رو background کجا قرار بدیم ؟

در واقع کد css برای moduletable‌ها چی‌ می‌شه ؟

[Saeed_Shamsi 758]

با سلام

آخر سر یه کاری کردید خودم برم به این ساتی که گفتید یه نگاهی بندازم

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

اینم متن دقیق دستوراتی هست که این سایت برای به کار برده :

td.bac_mod{
   background-image: url(../images/bac_mod.png);
   background-repeat: repeat-y;
   background-position: left top;
}

موفق باشید

یا حق

[Hesam 0]

سلام Mr Shamsi عزیز ...

خیلی‌ ممنون که وقتتون رو برای جواب دادن به سوال من گذاشتین ...

این کلاس که شما گذاشتین ،معلومه که برای دستور td (دستور ایجاد خونه در table ها) است.

td که اسم کلاس اون bac_mod است .

من این کلاس رو خودم به دست آورده بودم !

اما نتونسته بودم که بدونم برای کدوم td هست ؟

این td رو خود طراح تعریف کرده ؟

[Saeed_Shamsi 758]

با سلام

بله خود طراح تعریفش کرده / اگه دقت کنید تو پست قبلیم هم عرض کردم :

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

یا حق