ยำใหญ่ Dilber Multicolor Themes

[UnclEo]

รูปภาพประกอบบทความทั้งหมดนี้อยู่ใน server ของ http://www.dexmore.com หากท่านต้องการคัดลอกบทความนี้ไปเผยแพร่ต่อกรุณาเซฟรูปไปฝากที่อื่น หรือไว้ในโฮสต์ตัวเองด้วยนะครับ อย่าดึงรูปไปจาก server เลย หากผมไปเจอที่ใด ผมจะลบรูปออกหมดทันที

-:-ไม่มีเครดิต ไม่มีลิขสิทธิ์ ไม่มีหวงห้าม ขอเชิญท่านนำไปสร้างสรรค์ตามสบาย-:-

      ธีมนี้เป็นธีมที่เด็กมอร์ใช้ในยุคเริ่มต้นนะครับ แต่เห็นว่าในปัจจุบันก็ยังมีคนนิยมใช้กันอยู่มาก ก็เลยไม่อยากให้ความทรงจำทีเคยยำใหญ่กันมาแล้วต้องหายไปกับกาลเวลา เพราะว่ามีประโยชน์ของผู้ที่ใช้กันอยู่เลยทำบทความเชิงบันทึกความจำ ไว้ให้เป็นแนวทางกันต่อไป

      ธีมนี้เป็นธีมที่มีเสน่ห์มากครับ ไม่ว่าจะเป็นตัวเลือกเพิ่มเติมอันหลากหลาย สีสรรที่มีให้เลือกใช้ได้ตามใจชอบ และการโหลดที่รวดเร็วไม่เปลื่องทรัพยากรณ์ จึงไม่น่าแปลกใจเลยว่าทำไมธีมนี้จึงมีผู้ใช้มากเป็นอันดับหนึ่ง [Downloads: 105736] ณ ขณะที่กำลังปั่นกระทู้นี้อยู่

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

   1 ยำหัว
      file index.template.php ซึ่งไฟล์นี้จะคงสภาพรูปแบบของส่วนหัว และส่วนเท้าของบอร์ดไว้ไม่เปลี่ยนแปลง แต่เราจะเริ่มดัดแปลงแก้ไขในส่วนหัว หรือ header logo กันก่อนครับ

ค้นหา -->>

โค๊ด: [Select]

<div style="width: 100%;" class="topbar">
<table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
<tr>
<td style="padding:0;" width="1" height="120">';

if(!($settings['logo_not_show']))
{
if (empty($settings['header_logo_url']))
echo '
<a href="', $scripturl, '"><img src="', $settings['images_url'] . '/'. $settings['theme_main_color'], '/logo.jpg" style="margin: 0px;" alt="', $context['forum_name'], '" title="', $context['forum_name'], '"/></a>';
else
echo '
<a href="', $scripturl, '"><img src="', $settings['header_logo_url'], '" style="margin: 0px;" alt="', $context['forum_name'], '" /></a>';
}
echo '
</td>';

if (!empty($settings['show_name_near_logo']))
echo '
<td>
<span style="font-family: \'Trebuchet MS\', Verdana, sans-serif; font-size: 150%; color: white; padding-top: 30px; padding-left: 30px; white-space: normal;">', $context['forum_name'], '</span>
</td>';
if (!empty($settings['top_right_html']))
echo '
<td valign="top" align="right">
<div style="color: white; padding-top: 10px; float:right;">', $settings['top_right_html'], '</div>
</td>';

echo '
</tr>
</table>
</div>
แก้เป็น -->>

โค๊ด: [Select]

<div style="width: 100%;" class="topbar">
<table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
<tr>
<td style="padding:0;" width="1" height="120">
<img src="', $settings['images_url'] . '/'. $settings['theme_main_color'], '/logo.jpg" style="margin: 0px;" alt="', $context['forum_name'], '" title="', $context['forum_name'], '"/></td>
</tr>
</table>
</div>
อธิบาย:
      สังเกตุดูนะครับว่าในโค๊ดเดิมนั้นจะมีหลาย <td></td> หมายถึงในตารางนั้นมีหลายคอลัมน์นั่นเอง เราก็ลบคอลัมน์ส่วนใหญ่ออกไปเหลือไว้แต่เพียงคอลัมน์เดียว ซึ่งภายในคอลัมน์ที่เหลือไว้ก็จะมีคำสั่ง img แต่เพียงคำสั่งเดียว คำสั่งนี้ก็คือการนำรูปมาแสดงนั่นเอง ที่อยู่ของรูปที่นำมาแสดงคือ Themes/dilbermc/images/lightblue/logo.jpg ด้วยคำสั่ง $settings['images_url'] . '/'. $settings['theme_main_color'], '/logo.jpg ธีมนี้มีสีให้เลือกถึง 12 สี แต่สีที่เป็นค่าเริ่มต้นคือ lightblue การแก้ไขโลโกของแต่ละสีจึงนำรูป logo.jpg หรือ logo.gif หรือไฟล์นามสกุลอื่น ๆ แต่เราต้องแก้ไขโค๊ดให้ตรงกับนามสกุลของรูป ดังนั้นในบทความนี้ผมจึงอ้างเอาสี lightblue เป็นสีที่กล่าวถึงตลอดไปนะครับ
      ในโค๊ดเดิมการแสดงรูปโลโกจะอยู่ภายใต้เงื่อนไข หลายเงื่อนไข เราจึงจัดการลบเงื่อนไขเหล่านั้นออกไป เพื่อให้แสดงรูปโลโกโดยไม่มีเงื่อนไขใด ๆ ทั้งสิ้น ดูผลเปรีบเทียบก่อนและหลังปรับแต่งกัน

