نمایش نسخه قابل چاپ
سلام
آشنایی چندانی با css ندارم
آیا ممکن چنین جدولی رو روی ادیتور پیاده کنم؟
[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]
در واقع این جدول یه index داره که کد head و body توشه و یه فایل css جدا داره
میتونی از کد های ایندکس و استایل اینها در سورس قالب سایت خودت یا نوشته ی مطلب خودت تو جوملا استفاده کنینقل قول:
نوشته اصلی توسط ndr053 [مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]
مرسی از شمانقل قول:
نوشته اصلی توسط sepastian [مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]
در واقع این نوع جدولو تو بعضی از مطالب میخوام بکار ببرم نه در جایی مشخص
این امکان (ایجاد Table) در ادیتور پیش فرض جوملا (Tiny MCE)گنجانده شده استنقل قول:
نوشته اصلی توسط ndr053 [مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]
برای استفاده از این امکان شما باید ادیتور جوملا تون رو در حالت پیشرفته ست کنید.برای قرار دادن ادیتور در حالت پیشرفته باید :
به مدیریت پلاگین ها بروید و پلاگین Editor - TinyMCE 2.0 بعد از قسمت پارامترها درفیلد تابعی برروی توسعه یافته ست کنید .
بعد از آن به مدیریت مطالب بروید و دکمه Insert a new table یکی از امکانات این ادیتور است که فعال میشود
خیلی ممنون از پاسخ شمانقل قول:
نوشته اصلی توسط shmata [مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]
بله من این ادیتور فعال کردم و مشکلی بابت اینسرت کرد table معمولی ندارم
ولی من میخوام دقیقا table که در پست اول لینک دادم درست بشه
همانطوری که گفتم این فایل یه فایل html داره که اینطوری نوشته شده:
و دو فایل css به اسم style و mainکد:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Pricing Tables</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<!-- pricing table style (style_1.css - style_12.css) -->
<link rel="stylesheet" type="text/css" href="styles/style_1.css"/>
</head>
<body>
<!-- pricing table -->
<div class="p_table">
<!-- caption column -->
<div class="caption_column">
<ul>
<!-- column header -->
<li class="header_row_1 align_center radius5_topleft"></li>
<li class="header_row_2"><h2 class="caption">choose <span>your</span> plan</h2></li>
<!-- data rows -->
<li class="row_style_4"><span>Amount of space</span></li>
<li class="row_style_2"><span>Bandwidth per month</span></li>
<li class="row_style_4"><span>No. of e-mail accounts</span></li>
<li class="row_style_2"><span>No. of MySql databases</span></li>
<li class="row_style_4"><span>24h support</span></li>
<li class="row_style_2"><span>Support tickets per mo.</span></li>
<!-- column footer -->
<li class="footer_row"></li>
</ul>
</div>
<!-- column style 1 -->
<div class="column_1">
<!-- ribbon (optional) -->
<!--<div class="column_ribbon ribbon_style1_new"></div>-->
<!-- /ribbon -->
<ul>
<!-- column header -->
<li class="header_row_1 align_center"><h2 class="col1">starter</h2></li>
<li class="header_row_2 align_center"><h1 class="col1">$<span>10</span></h1><h3 class="col1">per month</h3></li>
<!-- data rows -->
<li class="row_style_3 align_center"><span>10GB</span></li>
<li class="row_style_1 align_center"><span>100GB</span></li>
<li class="row_style_3 align_center"><span>1</span></li>
<li class="row_style_1 align_center"><span>1</span></li>
<li class="row_style_3 align_center"><span>Yes</span></li>
<li class="row_style_1 align_center"><span>1</span></li>
<!-- column footer -->
<li class="footer_row"><a href="" class="sign_up radius3">sign up!</a></li>
</ul>
</div>
<!-- column style 2 -->
<div class="column_2">
<!-- ribbon (optional) -->
<!--<div class="column_ribbon ribbon_style1_new"></div>-->
<!-- /ribbon -->
<ul>
<!-- column header -->
<li class="header_row_1 align_center"><h2 class="col2">econo</h2></li>
<li class="header_row_2 align_center"><h1 class="col2">$<span>30</span></h1><h3 class="col2">per month</h3></li>
<!-- data rows -->
<li class="row_style_4 align_center"><span>30GB</span></li>
<li class="row_style_2 align_center"><span>200GB</span></li>
<li class="row_style_4 align_center"><span>10</span></li>
<li class="row_style_2 align_center"><span>10</span></li>
<li class="row_style_4 align_center"><span>Yes</span></li>
<li class="row_style_2 align_center"><span>3</span></li>
<!-- column footer -->
<li class="footer_row"><a href="" class="sign_up radius3">sign up!</a></li>
</ul>
</div>
<!-- column style 3 -->
<div class="column_3">
<!-- ribbon (optional) -->
<!--<div class="column_ribbon ribbon_style1_new"></div>-->
<!-- /ribbon -->
<ul>
<!-- column header -->
<li class="header_row_1 align_center"><h2 class="col3">standard</h2></li>
<li class="header_row_2 align_center"><h1 class="col3">$<span>59</span></h1><h3 class="col3">per month</h3></li>
<!-- data rows -->
<li class="row_style_3 align_center"><span>100GB</span></li>
<li class="row_style_1 align_center"><span>500GB</span></li>
<li class="row_style_3 align_center"><span>50</span></li>
<li class="row_style_1 align_center"><span>50</span></li>
<li class="row_style_3 align_center"><span>Yes</span></li>
<li class="row_style_1 align_center"><span>5</span></li>
<!-- column footer -->
<li class="footer_row"><a href="" class="sign_up radius3">sign up!</a></li>
</ul>
</div>
<!-- column style 4 -->
<div class="column_4">
<!-- ribbon (optional) -->
<!--<div class="column_ribbon ribbon_style1_new"></div>-->
<!-- /ribbon -->
<ul>
<!-- column header -->
<li class="header_row_1 align_center radius5_topright"><h2 class="col4">professional</h2></li>
<li class="header_row_2 align_center"><h1 class="col4">$<span>99</span></h1><h3 class="col4">per month</h3></li>
<!-- data rows -->
<li class="row_style_4 align_center"><span>Unlimited</span></li>
<li class="row_style_2 align_center"><span>1000GB</span></li>
<li class="row_style_4 align_center"><span>Unlimited</span></li>
<li class="row_style_2 align_center"><span>Unlimited</span></li>
<li class="row_style_4 align_center"><span>Yes</span></li>
<li class="row_style_2 align_center"><span>10</span></li>
<!-- column footer -->
<li class="footer_row"><a href="" class="sign_up radius3">sign up!</a></li>
</ul>
</div>
</div>
</body>
</html>
خوب این cssها را میخواهید به page تون لینک کنید ؟
لینک نه دقیقا مثل همین توی خبر بزارمنقل قول:
نوشته اصلی توسط shmata [مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]
خوب اگر بخواهید در مطلب تون table بزنید که از مدیریت مطالب باید این اتفاق بیوفته
اگر برای تمام مطالب میخواهید یک چهار چوبی رو مشخص کنید.
این دقیقا کاریست که در اون لینکی که در پست اولتون گذاشتید انجام شدهکد:<table cellspacing="0" cellpadding="0" width="100%" border="1">
<tr>
<td><jdoc:include type="modules" name="right" style="xhtml"/></td>
<td><jdoc:include type="component" /></td>
<td><jdoc:include type="modules" name="left" style="xhtml"/></td>
</tr>
</table>
دقیقا منظورم همین بوده و منظور شمارو کامل متوجه شدمنقل قول:
نوشته اصلی توسط shmata [مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]
ولی این یه table معمولی که نیست مثلا من با کدهای css که در فایل style.css قرار داره چکار کنم؟
اون کدها به صفحه لینک کنیدنقل قول:
نوشته اصلی توسط ndr053 [مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]
و در table از کلاسها و id های اون فایل css استفاده کنید .
کلی سر و کله زدم نتونستم
مثلا نمونه کدهای html و css زیرو دارم
دقیقاً کجا بزارم؟
و چطوری لینک کنم به هم؟
کد html:
کد css:کد:
<table class="pretty-table" summary="This table shows the sales figures for the four products in the Widget product line in 2007. The figures are broken down by quarter."> <caption>Widget sales figures, 2007</caption> <tr> <th scope="col">Product</th> <th scope="col">1st quarter</th> <th scope="col">2nd quarter</th> <th scope="col">3rd quarter</th> <th scope="col">4th quarter</th> </tr> <tr> <th scope="row">SupaWidget</th> <td>$9,940</td> <td>$10,100</td> <td>$9,490</td> <td>$11,730</td> </tr> <tr class="alt"> <th scope="row">WonderWidget</th> <td>$19,310</td> <td>$21,140</td> <td>$20,560</td> <td>$22,590</td> </tr> <tr> <th scope="row">MegaWidget</th> <td>$25,110</td> <td>$26,260</td> <td>$25,210</td> <td>$28,370</td> </tr> <tr class="alt"> <th scope="row">HyperWidget</th> <td>$27,650</td> <td>$24,550</td> <td>$30,040</td> <td>$31,980</td> </tr> </table>
کد:
.pretty-table { padding: 0; margin: 0; border-collapse: collapse; border: 1px solid #333; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 0.9em; color: #000; background: #bcd0e4 url("widget-table-bg.jpg") top left repeat-x; } .pretty-table caption { caption-side: bottom; font-size: 0.9em; font-style: italic; text-align: right; padding: 0.5em 0; } .pretty-table th, .pretty-table td { border: 1px dotted #666; padding: 0.5em; text-align: left; color: #632a39; } .pretty-table th[scope=col] { color: #000; background-color: #8fadcc; text-transform: uppercase; font-size: 0.9em; border-bottom: 2px solid #333; border-right: 2px solid #333; } .pretty-table th+th[scope=col] { color: #fff; background-color: #7d98b3; border-right: 1px dotted #666; } .pretty-table th[scope=row] { background-color: #b8cfe5; border-right: 2px solid #333; } .pretty-table tr.alt th, .pretty-table tr.alt td { color: #2a4763; } .pretty-table tr:hover th[scope=row], .pretty-table tr:hover td { background-color: #632a2a; color: #fff; }
کدهای css را در فایل template.css یا template_rtl.css قالبتون
و کدهای html در هر جایی که تمایل دارید این جدول را ایجاد کنید (میتونه داخل index.php قالبتون باشه یا در یک ماژول html سفارشی)
دقیقاً همین کارو کردم
یعنی کد css به آخر template.css اضافه کردم
ولی متاسفانه یه table معمولی نشون میده