joomla 1.5 template design

จัดทําโดย joomlathaiclub.com

Joomla! 1.5 Template Design By joomla thai club

Joomla! 1.5 Template Design By joomla thai club

ส่ังสมประสบการณมาพอสมควร joomla แบบเบสิกคงจะไดกันหมดแลว คราวนี้มาพูดถึงเรื่องการออกแบบ joomla 1.5 template กันดกีวา ความจริงผมก็ไมไดเกงกาจอะไรนกัหนานะครับเพยีงแตไดใชงาน joomla บอย มาก ๆ ตั้งแตกอนเร่ิมที่จะมาเปน joomla ดวยซํ้า เลยมีความชํานาญสักหนอย แตเร่ืองเขียนโคดโปรแกรม ของผมนี่คงจะไมคอยไดเร่ืองเทาไหร อาศัยแบบงู ๆ ปลา ๆ ไปเรื่อย ๆ จะใหเขยีนโคดแบบผูที่เขาเรียนมาโดยตรงคงไมไดครับ ผมเองก็ไมไดเรียนมาโดยตรงทางนี้ซะดวย อาศัยศึกษาดวยตนเอง มีเวลาวางเมื่อไหรก็จะมานั่งศึกษากัน สวนใหญก็จะไมคอยวางมานั่งศึกษาการเขยีนโปรแกรมอยางจริงจัง เพราะตองทํางานหาเงินดวยอะ พอดีไดหนังสอืมาเลมหนึ่ง เปนของตางประเทศฝร่ังเขียนเรื่องการออกแบบ joomla 1.5 template design กเ็ลยนั่งอาน ๆ ก็ ออ ๆ เออ มันเปนอยางนี้ ตองเอาตรงนี้มาใสตรงนั้น เอาตรงนั้นไปใสจะเปนอยางนี้ อืม ๆ พอได ๆ ก็เลยเอามาเลาสูกันฟง เอาละโมมาก็มาก มาดูกอนควรจะมีพื้นฐานอะไรบางสําหรับการที่จะออกแบบ joomla 1.5 template ไดนี่ ไมตองเอาเกงนะครับ (หรือจะเกงก็ไดไมวากัน) อันที่จริงจะไดคยุกนัรูเร่ืองไงครับวาที่ผมสื่อไปนี้มันคืออะไร

พื้นฐานที่ควรมี

1.ความรูพื้นฐานดาน HTML, XHTML

2.ความรูพื้นฐานดาน php

3.ความรูพื้นฐานดาน CSS

แนะนําเว็บศึกษาเรื่อง css ครับ http://www.divland.com/blog/ หวังเปนอยางยิ่งวา เอกสารฉบับนี้จะเปนประโยชนแกผูที่สนใจศึกษาการสราง joomla template ผูจัดทํามิไดหวัง

ผลทางการคา แตอยางใด และไมสงวนลิขสิทธิ์ สําหรับขอความ รูปประกอบ ในทุกสวนของเอกสารฉบับนี้ หากผูใดตองการนําไปเผยแพรตอ กส็ามารถทําได แตขอใหระบแุหลงที่มาของเอกสารนี้

เริ่มตน พื้นฐานที่ควรมี 1.ความรูพื้นฐานดาน HTML, XHTML

2.ความรูพื้นฐานดาน php

3.ความรูพื้นฐานดาน CSS

แนะนําเว็บศึกษาเรื่อง css ครับ http://www.divland.com/blog/

4.การใชงานโปรแกรม Dreamweaver หรือโปรแกรมอื่น ๆ สําหรับออกแบบเว็บเพจ

5.การใชงานโปรแกรม editor สําหรับแกไขโคด เชน edit plus, rapid CSS

6.การใชงานโปรแกรม photo shop ใชในการตกแตงรูปภาพ

โปรแกรมที่จาํเปนตองใช

1.edit plus, rapid CSS

2.photoshop

3.Macromedia Dreamweaver (เดี๋ยวนี้เขาเปลี่ยนเปน adobe แลวมั้ง)

4.โปรแกรมเบราเซอร Mozilla Firefox, Internet Explorer 6, 7, 8 เอาไวทดสอบ หนาเว็บเพจ

กอนอื่นก็ตองมีไฟลพื้นฐานที่ตองมีกอนกค็ือ

สามารถดาวนโหลด template ตัวอยางในเอกสารนี้ไดท่ี http://cid-2e42788f51f66ec7.skydrive.live.com/self.aspx/.Public/Templates/ex/Template-ex.zip

