a9876543210ag

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

33 پست در این موضوع

سلام

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

سلام.ممنون از کمکتون. این کدو قرار دادم کار داد. البته فقط یک بوردر فعال کردم باهاش. اما میخوام کادر بندی که انجام دادم با عکس را تنظیم کنم براش چه صورت میشه؟ کد 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;
}

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

http://border-image.com

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

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

http://css3generator.com/

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

border.png

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

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

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

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

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

همین

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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;
}

Share this post


Link to post
Share on other sites

سلام،

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

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

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

Share this post


Link to post
Share on other sites

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

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

http://css3pie.com/

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

http://cssround.com

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

با کلاس item نشد

Share this post


Link to post
Share on other sites

با سلام

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

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

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

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

با کمال تشکر

Share this post


Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری