ตัวอย่างการเปลี่ยนหัวเว็บที่ผมทำ ดูได้ที่ http://www.it-radio.in.th/index.php ครับผม
ผมก้อคนนึงที่เคยพยายามเปลี่ยน Header ของ phpBB3 อยู่หลายที แต่ไม่สำเร็จจนได้ไปพบกับบทความหนึ่งที่เป็นภาษาอังกฤษเข้า เลยเอามาโพสไว้สำหรับผู้ที่สนใจจะเปลี่ยนแปลงหน้าตาของหัวเว็บตัวเอง ผมทดสอบใน style แบบ Prosilver ครับ
--------ก่อนการปรับแต่ง คุณควร back Up ไฟล์ที่ต้องแก้ไขเอาไว้ซะก่อนนะครับ----------
สิ่งที่เราต้องทำมีทั้งหมด 4 ขั้นตอนนั่นคือ
1. เพิ่มรูปภาพที่คุณต้องการไว้ในส่วน Header หรือส่วนหัวของเว็บ
2. นำโลโกของเว็บไซต์ออกไป
3. นำชื่อและรายละเอียดเว็บตรงส่วนหัวออกไป
4. นำ search box ออกไป
1. เพิ่มรูปภาพที่คุณต้องการไว้ในส่วน Header หรือส่วนหัวของเว็บ
1) ก่อนที่จะทำการแก้ไข ให้อัพโหลดภาพที่คุณต้องการจะทำเป็นหัวเว็บไปไว้ที่โฟลเดอ styles/prosilver/theme/images/ ซะก่อนครับ
2) จากนั้นเปิดไฟล์ styles/prosilver/theme/common.css ขึ้นมาครับผม (ใช้โปรแกรม Edit plus หรือ Dream Weaver ก็ได้ครับ)
แล้วให้ทำการค้นหาข้อความด้านล่าง
(Find)
โค้ด: เลือกทั้งหมด
.headerbar {
background: #ebebeb none repeat-x 0 0;
color: #FFFFFF;
margin-bottom: 4px;
padding: 0 5px;
(After , Add)
โค้ด: เลือกทั้งหมด
height: 100px ;
3) จากนั้นเปิด styles/prosilver/theme/colours.css แล้วหาข้อความด้านล่าง
(Find)
โค้ด: เลือกทั้งหมด
.headerbar {
background-color: #12A3EB;
background-image: url("{T_THEME_PATH}/images/bg_header.gif");
color: #FFFFFF;
}
4) เปิดไฟล์ styles/prosilver/template/overall_header.html ขึ้นมา แล้วหาโค้ดด้านล่างครับ
(Find)
โค้ด: เลือกทั้งหมด
<div id="site-description">
(Before , Add)
โค้ด: เลือกทั้งหมด
<div style="height: 90px ;">
จากนั้นในไฟล์เดียวกันหาโค้ดนี้ครับ
(Find)
โค้ด: เลือกทั้งหมด
<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
<!-- ENDIF -->
แล้วให้ใส่แทกนี้ลงไปหลังจากโค้ดข้างบนจบครับ
(After , Add)
โค้ด: เลือกทั้งหมด
</div>
หลัง จากที่คุณอัพไฟล์ทั้งหมดขึ้นไปแล้วหากหน้าเว็บของคุณยังไม่มีการเปลี่ยนแปลง ให้เข้าไปที่ AdministratorControl Panel (ACP) ของคุณ แล้วไปที่แทป Styles เลือกที่ Templatesแล้วคลิกที่ Refresh จากนั้นคลิกที่ Theme และคลิกที่ Refresh เช่นกันครับลองกลับมาดูที่หน้าเว็บคุณก็จะพบว่าภาพหัวเว็บได้เปลี่ยนไปตาม ที่ต้องการแล้วครับ
________________________________________________________________________________________________________
2. นำโลโกของเว็บไซต์ออกไป
ถ้าเราเปลี่ยนหัวเป็นแบบของเราแล้วจะมีโลโกที่ติดมากะธีมหลายคนก้อคงไม่อยากให้มาทับโลโก้ของเราเอง เรามาลบส่วนนี้ออกไปดีกว่าซึ่งวิธีก็ทำได้ง่ายๆครับโดย
เปิดไฟล์ Open styles/prosilver/template/overall_header.html ขึ้นมาแล้วค้นหาโค้ด
โค้ด: เลือกทั้งหมด
<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
จากนั้นทำการลบมันทิ้งไปแล้วอัพขึ้นไปไว้ทับของเดิมเป็นอันเสร็จครับผม
หลัง จากที่คุณอัพไฟล์ทั้งหมดขึ้นไปแล้วหากหน้าเว็บของคุณยังไม่มีการเปลี่ยนแปลง ให้เข้าไปที่ AdministratorControl Panel (ACP) ของคุณ แล้วไปที่แทป Styles เลือกที่ Templatesแล้วคลิกที่ Refresh จากนั้นคลิกที่ Theme และคลิกที่ Refresh เช่นกันครับลองกลับมาดูที่หน้าเว็บคุณก็จะพบว่าภาพหัวเว็บได้เปลี่ยนไปตาม ที่ต้องการแล้วครับ
________________________________________________________________________________________________________
3. นำชื่อและรายละเอียดเว็บตรงส่วนหัวออกไป
ปกติ แล้ว ชื่อตรงส่วนหัวเว็บจะขึ้นมาเป็น Text ให้เสมอ หากเรามีชื่อและโลโกอยู่บนภาพของเราแล้วส่วนนี้ก็ไม่จำเป้นอีกต่อไปครับ ลบเลยดีกว่า
ที่ไฟล์ styles/prosilver/template/overall_header.html เหมือนเดิมครับ ให้ทำการค้นหาโค้ดด้านล่างนี้แล้วลบซะ (Find , Delete)
โค้ด: เลือกทั้งหมด
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
หลัง จากที่คุณอัพไฟล์ทั้งหมดขึ้นไปแล้วหากหน้าเว็บของคุณยังไม่มีการเปลี่ยนแปลง ให้เข้าไปที่ AdministratorControl Panel (ACP) ของคุณ แล้วไปที่แทป Styles เลือกที่ Templatesแล้วคลิกที่ Refresh จากนั้นคลิกที่ Theme และคลิกที่ Refresh เช่นกันครับลองกลับมาดูที่หน้าเว็บคุณก็จะพบว่าภาพหัวเว็บได้เปลี่ยนไปตาม ที่ต้องการแล้วครับ
________________________________________________________________________________________________________
4. นำ search box ออกไป
ไม่ว่าจะมีประโยชน์หรือไม่มีประโยชน์ บางคนก็อาจจะไม่ชอบที่มันมาบังภาพหัวเว็บของเราครับ เหมือนเช่นเคย เปิดไฟล์ overall_header.html ขึ้นมา แล้วหาโค้ดด้านล่างนี้แล้วลบมันทิ้งครับ (Find , Delete)
โค้ด: เลือกทั้งหมด
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="search-box">
<form action="{U_SEARCH}" method="post" id="search">
<fieldset>
<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
<input class="button2" value="{L_SEARCH}" type="submit" /><br />
<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
<!-- ENDIF -->
.......................
ขอให้ทุกคนสนุกกับการแก้ phpBB3 ให้เป็นแบบของคุณเองนะครับ
ข้อความโดย barekadindern.com