Joomla 1.5 Core Template Files - templateName/index.php - templateName/templateDetails.xml - templateName/template_thumbnail.png - templateName/images/… /* สําหรับเกบ็ไฟลรูปที่ใชกับ template - templateName/css/… /* สําหรับเก็บไฟล css

ไฟล template_thumbnail.png สําหรับแสดงรูปยอแบบนีค้รับ

โคดพื้นฐานทีต่องมีในไฟล index.php

123456789

10111213141516

<?php defined('_JEXEC') or die('Restricted access'); ?> <!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="/joomla/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?> /css/template.css" type="text/css" />

</head> <body> </body> </html>

Template Modules (& code to call modules) สําหรับเรียกวางตําแหนงโมดูล 123456789

101112

<jdoc:include type="modules" name="user1" style="xhtml" /> <jdoc:include type="modules" name="user2" style="xhtml" /> <jdoc:include type="modules" name="user3" style="xhtml" /> <jdoc:include type="modules" name="user4" style="xthml" /> <jdoc:include type="modules" name="user5" style="xthml" /> <jdoc:include type="modules" name="user6" style="xthml" /> <jdoc:include type="modules" name="user7" style="xthml" /> <jdoc:include type="modules" name="top" style="xhtml" /> <jdoc:include type="module" name="breadcrumbs" style="none" /> <jdoc:include type="component" />  <jdoc:include type="modules" name="footer" style="none" /> <jdoc:include type="modules" name="debug" style="none" />

การใสคําสั่งโหลดโมดูลก็จะเปนประมาณนี้ 1234

<?php if ($this->countModules('user1')) : ?> <jdoc:include type="modules" name="user1" style="xhtml" /> <?php endif; ?>

templateDetails.xml 123456789

<?xml version="1.0" encoding="utf-8"?> <install version="1.5.1" type="template"> <name>templateName</name> <creationDate>Month Date Year</creationDate> <author>Authors Name</author> <copyright>GPL</copyright> <authorEmail> [email protected] </authorEmail> <authorUrl>www.mySite.ca</authorUrl>

101112131415161718192021222324252627

<version>1.0</version> <description>Brief description of template design here</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_thumbnail.png</filename> <filename>images/logo.gif</filename> <filename>images/header.jpg</filename> <filename>css/template.css</filename> </files> <positions> <position>user1</position> <position>top</position> <position>left</position> <position>banner</position> <position>right</position> <position>footer</position> </positions> </install>

สําหรับตรวจสอบไฟลและบอกพาธสําหรับติดตั้ง

12345678

<files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_thumbnail.png</filename> <filename>images/logo.gif</filename> <filename>images/header.jpg</filename> <filename>css/template.css</filename> </files>

สวนกําหนดตาํแหนงโมดูลตาง ๆ

123456789

<positions> <position>user1</position> <position>top</position> <position>left</position> <position>banner</position> <position>right</position> <position>footer</position> </positions> </install>

เร่ิมแรกก็มารางแบบกันกอนวาตองการโมดูลในตําแหนงไหนบาง ใชรางงาย ๆ ในกระดาษก็ไดครับ

อยางของผมก็ตองการ การวางตําแหนงโมดูลแบบนี้ (อาจจะบดู ๆ เบี้ยว ๆ ไปหนอย)

กอนอื่นกว็างแบบโครงสรางกอนโดยใช <div> ยังไมตองใสคําสั่งโหลดโมดูล แลวใช css เปนตัวกาํหนดรูปแบบของ <div>

123456789

10111213141516171819202122232425262728293031

<?php defined('_JEXEC') or die('Restricted access'); ?> <!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="/joomla/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?> /css/template.css" type="text/css" /> </head> <body> <a name="top"></a> <div id="mainbody"> <div id="user1"> <em> พื้นทีสํ่าหรับแสดงuser1</em> </div> <div id="header"> <em> พื้นทีสํ่าหรับแสดง head</em> </div> <div id="user2">

3233343536373839404142434445464748495051525354555657585960616263646566

<em>user2</em> </div> <div id="user3"> <em>user3</em> </div> <div id="content"> <em>main content พื้นที่สําหรับแสดงบทความในหนา front page</em> </div> <div id="breadcrumbs"> <em>breadcrumbs</em> </div> <div id="user4"> <em>user4</em> </div> <div id="user5"> <em>user5</em> </div> <div id="user6"> <em>user6</em> </div> <div id="footer1"> <div id="user7"> <em>user7</em> </div> <div id="footer">

6768697071

<em>footer</em> </div> </div> </div> <div id="debug"> <em>debug</em> </div> </body> </html>

ไฟล template.css แบบวางโครงรางไวกอน 123456789

1011121314151617181920212223

/*////////// GENERAL //////////*/ body { border: 1px solid #008080; อันนี้จะมีในทุกบรรทัดคําสั่งเพื่อใหแสดงแสดงใหเห็นขอบเขตของขอมูล margin: 0 auto; min-width: 750px; max-width: 960px; height: 0 auto; } /*////////// TYPEOGRAPHY //////////*/ h1, h4 { font-family: Georgia, Times, serif; } h2, h3{ font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } h1 { font-size: 32px; }

2425262728293031323334353637383940414243444546474849505152535455565758

h2 { font-size: 22px; } h3 { font-size: 16px; } h4 { font-size: 14px; } p { margin-bottom: 18px; } a { text-decoration: none; font-weight: bold; } a:hover { text-decoration: underline; } a:visited {} /*////////// HEADERS //////////*/ #header { border: 1px solid #000000; padding: 3px; margin: 5px; height: 0 auto;