ก่อนปรับแต่ง


หลังปรับแต่ง

      จากรูปภาพหลังการปรับแต่งให้สังเกตุที่จุดสังเกตุ จะเห็นเป็นรอยต่อและรูปยังชิดด้านซ้ายซึ่งแน่นอนเราไม่ต้องการให้มันเป็นแบบนั้น รอยต่อนั้นเกิดจากเรายังไม่ได้แก้ไขโค๊ส่วนนี้ครับ <td style="padding:0;" width="1" height="120"> ซึ่งใน แท็ก <td> เราสามารถเพิ่มแอททริบิวต์ align เพื่อกำหนดการจัดตำแหน่งในแนวนอน และ valign เพื่อกำหนดการจัดตำแหน่งในแนวตั้ง ในที่นี้เราแก้ไขเป็น <td align="center" style="padding:0;" width="1" height="120"> หากเราไม่กำหนดบราวเซอร์ก็จะใช้ค่ามาตรฐานของ HTML คือ ซ้าย-บน

ผลที่ได้

      คราวนี้ปัญหาชิดซ้ายหมดไป แต่ยังเห็นเป็นรอยต่ออยู่ดี ปัญหามันไม่ได้อยู่ที่โค๊ดแล้วครับ มันเป็นปัญหาของรูป หรืองานกราฟิกแล้วคราวนี้ วิธีแก้ก็คือเปิดรูป logo.gif (ตอนนี้เปลี่ยนเป็น .gif แล้วเพราะต้องการแสดงภาพเคลื่อนไหว) ส่วนขั้นตอนการทำรูปโลโกนั้น ผมขอละไว้ในฐานที่ทำไม่เป็นนะครับ..เพราะงานกราฟิกของเด็กมอร์ตอนใช้ธีม dilbermc ได้รับความอนุเคราะห์จากคุณ tuk_tuk_ja หรือป้าตุ๊ก ของเรานั้นเองครับ เอาหล่ะเปิดรูปใน PhotoShop กันเลยแบบนี้

      เมื่อเราเปิดรูปในโปรแกรม PhotoShop แล้วก็ตัดส่วนที่มาร์คไว้ด้วยสีแดงนั้นครับ แล้วสร้างไฟล์ใหม่ขนาด 10px* ความสูงไฟล์ logo.gif ชื่อว่า topbar เอาส่วนที่ตัดไปวางในไฟล์ที่สร้างใหม่

เซฟเป็น topbar.gif นำไปไว้ใน Themes/dilbermc/images/lightblue

ผลที่ได้

      ไฟล์ topbar.gif แสดงเป็นพื้นหลังของโลโกซึ่งแต่เดิมก็มีอยู่แล้ว แต่เนื่องด้วยเราได้ปรับแต่งโลโกใหม่มันจึงไม่เข้ากัน เราก็จัดการไปตัดมาจากไฟล์ logo.gif เลย เอามาจากที่เดียวกันไม่เข้ากันก็ให้มันรู้ไป ตอนที่เราทำไฟล์ logo.gif นี่เราก็เอาไฟล์ topbar นี่แหละไปเป็นพื้นหลัง เพื่อความเข้ากันของธีม

ตัวอย่างไฟล์ logo.gif และ topbar.gif

      ที่ผ่านมาทั้งหมดนั้นคือการเปลี่ยนโลโกด้วยไฟล์ภาพ ต่อไปนี้จะเป็นการเปลี่ยนโกโลเป็นไฟล์แฟรช [*.swf] กันครับ วิธีทำไฟล์แฟรชก็ขอละไว้ในฐานที่ทำไม่เป็นเช่นเดิมครับ ส่วนวิธีนำมาใส่ในส่วนหัวนั้นก็มีวิธีการที่แตกต่างกันออกไปนิดเดียว ตรงไฟล์เดิม ที่เดิมครับ

ค้นหา -->>

โค๊ด: [Select]

<td style="padding:0;" width="1" height="120">
<img src="', $settings['images_url'] . '/'. $settings['theme_main_color'], '/logo.jpg" style="margin: 0px;" alt="', $context['forum_name'], '" title="', $context['forum_name'], '"/></td>โค๊ดที่ให้ค้นหานี้คือผ่านการปรับแต่งเพื่อเปลี่ยนรูปโลโกแล้วนะครับ

แก้เป็น -->>

โค๊ด: [Select]

<td style="padding:0;" width="1" height="120">
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="ความกว้าง" height="ความสูง">
      <param name="movie" value="' . $settings['images_url'] . '/ชื่อไฟล์.swf" />
      <param name="quality" value="high" />
      <embed src="' . $settings['images_url'] . '/ชื่อไฟล์.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" width="ความกว้าง" height="ความสูง"></embed>
    </object></td>
อธิบาย:
      ไฟล์แฟรชที่ต้องการทำเป็นโลโกจะต้องอยู่ใน Themes/dilbermc/images/  เพราะตัวแปร $settings['images_url'] นี้เก็บค่าการนำรูปจากโฟลเดอร์ images มาแสดง ไฟล์แฟรชไม่ควรนำไปฝากไว้โฮสต์อื่น เพราะโดยปกติมันจะโหลดช้าอยู่แล้ว ยิ่งไปฝากไว้ที่อื่นยิ่งทำให้โหลดช้าหนักเข้าไปอีก โดยเฉพาะถ้าเป็นโฮสต์ต่างประเทศด้วยแล้ว ผู้ชมอาจไม่อยากเข้าบอร์ดเราอีกเลยก็เป็นได้ ถ้าไม่รักกันจริง

      ไฟล์แฟรชนั้นจะต้องอาศัย javaScript ในการแสดงผล ดังนั้นเราจึงจำเป็นต้องมีไฟล์ javaScript ที่ชื่อว่า AC_RunActiveContent.js อยู่ในโฟลเดอร์ Scripts โฟลเดอร์นี้เราไว้ในไดเร็คทอรีหลังของไซต์ [$root] หรือ public_html (Linux hosting) เพื่อสะดวกในการเรียนใช้งาน ในที่นี่เราเรียกใช้งานด้วยคำสั่ง <script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script> ให้สังเกตุจุด 2 จุดนะครับ จุดแรกแทน http://www. จุดที่ 2 แทนชื่อไซต์ของเรา หากใช้แบบนี้แล้วเปลี่ยนไปใช้งานในที่อื่น ๆ เราก็ไม่ต้องเปลี่ยนชื่อเว็บให้เสียเวลาครับ
      
      ไฟล์ AC_RunActiveContent.js นี้เราจะหาได้จากใหน ก็ไม่ยากครับหาได้ใน google ทั่วไป หรือถ้าหากท่านใช้โปรแกรม Dreamweaver ในการทำเว็บ แล้วมีการแทรกไฟล์แฟรช มันจะสร้างโฟลเดอร์ Scripts และไฟล์ AC_RunActiveContent.js นี้ให้เองโดยอัตโนมัติเลย หรือเดี๋ยวผมจะทำลิงค์สำหรับดาวน์โหลดไว้ท้ายกระทู้นี่เลย

ตัวอย่างการแทรกไฟล์แฟรชใน SMF

      ตอนนี้เราได้แก้ไขส่วนของ header logo เรียบร้อยแล้ว แต่ส่วนบนของโลโกมันชิดติดขอบด้านบนของบราวเซอร์ หากเราต้องการให้มันต่ำลงมาสักนิดทำได้ไม่ยากครับ

file style.css
ค้นหา -->>

โค๊ด: [Select]

/* The main body of the entire forum. */
body
{
margin: 0px;
padding: 0px;
}
แก้เป็น -->>

โค๊ด: [Select]

/* The main body of the entire forum. */
body
{
margin: 10px auto 0 auto;
padding: 0px;
}
อธิบาย:
      ส่วนนี้คือการแก้ไขคุณสมบัติของ body แต่เดิมนั้นได้กำหนดค่า margin (ความห่างระหว่างวัตถุ-วัตถุ)ไว้เป็น 0 แต่เรามากำหนดเสียใหม่ให้เป็น บน 10px ขวาอัตโนมัติ(จัดการโดยบราวเซอร์) ล่าง 0 (0=ไม่กำหนด) ซ้ายอัตโนมัติ

ผลที่ได้

      ในที่นี้ได้ทำรูป logo.gif ขนาด 970*140 เพราะต้องการกำหนดให้ความกว้างของบอร์ดเป็น 1001 px เหตุที่ต้องกำหนดให้เป็นขนาดเท่านี้ก็เพราะว่าการให้แสดงผลได้ดีในผู้ใช้งานคอมฯ ทีกำหนดความละเอียดของหน้าจอ 1024*768 หากผู้ใช้กำหนดความละเอียดมากกว่านี้ก็ดูดีไม่มีปัญหา แต่ถ้าหากเรากำหนดขนาดของบอร์ดเป็น px แล้วมีขนาดมากกว่านี้ ผู้ใช้ที่กำหนดความละเอียดดังกล่าวจะมี scroll bar ขึ้นทำให้บอร์ดเราลดความน่าดูลงไปมากเลย

ยังไม่จบแค่นี้ครับส่วนหัว โปรดติดตามตอนต่อไป

[c,;-uhg,k]

Thank you very much ~~

[UnclEo]

      ต่อไปเป็นการปรับแต่งในส่วนของ news (ข่าว) และ search (ค้นหา) เป็นการลบข่าวออกไปเลยครับ เพราะข่าวอันนี้จะแสดงไปทุก ๆ หน้า ถ้าหากเรามีหลาย ๆ ข่าวมันก็จะสุ่มมาแสดง และหากเนื้อหาของข่าวนั้นมีความยาวมาก หรือมีรูปภาพประกอบ มันก็จะขยายพื้นที่ส่วนนั้น ออกไป ทำให้บางครั้งก็เล็ก บางครั้งก็ใหญ่ไม่คงที่ และมันอยู่ในตารางเดียวกับค้นหา ส่วนของฟอร์มค้นหาไม่ได้ขยายตามไปด้วย เราจึงเลิกใช้มันเลยดีกว่า
      อาจมีคำถามตามมาว่า หากเลิกใช้ข่าวแล้วส่วนนี้แล้วเราจะเอาอะไรมาแสดงข่าวสารแก่สมาชิก ไม่ต้องตกใจครับเรายังมี News Fader ให้แสดงข่าวอีก แต่เอ๊ะ.. News Fader มันแสดงเฉพาะหน้าแรกนี่ ก็ไม่เป็นไรครับ ตอนนี้เราเอา news ออกจากตรงนี้ไปก่อน แล้วเราค่อยเอามันไปไว้ในส่วนที่เหมาะสม ตามความต้องการกันต่อไป หากยังติดใจอยากจะใช้มันอยู่ เมื่อเอาออกไปแล้วพื้นที่ตรงนั้นก็กลายเป็นพื้นที่ว่าง ๆ แล้วจะเอาอะไรมาใส่ อย่าสงสัยให้มากเลยครับดูการเปลี่ยนแปลงของโค๊ด แล้วผมจะค่อยอธิบายไปจนเสร็จเป็นรูปร่าง ลุยเลย..

ตัวอย่างก่อนการปรับแต่ง

ค้นหา -->>

โค๊ด: [Select]

// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']))
echo '

<td valign="middle" height="30" class="smalltext" style="padding-left:10px; padding-top:0px; padding-bottom:0px;">
<b>', $txt[102], '</b>: ', $context['random_news_line'], '
</td>
';
echo '
<td valign="middle" height="30" style="padding-top:0px; padding-bottom:0px; padding-right:20px;" class="middletext" align="right">
<form action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '" style="margin: 0px;">
<a href="', $scripturl, '?action=search;advanced"><img src="'.$settings['images_url'].'/filter.gif" align="middle" style="margin: 0px;" alt="" /></a>
<input type="text" name="search" value="" style="width: 190px;" />&nbsp;
<input type="submit" name="submit" value="', $txt[182], '" style="width: 11ex;" />
<input type="hidden" name="advanced" value="0" />';

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="', $context['current_topic'], '" />';

// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '
</form>

</td>
</tr>
</table>
แก้เป็น -->>

โค๊ด: [Select]

//Start show search and languages bar
echo '
<td  valign="middle" height="30" style="padding: 0 0 0 20px;" class="middletext" align="left">
<form action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '" style="margin: 0px;">
<input type="submit" name="submit" value="', $txt[182], '" style="width: 11ex;" />
<input type="text" name="search" value="" style="width: 190px;" />&nbsp;
<input type="hidden" name="advanced" value="0" />
<a href="', $scripturl, '?action=search;advanced"><img src="'.$settings['images_url'].'/filter.gif" align="middle" style="margin: 0px;" alt="" /></a>';

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="', $context['current_topic'], '" />';

// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '
</form>
</td>
<td valign="middle" height="30" style="padding: 0 20px 0 0;" class="middletext" align="right">
<b>Languages </b>&nbsp; <a href="javascript:window.location += (window.location.href.indexOf(\'?\') != -1 ? \';\' : \'?\') + \'language=thai-utf8\';void(0);"><img src="' . $settings['images_url'] . '/th.gif" border="0" title="Thai"/></a>&nbsp;
<a href="javascript:window.location += (window.location.href.indexOf(\'?\') != -1 ? \';\' : \'?\') + \'language=english\';void(0);"><img src="' . $settings['images_url'] . '/gb.gif" border="0" title="English"/></a>
</td>
</tr>
</table>
อธิบาย:
      การปรับแต่งครั้งนี้เราได้ลบข่าวออกไป คือโค๊ดส่วนนี้

โค๊ด: [Select]

// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']))
echo '

<td valign="middle" height="30" class="smalltext" style="padding-left:10px; padding-top:0px; padding-bottom:0px;">
<b>', $txt[102], '</b>: ', $context['random_news_line'], '
</td>และก็ได้ย้ายฟอร์มค้นหามาอยู่ด้านซ้าย โดยหลักการง่าย ๆ ของภาษา HTML ว่าคอลัมน์ใดที่อยู่ก่อน หมายถึงคอลั่มน์นั้นอยู่ทางด้านซ้าย คอลัมน์ถัดไปก็จะอยู่ทางด้านขวาไปตามลำดับ และได้จัดการย้ายปุ่มค้นหามาทางด้านซ้าย ขอให้สังเกตุการเปลี่ยนแปลงขอโค๊ด ก่อนและหลังปรับแต่ง ย้ายรูป filter.gif มาอยู่ทางด้านขวาของฟอร์มค้นหา
      
      เมื่อเราลบคอลัมน์ของข่าวออกไปแล้ว เราก็เพิ่มคอลัมน์ขึ้นมาอีก 1 คอลัมน์ ภายในนั้นเราได้ใส่ script การเปลี่ยนภาษา เพื่อให้ผู้ใช้สลับการเปลี่ยนภาษาของฟอรั่มได้ ในที่นี่หมายถึงเปลี่ยนการแสดงภาษาเฉพาะส่วนเมนู หรือรายละเอียดอื่น ๆ ของฟอรั่ม ไม่ได้รวมถึงเนื้อหาที่โพสต์ไปในบอร์ดต่าง ๆ

      ปรับแต่งลบ-เพิ่มคอลัมน์กันแล้วก็ต้องกำหนดตำแหน่งการจัดวางด้วยแอททริบิวต์ align เช่นเคย เพราะเราต้องกำหนดว่าให้คอลัมน์หนึ่งชิดซ้าย อีกคอลัมน์ชิดขวา และใช้แอททริบิวต์ style ช่วยในการกำหนดระยะห่างจากกรอบด้วยคุณบัติ padding (ระยะห่างของวัตถุ-กรอบ) ในที่นี้ท่านจะเห็นเป็น padding: 0 0 0 20px และ padding: 0 20px 0 0 ค่าที่เป็นตัวเลขคือระยะห่างจากกรอบเริ่มต้นที่ บน-ขวา-ล่าง-ซ้าย ตามลำดับ
      
      ไฟล์ th.gif และ gb.gif คือรูปภาพธงชาติไทย และอังกฤษ(หาได้ทั่วไป) title="Thai" หรือ title="English" คือข้อความอธิบายรูปภาพจะปรากฏเมื่อมีการนำเมาส์ไปอยู่บนรูปภาพนั้น ๆ ในที่นี้จะปรากฏเป็น Thai และ English

ผลที่ได้

หมายเหตุ: การปรับแต่งนี้ท่านอาจจะประยุกต์เป็นอย่างอื่นไปก็ได้ ตามลักษณะความต้องการในการใช้งาน เพียงแต่นำเสนอให้รู้จักตำแหน่ง และคำสั่งต่าง ๆ ในการแสดงผลของธีมนี้เท่านั้น หรือท่านอาจนำไปใช้เป็นแนวทางในการปรับแต่งธีมอื่น ๆ ก็ได้

      ตบท้ายอาจมีข้อสงสัยตามมาว่าเมื่อเราลบ คำสั่งการแสดงข่าวออกจากการแสดงผลแล้ว แต่ยังมีตัวเลือกให้เลือกใช้งานใน เมนู ผู้ดูแล >> ตั้งค่าธีมปัจจุบัน >> ใช้งานข่าว? ส่วนนี้เราจะเลือกหรือไม่เลือกก็ไม่มีผลต่อการแสดงผลแล้วนะครับ แต่ถ้ายังไม่สบายใจต้องการเอามันออกไปให้พ้น ๆ ซะ ก็ไม่ยากครับ

file Settings.template.php (ของธีมนี้)
ค้นหา -->>

โค๊ด: [Select]

array(
'id' => 'enable_news',
'label' => $txt[379],
),แก้เป็น -->>

โค๊ด: [Select]

/*array(
'id' => 'enable_news',
'label' => $txt[379],
),*/หรือลบออกไปเลยก็ได้ครับ มีข้อแม้ว่าหากยกเลิกส่วนนี้ไปแล้ว ก็จะไม่มีตัวเลือกให้เลือกใช้งานหากต้องการให้ news แสดงในส่วนอื่นที่ต้องการซึ่งจะนำเสนอในตอน..ถัด..ถัด..ถัด ไป

[UnclEo]

      เราจะปรับแต่งกันถัดลงมาตามลำดับนะครับ ลำดับต่อไปก็คือการปรับแต่งในส่วนของ menu bar หรือเรียกกันอีกอย่างว่า NAVIGATION ทำหน้าที่เป็นไกด์ นำผู้ใช้งานไปยังส่วนต่าง ๆ ของบอร์ด หากท่านพอใจในรูปแบบที่เป็นอยู่แล้วข้าม ๆ ไปก็ได้ครับ แต่หากยังไม่พอใจก็อ่านแล้วทำตามไปเรื่อย ๆ ครับ

ตัวอย่างก่อนการปรับแต่ง

      การที่ต้องปรับแต่งก็เกิดจากความไม่พอใจในรูปแบบเดิมของมันแหละครับ เป็นพื้นฐาน ผมไม่ชอบใจว่าแบบตัวอักษรมันไม่น่ามอง หนึ่งหล่ะ ตัวอักษรมันเล็กไปอีกหนึ่ง และระยะความห่างของมันก็เยอะไปนี่ก็อีกอย่างหนึ่ง โอ..ไม่ชอบใจมากมายขนาดนี้ก็จัดการแต่งหน้าทาปากมันใหม่เสียเลยดีกว่าจะน่าจุ๊บ..จุ๊บ หน่อย

file sytle.css
ค้นหา -->>

โค๊ด: [Select]

.menubg , tr.menubg td
{
margin: 0px;
font-size: 80%;
font-weight:bold;
text-transform: uppercase;
}

.menubg2 , tr.menubg2 td
{
margin: 0px;
font-size: 80%;
font-weight:bold;
text-transform: uppercase;
}
แก้เป็น -->>

โค๊ด: [Select]

.menubg , tr.menubg td
{
margin: 0px;
font-size: 14px;
font-family: Tahoma, Verdana, Arial, "Arial Unicode MS", "Bitstream Vera Sans", "Lucida Grande", Helvetica, sans-serif;
font-weight:bold;
text-transform: uppercase;
}

.menubg2 , tr.menubg2 td
{
margin: 0px;
font-size: 14px;
font-family: Tahoma, Verdana, Arial, "Arial Unicode MS", "Bitstream Vera Sans", "Lucida Grande", Helvetica, sans-serif;
font-weight:bold;
text-transform: uppercase;
}
อธิบาย:

      ส่วนนี้ก็ไม่มีอะไรมากครับเพียงแค่เพิ่มขนาดตัวอักษร และเปลี่ยนชุดตัวอักษร ให้สังเกตุที่ Selections และ properties ครับว่าได้เปลี่ยนแปลงไปอย่างไร

      ในภาษา CSS เราเรียกส่วนที่เน้นสีไว้ว่า Selections และส่วนที่อยู่หลัง [:] เรียกว่า properties ในบาง Selections สามารถมี properties ได้มากกว่าหนึ่ง

      font-size: คือการกำหนดขนาดตัวอักษร เดิมกำหนดเป็น % ซึ่งจะแสดงผลเป็น % ของการแสดงผลของผู้ใช้ มีขนาดยืดหยุ่นไม่คงที่ เรากำหนดเสียใหม่ให้เป็นขนาด 14px ซึ่งจะแสดงขนาดนี้เป็นค่าคงที่ ไม่ว่าจะแสดงผลในความละเอียดของหน้าจอผู้ใช้ที่กำหนดไว้ไม่เท่ากัน หรือแสดงผลในบราวเซอร์ใด ๆ ก็ตาม

      font-family: คือการกำหนดชุดตัวอักษร โดยชุดตัวอักษรนั้น ๆ จะต้องมีอยู่ในระบบปฏิบัติการของผู้ใช้จึงสามารถแสดงผลได้ โดยค่าเดิมไม่ได้กำหนดส่วนนี้ไว้ บราวเซอร์จึงแสดงค่ารูปแบบตัวอักษรตามค่าที่ผู้ใช้กำหนดไว้ในบราวเซอร์ เราก็จัดการกำหนดเสียเลยว่าต้องแสดงตัวอักษรแบบนี้นะจ๊ะ..จำไว้..จำไว้..

      เราได้ปรับแต่งไป 2 อย่างแล้วคือ ขนาดตัวอักษร และ รูปแบบตัวอักษร ก็คงเหลืออีกอย่างคือความกว้าง ก็จัดการตามความเรียกร้องของหัวใจกันต่อไป

file index.template.php
ค้นหา -->>

โค๊ด: [Select]

<div class="menubar">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>';
// Show the menu here, according to the menu sub template.
แก้เป็น -->>

โค๊ด: [Select]

<div class="menubar">
<table align="center" border="0" cellspacing="0" cellpadding="0" width="80%">
<tr>';
// Show the menu here, according to the menu sub template.
      อ่า..ง่ายนิดเดียวเห็นมั๋ย แค่แก้จาก 100% เป็น 80% และก็เพิ่มแอททริบิวต์ align="center" เข้าไปใน tag <table> เพื่อให้ตำแหน่งของตารางอยู่ตรงกลางแค่นี้เอง หรือถ้ายังไม่ชอบใจก็ปรับแต่งเอาตามชอบใจเลยนะ

ผลที่ได้

      โอ..หนอมนุยษ์ความต้องการสิ้นสุดซะที่ใหน แล้วถ้าหากต้องการเปลี่ยนเมนูจากตัวหนังสือธรรมดา ๆ ให้เป็นรูปภาพเก๋ไก๋ ฉันจะทำอย่างไรเหล่า..ไม่ยากครับ ก็หัวข้อบอกอยู่แล้วว่า "ยำใหญ่" เราก็ต้องแปลงโฉมให้คนที่ทำธีมนี้อึ้งกิมกี่ไปเลยครับ ตามมา..

file index.template.php
ค้นหา -->>

โค๊ด: [Select]

// Dummy place holder, to set the height
echo'
<td align="center" class="menubg" height="30" width="20">
</td>';

// Show the [home] button.
echo'
<td align="center" class="menubg' , $current_action == 'home' ? '2' : '' , '">
<a href="', $scripturl, '">' , $txt[103] , '</a>
</td>';
// Show the [help] button.
echo'
<td align="center" class="menubg' , $current_action == 'help' ? '2' : '' , '">
<a href="', $scripturl, '?action=help">' , $txt[119] , '</a>
</td>';
// How about the [search] button?
if ($context['allow_search'])
echo'
<td align="center" class="menubg' , $current_action == 'search' ? '2' : '' , '">
<a href="', $scripturl, '?action=search">' , $txt[182] , '</a>
</td>';
// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo'
<td align="center" class="menubg' , $current_action == 'admin' ? '2' : '' , '">
<a href="', $scripturl, '?action=admin">' , $txt[2] , '</a>
</td>';
// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo'
<td align="center" class="menubg' , $current_action == 'profile' ? '2' : '' , '">
<a href="', $scripturl, '?action=profile">' , $txt[79] , '</a>
</td>';
// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo'
<td align="center" class="menubg' , $current_action == 'pm' ? '2' : '' , '">
<a href="', $scripturl, '?action=pm">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</a>
</td>';
// The [calendar]!
if ($context['allow_calendar'])
echo'
<td align="center" class="menubg' , $current_action == 'calendar' ? '2' : '' , '">
<a href="', $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a>
</td>';
// the [member] list button
if ($context['allow_memberlist'])
echo'
<td align="center" class="menubg' , $current_action == 'mlist' ? '2' : '' , '">
<a href="', $scripturl, '?action=mlist">' , $txt[331] , '</a>
</td>';

// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
echo'
<td align="center" class="menubg' , $current_action == 'login' ? '2' : '' , '">
<a href="', $scripturl, '?action=login">' , $txt[34] , '</a>
</td>';
// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo'
<td align="center" class="menubg' , $current_action == 'register' ? '2' : '' , '">
<a href="', $scripturl, '?action=register">' , $txt[97] , '</a>
</td>';
// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo'
<td align="center" class="menubg' , $current_action == 'logout' ? '2' : '' , '">
<a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a>
</td>';


// Dummy place holder, to end things
echo'
<td align="center" class="menubg" width="20">
</td>';
แก้เป็น -->>

โค๊ด: [Select]

// Show the start of the bottom section.
echo '
<td width="20" align="left" valign="middle">&nbsp;</td>';

// Show the [home] button.
echo'
<td width="70" align="center">
<a href="..index.php"><img src="' . $settings['images_url'] . '/home.png" onload="fixPNG(this)" title="' , $txt[103] , '" /></a>
</td>';

// Show the [forum] button.
echo'
<td width="70" align="center">
<a href="', $scripturl , '"><img src="' . $settings['images_url'] . '/forum.png" onload="fixPNG(this)" title="' , $txt[003] , '" /></a>
</td>';

// Show the [help] button.
echo'
<td width="70" align="center">
<a href="', $scripturl, '?action=help"><img src="' . $settings['images_url'] . '/help.png" onload="fixPNG(this)" title="' , $txt[119] , '" /></a>
</td>';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo'
<td width="70" align="center">
<a href="', $scripturl, '?action=admin"><img src="' . $settings['images_url'] . '/admin.png" onload="fixPNG(this)" title="' , $txt[2] , '" /></a>
</td>';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo'
<td width="70" align="center">
<a href="', $scripturl, '?action=usercp;u=',$ID_MEMBER,'"><img src="' . $settings['images_url'] . '/profile.png" onload="fixPNG(this)" title="' , $txt[79] , '" /></a>
</td>';

// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo'
<td width="70" align="center">
<a href="', $scripturl, '?action=pm"><img src="' . $settings['images_url'] . '/pm.png" onload="fixPNG(this)" title="' , $txt['pm_short'] , '" /></a>
</td>';

