تنظیم قالب جهت ایجاد کادر برای هر مطلب جدید

[a9876543210ag 10]

سلام

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

یکی از دوستان جوملایی در انجمن دیگری فرمودن که با تغییرات در html/com_content میشه درستش کرد.

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

[a9876543210ag 10]

لطفا جواب بدین

[Mohsen Shahbazi 15]

میتونی از پلاگین plg_admirorframes1.5.0-199rev برای جوملا 1.5 استفاده کنی.بعد از نصب میتونی به دلخواه برای هر مطلبی که دوست داری یک فریم بندازی با حالتهای مختلف:a2d3:

فارسی شده اش رو چند روز قبل تو انجمن دیدم دانلود کردم یک سرچ کنی پیداش میکنی :128fs318181:

اینم واسه پاچه خواری :دی :1:

[a9876543210ag 10]

بدون پلاگین به چه نحوی میشه؟ نمیخوام از افزونه های کمکی استفاده کنم

[Mohsen Shahbazi 15]

والا ما خودمونو تو زحمت نمی ندازیم با همین افزونه ها کارمون راه می افته وقت رو صرف چیزایی که نیست میزاریم

[a9876543210ag 10]

حرفتون منظقیه، اما من میخوام الان اون روش طولانیو انجام بدم. لطفا مراحل انجامشو بهم بگین.

پیوست: من کادر بندیو انجام دادم با عکس های مورد نظرم. اما میخوام هر مطلب که ارسال میکنم یک کادر دورش کشیده بشه. آیا این پلاگین با همون کادر ساخته شده خودم اینکارو میکنه؟

[amin.poorsaeed 26]

دوست عزیز پیامتونو خودنم کار سختی نیست کلاس مطالب با تگ .item هست که می تونید با تعریف این تگ به فایل style.css قالبتون این کارو بکنید .

.item{
padding:15px;
border:1px solid #000;
}

[a9876543210ag 10]

سلام.ممنون از کمکتون. این کدو قرار دادم کار داد. البته فقط یک بوردر فعال کردم باهاش. اما میخوام کادر بندی که انجام دادم با عکس را تنظیم کنم براش چه صورت میشه؟ کد css مربوط به مطالبم اینه:

.content{
width:734px;
height:auto;
font-size:12px;
text-align:right;
margin: 0px 0px 0px 20px;
float:left;
direction:rtl;
}

.content #post, .contentpaneopen{
width:726px;
height:auto;
font-size:12px;
text-align:right;
color:#333;
margin-left:4px;
margin-top:7px;
margin-bottom:-20px;
line-height:19px;
direction:rtl;
}

.content #tr{
background:url(../images/con_tr.png) right no-repeat;
width:12px;
height:17px;
float:right;
margin:0px 0px 0px 0px;
}

.content #tl{
background:url(../images/con_tl.png) left no-repeat;
width:12px;
height:17px;
float:left;
margin:0px 0px 0px -2px;
}

.content #trep{
border-top: 1px solid #909090;
width:712px;
height:17px;
float:left;
margin:0px 0px 0px 0px;
}

.content #kr{
border-left: 1px solid black;
border-right: 1px solid black;
margin:-1px 0px 0px -2px;
}

.content #bl{
background:url(../images/con_bl.png) left no-repeat;
width:12px;
height:14px;
float:left;
margin:0px 0px 0px -2px;
}

.content #br{
background:url(../images/con_br.png) right no-repeat;
width:12px;
height:14px;
float:right;
margin: 0px 0px 0px 0px;	
}

.content #breap{
   border-bottom: 1px solid #909090;
width:712px;
height:14px;
float:left;
margin:-1px 0px 0px 0px;
}

.content #krepl{
background:url(../images/con_krepl.png) repeat-y left;
width:2px;
float:left;
margin:0;
}

.content #krepr{
background:url(../images/con_krepr.png) repeat-y right;
height:2px;
float:right;
margin:0;
}

.content #title , .contentheading{
width:726px;
font-size:14px;
font-weight:bold;
color:#000;
float:left;
margin-left:4px;
margin-top:-20px;
}

[a9876543210ag 10]

اینم تصویری از اون قسمت.

[a9876543210ag 10]

چرا دیگه جواب نمیده کسی

[amin.poorsaeed 26]

من که متوجه نشدم یکم واضح تر بگین ؟ خودتونو بزارین جای ببینین متوجه میشید خودتون ؟

[a9876543210ag 10]

شما گفتین این مشکلو با کلاس .item میشه حل کرد. من این کلاسو ایجاد کردم و دستور border هم قرار دادم. طبق اون عکسی که گذاشتم دور هر مطلبی یک border ساخت. یعنی این کلاس item همونیه که میخوام.

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

کد css که گذاشتم برای یک کادر کلی دور مطالبم ایجاد میکنه. که من میخوام با .item برای هر مطلب یک کادر جدا با همون عکسام ایجاد بشه

امیدوارم منظورمو متوجه شده باشین

[amin.poorsaeed 26]

ببین خودت نمی تونی دستی اینکارو بکنی ولی یه ابزار هست که می تونی برودر عکس دار بسازی خیل یبه درد بخوره

کافیه که مثل الگو براش عکس بسازید

سپس کد استایلی که بهتون می ده رو تو تگ item کپی کنید

http://border-image.com

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