5960616263646566676869707172737475767778798081828384858687888990919293

} /*////////// CONTENT //////////*/ #content { border: 1px solid #FF00FF; margin-top: auto; margin: 2% } #mainbody { border: 1px solid #ff0000; margin: 5px; /*padding-top: 250px;*/ } #user1 { border: 1px solid #00ffff; margin: 5px; } #user2 { border: 1px solid #ff0000; margin: 5%; min-width: 375px; max-width: 480px; height: 0 auto; float: left; margin-bottom: auto; } #user3 { border: 1px solid #ff0000; margin: 5%;

949596979899

100101102103104105106107108109110111112113114115116117118119120121122123124125126127128

min-width: 375px; max-width: 480px; height: 0 auto; float: left; margin-bottom: auto; } #user4 { border: 1px solid #660000; margin: 5px; height: 0 auto; float: left; } #user5 { border: 1px solid #660000; margin: 5px; height: 0 auto; float: left; } #user6 { border: 1px solid #660000; margin: 5px; height: 0 auto; float: left; } #user7 { border: 1px solid #009900; margin: 10px; height: 10%;

129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163

} #breadcrumbs { border: 1px solid #CC0033; height: 33px; margin: 5px; padding-left: 32px; padding-top: 8px; background: url(../images/homei.gif) 0 0 no-repeat; } /*////////// SIDEBARS //////////*/ /*////////// NAV //////////*/ /*////////// FORMS //////////*/ /*////////// FOOTER //////////*/ #footer { border: 1px solid #009900; margin: 10px; height: 10%; } #footer1 { border: 1px solid #009900; margin: 5px; margin-top: 50px } #footer2 { border: 1px solid #000000;

164165166167168169170171172173

margin: 5px; } #debug { border: 1px solid #cc0033; clear:both; } /*////////// IMAGES //////////*/

ก็จะไดหนาตาแบบนี ้

ในตอนแรกกลาวถึงการรางโครงรางและวางโครงสรางใหเห็นวา template มีหนาตาอยางไร โดยยังไมใสคําสั่งสําหรับโหลดโมดูล และทําการกําหนดคา css ใหไดขนาดโครงสรางตามตองการ

จะเห็นวาการกําหนดหนาตาของ template นั้น ขึ้นอยูกับการออกแบบใน css เปนสวนใหญ คราวนีก้็ทําการใสคําสั่งสําหรับโหลดโมดูล ใหกับ template

คําสั่งที่จะใช jdoc:include

รูปแบบ Component <jdoc:include type="component" /> องคประกอบนี้ควรจะปรากฏในองคประกอบ <body> ของ template เพื่อแสดงเนื้อหา/บทความของ เว็บไซต

รูปแบบ Head

12

<jdoc:include type="head" />

องคประกอบนี้ควรจะปรากฏในองคประกอบ <head> ของ template เพื่อแสดงลักษณะสคริปตและองคประกอบของ meta ที่ใชเชื่อมโยงกับเพจปจจุบัน

รูปแบบ Installation

1 <jdoc:include type="installation" />

องคประกอบนี้จะใชเฉพาะในการติดตั้ง joomla template ใชแสดงเนื้อหาหลักขั้นตอนการติดตั้ง

รูปแบบ Message

12

<jdoc:include type="message" />

องคประกอบนี้ควรจะปรากฏในองคประกอบ <body> ของ template เพื่อใชแสดงขอความผิดพลาดและขอความในคําขออื่น ๆ สไตล CSS สําหรับขอความ ระบบสามารถพบไดใน template\system\css\system.css

รูปแบบ Module

123

<jdoc:include type="module" name="breadcrumbs" /> <jdoc:include type="module" name="menu" /> <jdoc:include type="module" name="submenu" style="rounded" id="submenu-box" />

องคประกอบนี้แสดงผลโมดูลเดียว โดยอางอิงชื่อโมดูล

รูปแบบ Modules

123456789

101112131415

<jdoc:include type="modules" name="debug" /> <jdoc:include type="modules" name="icon" /> <jdoc:include type="modules" name="left" style="rounded" /> <jdoc:include type="modules" name="left" style="xhtml" /> <jdoc:include type="modules" name="right" style="xhtml" /> <jdoc:include type="modules" name="status" /> <jdoc:include type="modules" name="syndicate" /> <jdoc:include type="modules" name="title" /> <jdoc:include type="modules" name="toolbar" /> <jdoc:include type="modules" name="top" /> <jdoc:include type="modules" name="top" style="xhtml" /> <jdoc:include type="modules" name="user1" style="xhtml" /> <jdoc:include type="modules" name="user2" style="xhtml" /> <jdoc:include type="modules" name="user3" /> <jdoc:include type="modules" name="user4" />

คําสั่งแทรกโมดูลมาแสดงยังพื้นที่นั้น ๆ แยกเปนพืน้ที่ ๆ แตกตางกนัไปตาม template และตําแหนงที่กําหนดในไฟล templatedetails.xml การใชงาน jdoc:include's name="[template position name]"

