ธันวาคม 11, 2018, 05:41:48 AM *
ยินดีต้อนรับคุณ, บุคคลไม่รู้ว่าใคร กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
หน้า: [1]   ลงล่าง
  พิมพ์  
วิธีทำ art2b Themes SMF บอร์ดไร้คอนเซปต์ ขั้นเทพ ไม่เคยเปิดเผยที่ไหนมาก่อน!!  (อ่าน 10416 ครั้ง)
ไร้คอนเซปต์ ******* ออฟไลน์ ออฟไลน์ เพศ: ชาย พลังสะสม: 18055
สิงหาคม 18, 2010, 03:21:53 PM
ผลงาน: 1730
อาร์ตทูบี
Administrator
ไร้คอนเซปต์
*******

ผลงาน: 1730
ออฟไลน์ ออฟไลน์

เพศ: ชาย
พลังสะสม: 18055


เว็บไซต์
« เมื่อ: สิงหาคม 18, 2010, 03:21:53 PM »
วิธีทำ 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 ของเว็บบอร์ดที่มีเฉพาะของเราบนโลกนี้ได้
สามารถประยุกต์ไปทำบอร์ดของตัวเองได้นะครับ โดยแก้รูป ปรับสี

วันนี้ขอจบบทเรียนแค่นี้ก่อนครับ ต้องทำงานที่ทำงานต่อแล้วครับ ประเดี๋ยวเขาไล่ออก!!
วันหลังจะมาพาทำต่อในเรื่องต่อๆไป ติดข้อสงสัยอะไรก็ถามทิ้งไว้ได้ครับ




รับจดโดเมน รับฝาก-ดูแลเว็บไซต์ ทำเว็บ เขียนโปรแกรม โฆษณา Google Adwords
พูดคุยเป็นการส่วนตัวคลิ๊กเลยครับ


ขั้น 4 : แฟนคลับบอร์ด *** ออฟไลน์ ออฟไลน์ เพศ: ชาย พลังสะสม: 800 ขอโทษว่ะ!!! ไม่ชอบประจบ
ตุลาคม 07, 2010, 07:13:59 AM
ผลงาน: 691
นายเอ(นามสมมติ)
แฟนคลับ
ขั้น 4 : แฟนคลับบอร์ด
***

ผลงาน: 691
ออฟไลน์ ออฟไลน์

เพศ: ชาย
พลังสะสม: 800


ขอโทษว่ะ!!! ไม่ชอบประจบ

เว็บไซต์
« ตอบ #1 เมื่อ: ตุลาคม 07, 2010, 07:13:59 AM »
ว้าวๆ รอติดตามอยู่นะครับ
ขั้น 3 : ซุปเปอร์สตาร์ *** ออฟไลน์ ออฟไลน์ พลังสะสม: 127
ธันวาคม 19, 2010, 07:48:03 PM
ผลงาน: 6
SASA_MIXCLUB
แฟนคลับ
ขั้น 3 : ซุปเปอร์สตาร์
***

ผลงาน: 6
ออฟไลน์ ออฟไลน์

พลังสะสม: 127


« ตอบ #2 เมื่อ: ธันวาคม 19, 2010, 07:48:03 PM »
 ชอบจัง ยัง งง เข้าแรกๆตรงไหน
ขั้น 3 : ซุปเปอร์สตาร์ *** ออฟไลน์ ออฟไลน์ เพศ: หญิง พลังสะสม: 390
กุมภาพันธ์ 06, 2011, 08:38:52 PM
ผลงาน: 53
Film+tong
แฟนคลับ
ขั้น 3 : ซุปเปอร์สตาร์
***

ผลงาน: 53
ออฟไลน์ ออฟไลน์

เพศ: หญิง
พลังสะสม: 390

คน รัก แมว **

« ตอบ #3 เมื่อ: กุมภาพันธ์ 06, 2011, 08:38:52 PM »
เขียนออกมาเรื้อยๆ นะคะ
ขั้น 3 : ซุปเปอร์สตาร์ *** ออฟไลน์ ออฟไลน์ พลังสะสม: 170
พฤษภาคม 17, 2011, 09:48:25 PM
ผลงาน: 4
mzaa_jojo
แฟนคลับ
ขั้น 3 : ซุปเปอร์สตาร์
***

ผลงาน: 4
ออฟไลน์ ออฟไลน์

พลังสะสม: 170


« ตอบ #4 เมื่อ: พฤษภาคม 17, 2011, 09:48:25 PM »
ทำไมต้องทำให้ยุ่งยากด้วยอ่ะ....
ขั้น 1 : วัยรุ่น *** ออฟไลน์ ออฟไลน์ เพศ: ชาย พลังสะสม: 20
กุมภาพันธ์ 18, 2013, 08:58:41 PM
ผลงาน: 0
nightzkung
แฟนคลับ
ขั้น 1 : วัยรุ่น
***

ผลงาน: 0
ออฟไลน์ ออฟไลน์

เพศ: ชาย
พลังสะสม: 20

เว็บไซต์
« ตอบ #5 เมื่อ: กุมภาพันธ์ 18, 2013, 08:58:41 PM »
ขอบคุณครับขอบเค้า งามจริงๆ
หน้า: [1]   ขึ้นบน
  พิมพ์  
 
กระโดดไป:  

Powered by MySQL Powered by PHP Valid XHTML 1.0! Valid CSS!