// The [calendar]!
if ($context['allow_calendar'])
echo'
<td width="70" align="center">
<a href="', $scripturl, '?action=calendar"><img src="' . $settings['images_url'] . '/calendar.png" onload="fixPNG(this)" title="' , $txt['calendar24'] , '" /></a>
</td>';

// the [member] list button
if ($context['allow_memberlist'])
echo'
<td width="70" align="center">
<a href="', $scripturl, '?action=mlist"><img src="' . $settings['images_url'] . '/members.png" onload="fixPNG(this)" title="' , $txt[331] , '" /></a>
</td>';


// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
echo'
<td width="70" align="center">
<a href="', $scripturl, '?action=login"><img src="' . $settings['images_url'] . '/login.png" onload="fixPNG(this)" title="' , $txt[34] , '" /></a>
</td>';


// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo'
<td width="70" align="center">
<a href="', $scripturl, '?action=register"><img src="' . $settings['images_url'] . '/register.png" onload="fixPNG(this)" title="' , $txt[97] , '" /></a>
</td>';


// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo'
<td width="70" align="center">
<a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '"><img src="' . $settings['images_url'] . '/logout.png" onload="fixPNG(this)" title="' , $txt[108] , '" /></a>
</td>';

// The end of tab section.
echo '
<td width="20" align="right">&nbsp;</td>';
file style.css
ค้นหา -->>

โค๊ด: [Select]

.menubar
{
width: 100%;
height: 30px;
}
แก้เป็น -->>

โค๊ด: [Select]

.menubar
{
width: 100%;
height: 55px;
padding: 5px 0 5px 0;
}

ผลที่ได้

      จากจุดสังเกตุเราจะเห็นว่ามีแถบสีเพิ่มขึ้นมา นั่นก็เป็นเพราะเราได้ขยายความสูงของ class menubar จากเดิม 30px เป็น 55px เพื่อที่จะให้สัมพันธ์กันกับขนาดของรูป เพราะในที่นี้ทำรูปเมนูขนาด 45px และกำหนดค่า padding บน 5px ล่าง 5px จึงเท่ากับ 55px พอดี
      
      เมื่อเราขยายขนาดของ  class menubar ใน style.css แล้ว แต่เรายังไม่ยังไม่ได้ขยายรูปที่นำมาเป็นพื้นหลังของ class menubar ในที่นี่ชื่อว่า menubar.gif อยู่ในโฟลเดอร์สีของแต่ละสี มีขนาด 30px เท่ากับที่กำหนดไว้ใน properties ก่อนการแก้ไข ดังนั้นเราจึงเปิดรูปนี้ขึ้นมาในโปรแกรม PhotoShop เพื่อขยายขนาดตามที่ต้องการ

      หรือท่านต้องการให้ภาพพื้นหลังของเมนูเป็นรูปแบบอย่างอื่นท่านก็สามารถสร้างขึ้นมาเองได้ตามความต้องการ ขนาดก็กำหนดให้สัมกันกับที่กำหนดไว้ใน style.css และกำหนดชื่อ-นามสกุลไฟล์ให้เหมือนเดิม โดยที่เราไม่ต้องแก้ไขชื่อ-นามสกุลไฟล์ใน style.css ให้ยุ่งยาก ก็จะได้รูปแบบพื้นหลังใหม่ตามต้องการ

      ด้วยภาพที่นำมาเป็นปุ่มเมนูในที่นี้เป็นไฟล์นามสกุล .png ซึ่งให้ความคมชัดกว่า .gif แต่จะมีปัญหาเรื่องความโปร่งใสของพื้นหลังถ้าหากแสดงในบราวเซอร์ Internet Explorer ตั้งแต่เวอร์ชั่น 6 ลงไป พื้นหลังจะไม่โปร่งใส เราจึงแก้ปัญหาด้วยการใช้ javaScript เข้าช่วยให้พื้นหลังโปร่งใส หากท่านสังเกตุโค๊ด ใน tag img หลังชื่อรูปจะมีคำสั่ง onload="fixPNG(this) นั่นคือการเรียก functions การซ่อมแซมไฟล์ .png จาก javaScript นั่นเอง

      วิธีแก้ไขสร้างไฟล์ pngfix.js แล้วนำไปไว้ใน Themes/default

โค๊ด: [Select]