ทําการแทรกตาํแหนงโมดูล (module position) 1 ตําแหนง

12345

<?php if ($this->countModules('user1')) : ?> <div id="user1"> ใช div ครอบไว ปรับแตงคา id ของ div ที่ template.css <jdoc:include type="modules" name="user1" style="xhtml" /> </div> <?php endif; ?>

วางตําแหนงโมดูล (module position) 2 หรือ 3 ตําแหนง

12345678

<?php if ($this->countModules('user2 or user3')) : ?> <?php if ($this->countModules('user2')) : ?> <div id="user2"> <jdoc:include type="modules" name="user2" style="xhtml" /> </div> <?php endif; ?> <?php if ($this->countModules('user3')) : ?>

910111213

<div id="user3"> <jdoc:include type="modules" name="user3" style="xhtml" /> </div> <?php endif; ?> <?php endif; ?>

คราวนี้ผมก็ใส ตําแหนงโมดลู (module position) ตามรูปแบบที่ไดรางไวใน

123456789

10111213141516171819202122232425

<?php defined('_JEXEC') or die('Restricted access'); ?> <!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="/joomla/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/ <?php echo $this->template ?>/css/template.css" type="text/css" /> </head> <body> <a name="top"></a> <div id="mainbody"> <?php if ($this->countModules('user1')) : ?> <div id="user1"> <jdoc:include type="modules" name="user1" style="xhtml" />

2627282930313233343536373839404142434445464748495051525354555657585960

</div> <?php endif; ?> <?php if ($this->countModules('header')) : ?> <div id="header"> <jdoc:include type="modules" name="header" style="xhtml" /> </div> <?php endif; ?> <?php if ($this->countModules('user2 or user3')) : ?> <?php if ($this->countModules('user2')) : ?> <div id="user2"> <jdoc:include type="modules" name="user2" style="xhtml" /> </div> <?php endif; ?> <?php if ($this->countModules('user3')) : ?> <div id="user3"> <jdoc:include type="modules" name="user3" style="xhtml" /> </div> <?php endif; ?> <?php endif; ?> <div id="content"> <jdoc:include type="message" /> <jdoc:include type="component" /> </div> <div id="breadcrumbs"> <jdoc:include type="modules" name="breadcrumb" style="raw" /> </div> <?php if ($this->countModules('user4 or user5 or user6')) : ?>

6162636465666768697071727374757677787980818283848586878889909192

<?php if ($this->countModules('user4')) : ?> <div id="user4"> <jdoc:include type="modules" name="user4" style="xhtml" /> </div> <?php endif; ?> <?php if ($this->countModules('user5')) : ?> <div id="user5"> <jdoc:include type="modules" name="user5" style="xhtml" /> </div> <?php endif; ?> <?php if ($this->countModules('user6')) : ?> <div id="user6"> <jdoc:include type="modules" name="user6" style="xhtml" /> </div> <?php endif; ?> <?php endif; ?> <div id="footer1"> <div id="user7"> <jdoc:include type="modules" name="user7" style="xhtml" /> </div> <div id="footer"> <jdoc:include type="modules" name="footer" style="none" /> </div> </div> </div> <div id="debug"> <jdoc:include type="modules" name="debug" style="none" /> </div>

</body> </html>

template.css

123456789

101112131415161718192021222324252627282930

/*////////// GENERAL //////////*/ body { border: 1px solid #008080; margin: 0 auto; min-width: 750px; max-width: 960px; height: 0 auto; } /*////////// TYPEOGRAPHY //////////*/ h1, h4 { font-family: Georgia, Times, serif; } h2, h3{ font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } h1 { font-size: 32px; } h2 { font-size: 22px; } h3 { font-size: 16px; }

3132333435363738394041424344454647484950515253545556575859606162636465

h4 { font-size: 14px; } p { margin-bottom: 18px; } a { text-decoration: none; font-weight: bold; } a:hover { text-decoration: underline; } a:visited {} /*////////// HEADERS //////////*/ #header { /* border: 1px solid #000000; */ padding: 3px; margin: 5px; height: 0 auto; } /*////////// CONTENT //////////*/ #content { /* border: 1px solid #FF00FF; */ margin-top: auto; margin: 2%

66676869707172737475767778798081828384858687888990919293949596979899

100

} #mainbody { /*border: 1px solid #ff0000; */ margin: 5px; /*padding-top: 250px;*/ } #user1 { /* border: 1px solid #00ffff; */ margin: 5px; } #user2 { /*border: 1px solid #ff0000; */ margin: 5%; min-width: 375px; max-width: 480px; height: 0 auto; float: left; margin-bottom: auto; } #user3 { /*border: 1px solid #ff0000;*/ margin: 5%; min-width: 375px; max-width: 480px; height: 0 auto; float: left; margin-bottom: auto; }

101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135

