تمپلت (http://www.freecsstemplates.org/download/zip/disambiguation/)
تمپلت از سایت فری سی اس اس تمپلت گرفته شده!
می خوایم تمپلت بالا رو به یه تمپلت قابل نصب واسه جوملا تبدیل کنیم.
اول از هم یه سری کد لازم هست که به ترتیب واستون میزارم و بعد کار هر کدوم رو میگم
کد هد:
<?php
defined('_JEXEC') or die;
$app = JFactory::getApplication();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/default.css" type="text/css" />
</head>
این کد رو باید در بالای صفحه و به جای کد هد خودتون قرار بدید.
تنها چیزی که از این کد نیاز هست بدونیم این قسمت هست:
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/default.css" type="text/css" />
این کد محل فایل سی اس اس صفحه رو مشخص میکنه (بقیه کدها مربوط به استایل خود جوملا هستن) اگر اسم فایل سی اس اس شما چیزی غیر از دیفالت هست و یا اینکه فایل در پوشه سی اس اس قرار نداره این دو متغیر رو بر اساس پوشه و اسم فایل تغییر بدید.
خب حال بریم سراغ ماژول ها :
جوملا توسط ماژول قدرت پیدا کرده و هر منو یا افزونه ای از اون توسط ماژول ها نمایش داده میشن ما برای نشان دادن این ماژول ها نیاز به این داریم که در تمپلت خودمون محلی رو واسه نشون دادن این ماژول ها مشخص کنیم.نحوه مشخص کردن محل به این صورت هست:
فرض کنید میخوایم در قسمت راست سایت یه منو بزاریم و از اونجایی که میدونیم این منو توسط ماژول نمایش داده میشه نیاز به این داریم که در حین طراحی این محل رو مشخص کنیم خوب بنابراین این تکه کد رو در قسمتی که قرار منو نمایش داده بشه میزاریم:
<jdoc:include type="modules" name="position1" style="xhtml" />
همونطور که مشاهده میکنید اسم این ماژول پوزیشن1 هست (معمولا قالبهای تجاری این نوع ماژول ها رو اسم گذاری میکنند) ولی شما میتونید بسته به استفاده ماژول واسش هر اسمی که خواستید بزارید خاصیت استایل ماژول ها به ما تا حدودی در نحوه نمایش ماژول ها کمک میکنه :
در صورتی که style="rounded" نوار دور ماژول به صورت انحنا دار نشون داده میشه
در صورتی که none باشه هیچ چیزی دور ماژول قرار نمیگیره
در صورتی که xhtml باشه یه دیو دور ماژول قرار میگیره
در صورتی که table باشه یه جدول دور ماژول قرار میگره
بعد از این مرحله نوبت به مشخص کردن محل پست ها میرسه که در این محل کافی هست این کد رو قرار بدیم:
<jdoc:include type="message" />
<jdoc:include type="component" />
خوب تا اینجای کار صفحه به این شکل در اومد:
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Name : Disambiguation
Description: A two-column, fixed-width design with dark color scheme.
Version : 1.0
Released : 20110717
-->
<?php
defined('_JEXEC') or die;
$app = JFactory::getApplication();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/default.css" type="text/css" />
</head>
<body>
<div id="header">
<div id="logo">
<jdoc:include type="modules" name="header" style="xhtml" />
</div>
</div>
<!-- end #header -->
<div id="menu">
<jdoc:include type="modules" name="topmenue" style="xhtml" /></div>
<!-- end #menu -->
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="content">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<!-- end #content -->
<div id="sidebar">
<div id="search">
<jdoc:include type="modules" name="search" style="xhtml" />
</div>
<ul>
<li>
<h2>Aliquam tempus</h2>
<p>Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper consectetuer hendrerit.</p>
</li>
<li>
<jdoc:include type="modules" name="catagoriz" style="xhtml" />
</li>
<li>
<jdoc:include type="modules" name="blogrole" style="xhtml" /> </li>
<li>
<jdoc:include type="modules" name="Archive" style="xhtml" /> </li>
</ul>
</div>
<!-- end #sidebar -->
<div style="clear: both;"> </div>
</div>
</div>
</div>
<!-- end #page -->
<div id="footer">
<p>Copyright (c) 2011 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/"> CSS Templates</a>.</p>
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>
<!-- end #footer -->
</body>
</html>