วิธีทำ Themes SMF บอร์ดไร้คอนเซปต์ ขั้นเทพ เปิดเผยครั้งแรก!! แบบ Step-By-Step
หลังจากที่ผมได้ศึกษาบอร์ด SMF มาเป็นระยะเวลานึงแล้ว โดยพยายามลองศึกษาหาอ่านไปตามเว็บต่างๆ ทั้งเว็บนอกและเว็บไทย จนได้ความรู้พอที่จะทำอะไรได้เป็นชิ้นเป็นอัน วันนี้ก็เลยลองเขียน วิธีการแต่ง Themes โดยจะพาเพื่อนๆลองทำ Themes แบบเว็บไร้คอนเซปต์นี่แหละ ดูซิว่ามันจะยากเกินฝีมือที่พวกเราจะทำได้หรือเปล่า
วิธีการติดตั้ง SMF ลงใน Appservก่อนอื่นเราก็ต้องไปโหลดตัวไฟล์ SMF จากเว็บ
http://download.simplemachines.org/ มาก่อนครับ ซึ่งขณะที่ผมกำลังเขียนบทความนี้ SMF เป็น Version 1.1.11
หลังจากดาวน์โหลดไฟล์มาเรียบร้อย ก็เอามาแตกไฟล์ไว้ในโฟลเดอร์ของ Appserv ของเราครับ โดย Path บังเอิญที่เก็บไฟล์ของผม เก็บไว้ Drive D จึงได้ Path ดังนี้
D:\AppServ\www\boardart2b
ต่อไปเรามาติดตั้งกันครับ โดยไปที่
http://localhost/boardart2b/install.php จากนั้นมันจะปรากฎหน้านี้ขึ้นมา
Forum Name : คือชื่อของเว็บบอร์ดคับ กรอกอะไรไปก็ได้
เลือก
UTF-8 Character Set เพิ่มด้วย
MSQL username และ MSQL password : กรอกเพื่อใช้เชื่อมต่อฐานข้อมูล
MSQL Database name : กรอกชื่อฐานข้อมูลลงไปด้วยครับ
จากนั้นก็กด Next
กรอก username ที่จะให้เป็น admin ของเว็บครับ จากนั้นก็กด Next
กดติ๊กลบไฟล์ install ด้วยนะครับ
เราก็จะได้หน้าตาเว็บบอร์ดแบบนี้ออกมา สิ้นสุดการติดตั้งครับ
--------------------------------------------------------------------------------------------------------------
ต่อไปเป็นวิธีการนำ Themes ที่เราสร้างไว้ มาแปะใส่ SMF ครับผม ก่อนอื่นก็ลองใช้ไฟล์ของผมดูก่อนนะครับ
ดาวน์โหลด mythemes.zip ไฟล์นี้ไป แล้วแตกไฟล์ไว้ให้ไฟล์ main.html อยู่ในโฟลเดอร์เดียวกับเว็บบอร์ดครับ จากนั้นก็ลองเปิดไฟล์ main.html เล่นๆดู จะเจอ Themes ตามด้านล่างครับ
หน้าตาของไฟล์ main.html
เปิดไฟล์ main.html แล้วดูโค้ดครับ ด้านบนจะเป็น header รูปด้านบนนั่นเอง ส่วนด้านล่างก็จะเป็นตัวคลุม background ครับ
ต่อไปเรามาลองเอาโค้ด header ไปแปะในไฟล์ boardart2b/themes/default/index.template.php เปิดไฟล์ขึ้นมาครับ แล้ว
ค้นหาคำว่า
echo '
<div class="tborder" ', $context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' style="width: 100%;"' : '', '>
แทรกโค้ด header ของเราลงไปก่อนหน้าข้อความเมื่อกี้ครับ
//art2b : แทรกโค้ดลงมาตรงนี้
echo '<div align="center"><table cellpadding="0" cellspacing="0" width="100%">
<tr><td width="100%" background="images/indextheme_bg.gif" align="center"><img usemap="#header_menu" src="images/header.png" alt="" width="900" height="300" border="0"></td></tr>
<tr><td bgcolor="#54753e" height="4"></td></tr>
<tr><td bgcolor="#80af75" height="2"></td></tr>
<tr><td style="background-image: url(images/background/background_main.jpg);background-attachment:fixed;background-position: 0px 308px"></td></tr>
</table></div>';
ผลลัพท์ก็จะได้แบบนี้ครับ เป็น header ที่ยังไม่มีพื้นหลัง
ต่อไปจะเป็นการลง Background ในแบบของเราแล้วครับเพิ่มโค้ดนี้โค้ดเมื่อกี้ เป็นการลง background ครอบโค้ด SMF
//art2bempire : เพิ่มพื้นหลังเข้ามา
echo '<div align="center" style="background-image: url('.$theme_path.'images/background/background_main.jpg);background-attachment:fixed;background-position: 0px 308px">
<div align="left"style="width:1024px;margin:0px;">';
//END : เพิ่มพื้นหลังเข้ามา
แล้วลบโค้ดด้านล่างนี้ออกไป (โค้ดส่วนแสดง header เดิม ที่มีโลโก้ SMF ลบออกไปซะเพื่อความสวยงาม)
echo '
<div class="tborder" ', $context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' style="width: 100%;"' : '', '>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="catbg" height="32">';
if (empty($settings['header_logo_url']))
echo '
<span style="font-family: Verdana, sans-serif; font-size: 140%; ">', $context['forum_name'], '</span>';
else
echo '
<img src="', $settings['header_logo_url'], '" style="margin: 4px;" alt="', $context['forum_name'], '" />';
echo '
</td>
<td align="right" class="catbg">
<img src="', $settings['images_url'], '/smflogo.gif" style="margin: 2px;" alt="" />
</td>
</tr>
</table>';
echo '
</div>';
// The following will be used to let the user know that some AJAX process is running
ให้แทนที่ด้วยโค้ดนี้ echo '</div></div>';//art2bempire : เพิ่มพื้นหลังเข้ามา ปิด div
echo '</div>';
// The following will be used to let the user know that some AJAX process is running
ถึงตอนนี้แล้วลองรันดูจะพบว่า Background ขึ้นมาให้เรียบร้อยแล้วครับสุดท้ายเปิดไฟล์ D:\AppServ\www\boardart2b\Themes\default\style.css ขึ้นมาเพื่อแก้ไข
ค้นหาบรรทัดนี้ครับ/* The main body of the entire forum. */
body
{
background-color: #E5E5E8;
margin: 0px;
padding: 12px 30px 4px 30px;
}
แล้วแทนที่ ด้วยโค้ดด้านล่าง (หรือลบ padding ทิ้งไป เป็นการตัดกรอบออกน่ะคับ)
/* The main body of the entire forum. */
body
{
background-color: #E5E5E8;
margin: 0px;
}
นี่แหละผลงานจากความเหนื่อยยากเป็นยังไงครับ ไม่ยากเกินไปเลยใช่ไหมล่ะครับ ด้วยวิธีแบบนี้เราสามารถสร้าง Themes ของเว็บบอร์ดที่มีเฉพาะของเราบนโลกนี้ได้
สามารถประยุกต์ไปทำบอร์ดของตัวเองได้นะครับ โดยแก้รูป ปรับสี
วันนี้ขอจบบทเรียนแค่นี้ก่อนครับ ต้องทำงานที่ทำงานต่อแล้วครับ ประเดี๋ยวเขาไล่ออก!!
วันหลังจะมาพาทำต่อในเรื่องต่อๆไป ติดข้อสงสัยอะไรก็ถามทิ้งไว้ได้ครับ