#user4 { /* border: 1px solid #660000;*/ margin: 5px auto; height: 0 auto; float: left; } #user5 { /* border: 1px solid #660000;*/ margin: 5px auto; height: 0 auto; float: left; } #user6 { /*border: 1px solid #660000;*/ margin: 5px auto; height: 0 auto; float: left; } #user7 { /* border: 1px solid #009900; */ margin: 10px; height: 10%; } #breadcrumbs { /* border: 1px solid #CC0033;*/ height: 33px; margin: 5px; padding-left: 32px; padding-top: 8px;

136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170

background: url(../images/homei.gif) 0 0 no-repeat; } /*////////// SIDEBARS //////////*/ /*////////// NAV //////////*/ /*////////// FORMS //////////*/ /*////////// FOOTER //////////*/ #footer { /* border: 1px solid #009900; */ margin: 10px; height: 10%; } #footer1 { /*border: 1px solid #009900; */ margin: 5px; margin-top: 50px } #footer2 { /*border: 1px solid #000000;*/ margin: 5px; } #debug { /* border: 1px solid #cc0033; */ clear:both; }

171172173

/*////////// IMAGES //////////*/

สวนคา css กป็รับแตงเรียบรอยแลวในตอนที่ 1 ก็ไมตองปรับอะไรมากมายเพยีงแคเอาเสนออกแคนั้นเอง /*border: 1px solid #cc0033; */ โดยใชแทก็คอมเมนตปดไว คราวนี้กล็อง preview ดู เขาทาแคไหน

จากที่ไดออกแบบโครงสรางเรียบรอยแลวคราวนี้ก็มาใสลวดลาย ให template กันเพือ่ใหเกดิความสวยงาม

จาก template เปลา ๆ หนาขาว ๆ ก็จะเติมพื้นหลังใหกับ template โดยใชรูป

โดยการกําหนดที่ <body> โดยใส id ของ css ลงไป <body id="page_bg"> ตั้งชื่อเปน page_bg

css กําหนดเปน ออ เกือบลืม เอารูป ใสไวในโฟลเดอร images ดวยนะครับ ช่ือของไฟลรูปคือ page_bg.png

123

#page_bg { background: #fff url(../images/page_bg.png) repeat-x top left; }

สวยขึ้นมาหนอย พื้นหลังเปนสีเทา ๆ

กําหนดพื้นหลังเปนอยางอื่นก็ไดนะครับ เชนกําหนดพืน้หลังเปนสี

123

#page_bg { background: #000000; <---เปลี่ยนเปนโคดสี }

จากนั้นก็จะใสรูปสักหนอย โดยเอารูปดานลางนี้ใสที่บริเวณ header คลุมไปถึง user1

ช่ือรูป headerimg.jpg ขนาด 960*340 px เชนเดิมก็เอารปูนี้ใสไวในโฟลเดอร images

โดยจะเอา <div id="header1"> </div> ครอบสวน header, user1 ไว

123456789

1011121314

<div id="header1"> <?php if ($this->countModules('user1')) : ?> <div id="user1"> <jdoc:include type="modules" name="user1" style="xhtml" /> </div> <?php endif; ?> <?php if ($this->countModules('header')) : ?> <div id="header"> <jdoc:include type="modules" name="header" style="xhtml" /> </div> <?php endif; ?> </div>

เขียน css "header1" เพิ่ม ดังนี้

12345678

#header1 { position:relative; margin:0 auto; height:301px; width:744px; padding:64px 0 0 216px; background: transparent url(../images/headerimg.jpg) no-repeat top center; }

ก็จะออกมาเปนแบบนี้ครับ

หัวโลง ๆ แบบนี้ไมดีแน เตมิตนคริสมาส เขาไปที่หัวเวบ็สักหนอย โดยใชรูปนี ้

โดยการเพิ่ม <div id="headerimage"></div> เขาไปใตแท็ก <div id="header1"> เปนแบบนี ้

<div id="header1"> <div id="headerimage"></div> <------ที่ไดเพิ่มเขาไป <?php if ($this->countModules('user1')) : ?> <div id="user1"> <jdoc:include type="modules" name="user1" style="xhtml" /> </div> <?php endif; ?> <?php if ($this->countModules('header')) : ?> <div id="header"> <jdoc:include type="modules" name="header" style="xhtml" /> </div> <?php endif; ?> </div>

เขียน css "headerimage" เพิม่ ดังนี ้

12345678

#headerimage { position:absolute; top:0; left:0; width:216px; height:365px; background: transparent url(../images/img.jpg) no-repeat top left; }

เร่ิมดูดีขึ้นมาทนัที

เพื่อใหรูปสามารถเปนล้ิงกเพือ่กลับสูหนาแรกไดดวยก็ใส <a href="/joomla/index.php" title="กลับสูหนาแรก"></a> ครอบ <div id="headerimage"></div>

1 <a href="index.php" title="กลับสูหนาแรก"><div id="headerimage"></div></a>

ในสวน footer ดูโลง ๆ ใสเสนไปซักหนอย โดยใชรูปนี ้

เหมือนเดมิครับใช <div> ครอบ footer ไว

123

<div id="footer_holder"> <jdoc:include type="modules" name="footer" style="none" /> </div>