/*

Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

if (is_ie5up && !is_ie7up && document.body.filters)
{
// Find the relevant images to act upon.
for (var i = 0; i < document.images.length; i++)
{
var img = document.images[i];
var imgName = img.src.toLowerCase();
if (img.className && img.className.indexOf("png_fix") != -1 && imgName.substr(imgName.length - 3, imgName.length) == "png")
{
var newImageHTML = '<span';
newImageHTML += img.id ? ' id="' + img.id + '"' : '';
newImageHTML += img.title ? ' title="' + img.title + '"' : (img.alt ? ' title="' + img.alt + '"' : '');
newImageHTML += img.className ? ' class="' + img.className + '"' : '';
var ImgStyle = 'display:inline-block;' + img.style.cssText + ';';
ImgStyle += img.parentElement.href ? 'cursor:hand;' : '';
if (img.width)
ImgStyle += 'width:' + img.width + 'px;height:' + img.height + 'px;';
ImgStyle += 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + img.src + '\', sizingMethod=\'scale\');';

newImageHTML += 'style="' + ImgStyle + '"';
newImageHTML += '></span>';
img.outerHTML = newImageHTML;

i--;
}
}
}
file index.template.php (ของธีมนี้)
ค้นหา -->>

โค๊ด: [Select]

<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/script.js?fin11"></script>
เพิ่มไว้หลัง -->

โค๊ด: [Select]

<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/pngfix.js"></script>
      สามารถแก้ไขความไม่โปร่งใสของไฟล์ .png ได้ทุกที่ภายในบอร์ด โดยการเพิ่ม onload="fixPNG(this) ไว้ใน tag img แบบนี้ <img src="' . $settings['images_url'] . '/home.png" onload="fixPNG(this)" title="' , $txt[103] , '" />

      และในการปรับแต่งเมนูครั้งนี้ผมได้เพิ่มปุ่มหน้าแรก(ของไซต์)เข้าไปด้วย โดยโค๊ดนี้

โค๊ด: [Select]

// Show the [home] button.
echo'
<td width="70" align="center">
<a href="..index.php"><img src="' . $settings['images_url'] . '/home.png" onload="fixPNG(this)" title="' , $txt[103] , '" /></a>
</td>';หากท่านไม่ได้ทำหน้าแรกก็สามารถลบออกไปได้เลย

      $txt[103] คือคำว่า "หน้าแรก" ใน Themes/default/languages/index.thai-utf8.php
      เมือเราเอาคำว่าหน้าแรกมาใช้ในหน้าแรก(ของไซต์)แล้ว ซึ่งแต่เดิมคือใช้กับหน้าแรกของบอร์ด เราจึงจำเป็นต้องสร้าง $txt ขึ้นมาใหม่เพื่อใช้กับหน้าแรกของบอร์ด ในที่นี้สร้าง $txt[003] = 'เว็บบอร์ด'; ไว้ใน Themes/default/languages/index.thai-utf8.php ถัดจาก $txt[103]

ผลที่ได้

      การปรับแต่งเมนูนี้ไม่ได้มีข้อความกำกับไว้ใต้รูป แต่ใช้เป็นคำอธิบายไว้ เมื่อเมาส์อยู่บนรูปก็จะแสดงคำอธิบาย หากท่านต้องการให้มีข้อความกำกับทำได้โดยแก้โค๊ดเป็นแบบนี้

โค๊ด: [Select]

// Show the [home] button.
echo'
<td width="70" align="center">
<a href="..index.php"><img src="' . $settings['images_url'] . '/home.png" onload="fixPNG(this)" /><br />' , $txt[103] , '</a>
</td>';

// Show the [forum] button.
echo'
<td width="70" align="center">
<a href="', $scripturl , '"><img src="' . $settings['images_url'] . '/forum.png" onload="fixPNG(this)" /><br />' , $txt[003] , '</a>
</td>';
      ลบแอททริบิวต์ title ออกไป เพิ่ม tag <บีอาร์ /> เข้าไปเพื่อขึ้นบรรทัดใหม่ และแสดงข้อความใต้รูป

file style.css
ค้นหา -->>

โค๊ด: [Select]

/* By default (td, body..) use verdana in black. */
body, td, th , tr
{
font-size: small;
font-family: verdana, sans-serif;
}
แก้เป็น -->>

โค๊ด: [Select]

/* By default (td, body..) use verdana in black. */
body, td, th , tr
{
font-size: 14px;
font-family: Tahoma, Verdana, Arial, "Arial Unicode MS", "Bitstream Vera Sans", "Lucida Grande", Helvetica, sans-serif;
}
      เพื่อกำหนดรูปแบบและขนาดตัวอักษร ที่อยู่ในแถวและคอลัมน์ของ body

ผลที่ได้

      เมื่อมีการขึ้นบรรทัดใหม่ผลที่ตามมาก็คือ ข้อความล้นออกมานอกขอบเขตของ class menubar การแก้ปัญหาก็จำลองไว้ให้แล้วข้างต้นจัดการแก้เอาเลยครับ..

[nopparut]

วางตรงใหนครับ มือใหม่ครับ ไม่รู้จริงๆ ครับ ขอบคุณมากครับ

 

[AREA51]

ขอบคุณไว้ก่อน เดี๋ยวมาอ่านรายละเอียดอีกที  แหล่มจริง ๆ .................  :flower:

[ปวดหัว]

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

[phoenix]

ขอบคุณครับผม

[monther]

ขอบคุณครับ

[ปลากัด]

มือใหม่ครับ ทำแล้วไม่ขึ้นครับ

[ปลากัด]

ไม่เข้าใจครับ
ที่อัพรูปไปไว้
Themes/dilbermc/images/   <<<<< ของผมเป็นแบบนี้ครับ Themes//images/images

ที่เอาไฟล์ไปไว้
AC_RunActiveContent.js อยู่ในโฟลเดอร์ Scripts โฟลเดอร์นี้เราไว้ในไดเร็คทอรีหลังของไซต์ [$root] หรือ public_html (Linux hosting) เพื่อสะดวกในการเรียนใช้งาน ในที่นี่เราเรียกใช้งานด้วยคำสั่ง <script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script> ให้สังเกตุจุด 2 จุดนะครับ จุดแรกแทน newbielink:http://www [nonactive]. จุดที่ 2 แทนชื่อไซต์ของเรา หากใช้แบบนี้แล้วเปลี่ยนไปใช้งานในที่อื่น ๆ เราก็ไม่ต้องเปลี่ยนชื่อเว็บให้เสียเวลาครับ

ของผมเป็นแบบนี้ครับ
/domains/ชื่อเว็บ/public_html/board/Themes/default
ผมต้องสร้าง folder Scripts ที่ /domains/Scripts/ชื่อเว็บ/public_html/board/Themes/default
หรือเปล่าครับ
รบกวนด้วยครับ มือใหม่จริงๆๆ ครับ