به غیر از این اگه بخواین با سی اس اس ایجاد کنید می تونید از border-radius استفاده کنید . بهتره با سی اس اس بنویسید یعنی از تصویر استفاده نکنید یه ابزار هم برای سی اس اس براتون میدم تا راحت باشین

http://css3generator.com/

ویرایش شده در اردیبهشت 91 توسط amin.poorsaeed

[a9876543210ag 10]

css3 چون هنوز مردم خیلیاشون با ie6-7 هستن میترسم استفاده کردم برای بوردر، نظر خودتون چیه؟

و اون سایت که با عکس کار میکنه را توضیح بیشتر میدین؟ نتونستم باهاش کار کنم.

[amin.poorsaeed 26]

خود سایت تصویر بالا رو گذاشته

شما باید کادر سایتتو متناسب با این تصویر تو فوتوشاپ طراحی کنی

بعد بیای به این سایت browse رو بزنی و عکس رو بدی به این سایت

سپس با نوار های لغزنده که تو اون سایت هست یا در است scroll ها تنظیم کنی

پایین هم پیشنمایش کادرت نمایش داده میشه

همین

[a9876543210ag 10]

کار با سایته رو دار یاد میگرم، خب فقط دوتا سوال باقی میمونه

اولی: میتونم برای موقعیت های سایت هم از .item ستفاده کنم؟ یا فقط مخصوص مطالب هست؟

دومی: میخوام داخل اون سایت width تعریف کنم برای کادری که میسازه چیکار کنم؟ یا اتوماتیک تو css تنظیم میشه ؟

[a9876543210ag 10]

راستی قسمت مطالب را درست کردم با کمک شما فقط یک تغییری میخوام بدم ولی بلد نیستم

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

[a9876543210ag 10]

html مربوط به قسمت مطالبم :

  <div class="content">
 <div class="content" id="title"></div>
   <div class="content" id="post">  <jdoc:include type="component" /> </div>
</div>

و کد CSS مطالب:

.content {
width:734px;
height:auto;
font-size:12px;
text-align:right;
margin: 0px 0px 0px 20px;
float:left;
direction:rtl;
overflow:hidden;
}

.content #post .item, .contentpaneopen{
border-width: 27px 26px 46px 27px;
-moz-border-image: url(../images/border.png) 27 26 46 27;
-webkit-border-image: url(../images/border.png) 27 26 46 27;
-o-border-image: url(../images/border.png) 27 26 46 27;
border-image: url(../images/border.png) 27 26 46 27;
width:734px;
color:#333;
font-size:12px;
margin-left:4px;
margin-top:7px;
margin-bottom:-20px;
padding-bottom:-20px;
line-height:19px;
direction:rtl;
}

.content  #title ,.contentheading{
width: 665px;
font-size:14px;
font-weight:bold;
color:#F1B24E;
float:right;
direction:rtl;
}

[a9876543210ag 10]

سلام،

چندتا سوال دارم:

- با استفاده از css3 اینکارو انجام دادم. اما چطوری برای مرورگر اینترنت اکسپلورر 8 و 7 این کارو بکنم؟ با border-image اینکار نمیشه چون خود ie9 هم ساپورتش نمیکنه.

- اگر بخوام منوی سمت راست قالبم که ماژول هارو داخلش فعال میکنم هم مثل مطالب سایت بکنم چطوریه؟ یعنی هر ماژولی که فعال میکنم یک کادر جدا گونه داشته باشه.

[amin.poorsaeed 26]

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

اگر بخواین وب سایتتون زیبا باشه باید قید ie رو بزنین فعلا یه هک برا ie اومده که میشه بعضی از زیبایی های css3 رو برای ie6 تا ie8 فعال کرد ولی بازم به درد نمی خوره شما باید از کد های خاصی استافده کنید و برای ie 6 ، 7 ، 8 ، هر کدمشون یه فایل css تعریف کنید تا بتونه قالب تو هر مرورگر کد های مختص مرورگر رو بخونه که براتون سخته بهتره از این استفاده کنید آموزش استفاده هم توش هست خیلی راحته

http://css3pie.com/

[a9876543210ag 10]

آقا امین درست میگین ولی قبل اینکه css3 استفاده بشه خیلی از قالبا را دیدم که در جوملا به این سبک بود که هر مطلب داخل یک کادر. اینا چیکار میکنند که داخل ie هم گوشه هاش گرد نمایش داده میشه ؟

اگر میشه سوال دوم را هم جواب بدین

[ابوالفضل طالبی 280]

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

http://cssround.com

البته دو صورت به شما خروجی میده .. خروجی css3 و خروجی image

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

[a9876543210ag 10]

اینکارو کردم برای border-image ولی تو ie9 نمایش نمیداد ( 8 هم نمایش نداد ). بعد داخل سایت w3schools زده بود پشتیبنای نداره توسط ie9

http://www.w3schools.com/css3/css3_borders.asp

فایل سایت ccspie هم گذاشتم تو روت جوملام و کد مربوطه را داخل آیدی مربوطه نوشتم. ولی برای ie8 تنظیم نکردش!! توضیحات بیشتر میدین ؟

[a9876543210ag 10]

این قسمت مشکلم حل شد.

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

با کلاس item نشد

[farzadroozdar 10]

با سلام

من جومولای 2.5.3 را نصب کردم.

حالا عنوان سایت را مینویسه (جومولای 2.5.3 مزین به امیر کبیر.)در صورتی که من عنوان را تغییر دادم.

برای حل این مشکل باید چه کار کنم

لطفا راهنمایی کنید

با کمال تشکر