คราวนี้ ผมจะเอาเสนที่ระบุขอบเขตของพื้นที่ออก border: 1px solid #008080; ที่อยูในสวนตาง ๆ ของ css

จากนี้กใ็สเสนของที่ main content โดยใชรูปภาพที่ทําไวแลว เปนลักษณะเสนเล็ก ๆ ดังในรูปดานลาง

โดยใส <div id="maincolumn_full"> ครอบ <jdoc:include type="component" /> ไว

1234

<div id="maincolumn_full"> <jdoc:include type="message" /> <jdoc:include type="component" /> </div>

เขียน css maincolumn_full โดยใชรูปเสนเล็ก ๆ

12345

#maincolumn_full { width:960px; margin:0 0 10px 0; background: transparent url(../images/content_m_full.gif) repeat-y top center; }

จากนั้นก็ใสเสนลอมรอบ main content ไว ซาย ขวา บน ลาง

12345678

<div id="maincolumn_full"> <div class="top_full"> <div class="bottom_full"> <jdoc:include type="message" /> <jdoc:include type="component" /> </div> </div> </div>

เขียน css ดังนี้

12345678

.top_full { background: transparent url(../images/content_t_full.gif) no-repeat top center; } .bottom_full { padding: 10px; background: transparent url(../images/content_b_full.gif) no-repeat bottom center; }

ก็จะไดผลดังนี ้

รูปแบบ template แบบเต็ม ๆ หนา ขนาดความกวางสูงสุด 960px

เอาเปนวา วางรูปแบบตางเสร็จเรียบรอยหมดแลว คราวนี้ก็ลอง enable โมดูลใหอยูตามตําแหนงตาง ๆ บน template ใหหมดแลวดวูา ผิดเพี้ยนหรือไม ถาไมไดตามตองการใหไปปรับแกที่ css เอา ในการดตูําแหนง module position ของ joomla ใหเติม ?tp=1 ตอทาย url ลงไป ก็จะเหน็ตําแหนง module ทั้งหมดบนหนา template เชน http://www.you.com/?tp=1

คราวนี้ก็ลอง preview ดู กับหลาย ๆ เบราเซอร วาการแสดงผลเปนปกตหิรือไม ดังรูปบน เปนการ ดใูน firefox ปกติดี

สวนอันนี้เปนการดูใน IE6 (Internet Explorer 6) จะเห็นวาในสวนของ content นั้น ชิดซายอยู สวน head นั้นอยูที่เดิม วิธีแกไขคือ สรางไฟล CSS อีกชุดหนึ่งเอาไวใชกับ เฉพาะ ie6 โดยเฉพาะ โดยการก็อปป โคด css อันเดิมที่ใช (template.css) แลวนํามาตั้งชื่อใหม เปน ie6.css

แลวเพิ่มโคดนีล้งไปใน index.php ของ template ในแทก็ <head> เพื่อเรียก css ตัวนีข้ึ้นมาเฉพาะเมื่อเปดกับ ie6

123

ก็จะเปนแบบนี้

123456789

10111213141516171819202122232425262728293031323334

<?php defined('_JEXEC') or die('Restricted access'); ?> <!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="/joomla/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?> /css/template.css" type="text/css" /> <?php if ($this->countModules('user1')): ?> <?php if ($this->params->get('user1Type') == 'css'): ?> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/css/sosdmenu.css" type="text/css" /> <script language="javascript" type="text/javascript" src="/joomla/<?php echo $this->template ?> /js/cssmenu.js"></script> <?php else: ?> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?> /css/sosdmenu.css" type="text/css" /> <script language="javascript" type="text/javascript" src="/joomla/<?php echo $this->template ?>/templates/ <?php echo $this->template ?>/js/moomenu.js"></script> <?php endif; ?> <?php endif; ?>

3536373839404142434445464748495051525354555657585960616263646566676869

</head> <body id="page_bg"> <a name="top"></a> <div id="mainbody"> <div id="header1"> <div class="logo"><a href="/joomla/index.php"><?php echo $mainframe->getCfg('sitename') ;?></a></div> <a href="/joomla/index.php" title="กลับสูหนาแรก"><div id="headerimage"></div></a> <?php if ($this->countModules('user1')) : ?> <div id="user1"> <div id="mainnav"> <jdoc:include type="modules" name="user1" style="xhtml" /> </div> </div> <?php endif; ?> <?php if ($this->countModules('header')) : ?> <div id="header"> <jdoc:include type="modules" name="header" style="xhtml" /> </div> <?php endif; ?> </div> <?php if ($this->countModules('user2 or user3')) : ?> <?php if ($this->countModules('user2')) : ?> <div id="user2"> <jdoc:include type="modules" name="user2" style="xhtml" /> </div> <?php endif; ?> <?php if ($this->countModules('user3')) : ?> <div id="user3"> <jdoc:include type="modules" name="user3" style="xhtml" /> </div>

707172737475767778798081828384858687888990919293949596979899

100101102103104

<?php endif; ?> <?php endif; ?> <div id="maincolumn_full"> <div class="top_full"> <div class="bottom_full"> <jdoc:include type="message" /> <?php if($this->params->get('showComponent')) : ?> <jdoc:include type="component" /> <?php endif; ?> </div> </div> </div> <div id="userall"> <div id="breadcrumbs"> <jdoc:include type="modules" name="breadcrumb" style="raw" /> </div> </div> <div id="userall"> <table width="980"> <tr> <?php if ($this->countModules('user4 or user5 or user6')) : ?> <?php if ($this->countModules('user4')) : ?> <td> <jdoc:include type="modules" name="user4" style="raw" /> </td> <?php endif; ?> <?php if ($this->countModules('user5')) : ?> <td> <jdoc:include type="modules" name="user5" style="raw" /> </td>

105106107108109110111112113114115116117118119120121122

<?php endif; ?> <?php if ($this->countModules('user6')) : ?> <td> <jdoc:include type="modules" name="user6" style="raw" /> </td> <?php endif; ?> <?php endif; ?> </tr> </table> </div> <div id="userall"> <div id="user7"> <jdoc:include type="modules" name="user7" style="xhtml" /> </div> </div> <div id="userall"> <div id="footer"> <div id="footer_holder"> Powered by <a href="http://www.joomlathaiclub.com/" target="_blank">Joomla!</a> and designed by joomlathaiclub <a href="http://www.joomlathaiclub.com/" target="_blank">joomla thai</a> </div> </div> </div> </div> <div id="userall"> <div id="debug"> <jdoc:include type="modules" name="debug" style="none" /> </div> </div> </body> </html>

css ของ ie6

123456789

10111213141516171819202122232425262728293031323334

/*////////// GENERAL //////////*/ body { margin: 0 auto; height: 0 auto; font-family: Tahoma, Verdana, Arial, sans-serif; line-height: 1.3em; font-size: 11px; color: #666666; background: #fff; } /*////////// TYPEOGRAPHY //////////*/ h1, h4, h2, h3{ font-family: Georgia, Times, serif; } h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { font-weight: normal; font-style: normal; text-decoration: none; } a img, a img.preview { border: none; text-decoration: none; } /*////////// HEADERS //////////*/

3536373839404142434445464748495051525354555657585960616263646566676869

.logo { position:absolute; top:26px; right:0; width:800px; height:25px; padding:0; margin:0; overflow:hidden; text-align:right; } #page_bg { background: #fff url(../images/page_bg.png) repeat-x top left; } #header { padding-top: 118px; margin: 5px; height: 0 auto; } #header1 { position:relative; margin:0 auto; height:301px; width:744px; padding:64px 0 0 216px; background: transparent url(../images/headerimg.jpg) no-repeat top center; } #headerimage {

707172737475767778798081828384858687888990919293949596979899

100101102103104

position:absolute; top:0; left:0; width:216px; height:365px; background: transparent url(../images/img.jpg) no-repeat top left; } /*////////// CONTENT //////////*/ #content { margin-top: auto; margin: 2% } #mainbody { margin: 5px; } #user1 { margin: 0 auto; } #user2 { margin: 0 0 0 14%; min-width: 375px; max-width: 480px; height: 0 auto; float: left; margin-bottom: 2%; } #user3 { margin: 0 0 0 14%; min-width: 375px;

105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139

max-width: 480px; height: 0 auto; float: left; margin-bottom: 2%; } #userall { margin: 0 0 0 14%; } #breadcrumbs { height: 33px; margin: 5px; width:770px; padding-left: 32px; padding-top: 8px; background: url(../images/homei.gif) 0 0 no-repeat; } /*////////// SIDEBARS //////////*/ /*////////// NAV //////////*/ #maincolumn_full { width:960px; margin: 0 0 0 14%; background: transparent url(../images/content_m_full.gif) repeat-y top center; } .top_full { background: transparent url(../images/content_t_full.gif) no-repeat top center; } .bottom_full { padding: 10px; background: transparent url(../images/content_b_full.gif) no-repeat bottom center;

140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174

} /*////////// FORMS //////////*/ /*////////// FOOTER //////////*/ #footer { width:960px; height:44px; text-align:center; margin:0 0 20px; background: transparent url(../images/footer.png) no-repeat top center; } #footer_holder { height:26px; width:936px; color: #fff; font-weight:400; line-height: 25px; padding:0 12px; margin:0 auto; overflow:hidden; } #footer a { color: #fff; font-weight:400; text-decoration: none; } #footer a:hover { text-decoration:underline;

175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209

} a.footer123:link, a.footer123:visited { color: #000; font-family: Tahoma, Arial, sans-serif; text-decoration: underline; } #f123 { text-align: right; width: 100%; margin: 0 auto; font-family: Tahoma, Arial, sans-serif; } .f123 { text-align: right; font-family: Tahoma, Arial, sans-serif; text-decoration: none; } .f123_bg { background:url(../images/123_bg.png); width:134px; height:30px; text-align:center; padding: 0 3px; } .f123_1 { display: block; font-size: 10px; font-family: Tahoma, Arial, sans-serif; color: #666; text-align: left; padding: 0 0 2px 4px; }

210211212213214215216217218219220221222223224225226227228229

a.link_123:link, a.link_123:visited { font-size: 15px; font-family: Tahoma, Verdana,Arial,Helvetica,sans-serif; color: #797979; text-decoration:none; font-weight: 700; } a.link_123:hover { font-size: 15px; font-family: Tahoma, Verdana,Arial,Helvetica,sans-serif; color: #797979; text-decoration:none; font-weight: 700; } #debug { padding: 2px } /*////////// IMAGES //////////*/

multiple IE โปรแกรมที่บรรจุ Internet Explorer หลาย ๆ เวอรช่ันเอาไวขางใน ทําใหคุณสามารถใช ie หลายๆ เวอรช่ันเพื่อทดสอบเวบ็ไซตไดในเครื่องเดียวกัน ดรูายละเอียดเพิม่เติมที่นี่ http://tredosoft.com/Multiple_IE

เมื่อดูในทกุเบราเซอรลงตัวดีแลว จากนั้นกม็าสรางรูปยอ สําหรับ template โดยใชโปรแกรม photoshop ขนาดรูปไมตองใหญนักประมาณ 200*150px บันทึกเปนไฟลช่ือ template_thumbnail.png เก็บไวในโฟลเดอรเดียวกนั

จากนั้นก็สรางรายชื่อไฟล วาใน template มีไฟลอะไรมั่ง เพื่อใชในการตดิตั้ง แลวทําการบันทึกรายชือ่ไฟลตาง ๆ ที่มีใน template ไวใน templateDetails.xml

บางทานอาจจะมีไฟลรูปภาพเยอะมาก อาจจะตกหลนในการเก็บรายชื่อ มีเครื่องมือที่ชวยลิสตรายชื่อไฟล ใหก็อปปโคดดานลางแลว เซฟเปนไฟลช่ือ remove.php

1234567

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>templateDetails.xml generator REMOVE PRIOR TO PACAKGING!!</title> </head>

89

1011121314151617181920212223242526272829303132333435363738

<body> <h2>Remove this file prior to packaging your template!</h2> <?php $dir="html"; // change this to template directory where files are stored. "." = root. if ($dir_list = opendir($dir)){ if ($dir == "."){ $dir = ""; }else{ $dir = $dir."/"; }//if/else while(($filename = readdir($dir_list)) !== false){ if ($filename != ".DS_Store" && $filename != "." && $filename != ".." && $filename != "remove.php" && $filename != "css" && $filename != "html" && $filename != "images" && $filename != "js"){ ?> <filename></filename><br/> <?php }//if }//while closedir($dir_list); }//if ?> </body> </html>

นําไปวางไวในโฟลเดอรของ template จากนั้นก็รันไฟลนี้ผานทางเบราเซอร แกไขสวนนีน้ิดหนอยเพื่อใหเขาไปลิสตรายช่ือไฟลในโฟลเดอรที่ลึกกวา นี้

12

$dir="html"; // change this to template directory where files are stored. "." = root.

แกไขที่ "html" ใหเปนชื่อโฟลเดอรที่ตองการจะลิสตรายช่ือไฟล หรือกําหนด เปน (.) จุด เพื่อเปน root โฟลเดอร

ก็จะแสดงผลลิสตรายช่ือไฟลออกมาใหแถมใสแท็กคําสั่งใหอีกตางหากก็ทํา การก็อปปรายช่ือไฟลดงักลาวมาใสไวในไฟล templateDetails.xml

จากนั้นก็ทําการบีบไฟลทั้งหมดใหเปนไฟลซิป (zip)

จากนั้นก็ลองติดตั้งด ู

ถาขึ้น Install Template Success ก็แสดงวาผาน ถา error ลองตรวจสอบวาไฟลอะไรขาดไปหรือเปลาครับ

จบครับ ขอใหสนุกกับการออกแบบเว็บไซต

tip

การแทรกไฟลแฟลชใหแสดงใน template

123456789

1011121314

<div id="flashHeader"> <object data="<?php echo $this->baseurl; ?>/templates/ <?php echo $this->template; ?>/green-flash-sample.swf" type="application/x-shockwave-flash" width="320" height="75" FlashVars="itemID=<?php echo $newItemid;?>"> <param name="movie" value="<?php echo $this->baseurl; ?> /templates/<?php echo $this->template; ?>/green-flash-sample.swf" /> <param name="menu" value="false" /> <param name="FlashVars" value="itemID=<?php echo $newItemid;?>"/> <param name="wmode" value="transparent" /> <param name="quality" value="best" /> </object>

css (หรือไมจําเปนตองใช css ก็ได)

123456

#flashHeader{ margin: 0; margin-top: 1px; width: 320px; height: 75px; }

เปลี่ยนตรงชื่อไฟลแฟลช green-flash-sample.swf เปนของคุณเอง กําหนดความกวางความสูงตามใจชอบ

joomla 1.5 template design

Documents