การปรับแต่ง Header (ส่วนหัวเว็บ) ให้เป็นแบบของเราเอง
โพสต์แล้ว: 14 พ.ย. 2008, 06:22
การปรับแต่ง Header (ส่วนหัวเว็บ) ให้เป็นแบบของเราเอง
ตัวอย่างการเปลี่ยนหัวเว็บที่ผมทำ ดูได้ที่ 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)
หลังจากข้อความให้ใส่
(After , Add)
ลงไปครับ โดยเปลี่ยนค่า 100px นี้ให้เป็นค่าความสูงของภาพที่คุณนำมาใส่ครับ
3) จากนั้นเปิด styles/prosilver/theme/colours.css แล้วหาข้อความด้านล่าง
(Find)
ที่ bg_header.gif นั้นให้เปลี่ยนเป็นชื่อไฟล์ที่คุณอัพโหลดไว้ตอนแรกครับ
4) เปิดไฟล์ styles/prosilver/template/overall_header.html ขึ้นมา แล้วหาโค้ดด้านล่างครับ
(Find)
จากนั้นให้ใส่โค้ดต่อไปนี้ ก่อน โค้ดทีให้หาบรรทัดบนครับ
(Before , Add)
โดยค่า 90px นี้ให้เปลี่ยนป็น ( ค่าความสูงของภาพที่คุณอัพโหลด-10px ) นะครับ อย่างตอนแรกค่าความสูงภาพผมเป็น 100px ผมก็ใส่ค่าเป็น 90px
จากนั้นในไฟล์เดียวกันหาโค้ดนี้ครับ
(Find)
แล้วให้ใส่แทกนี้ลงไปหลังจากโค้ดข้างบนจบครับ
(After , Add)
แล้วลองดูซิครับว่าภาพ Header ของเว็บคุณเป้นตามที่คุณต้องการรึยังครับ
หลัง จากที่คุณอัพไฟล์ทั้งหมดขึ้นไปแล้วหากหน้าเว็บของคุณยังไม่มีการเปลี่ยนแปลง ให้เข้าไปที่ AdministratorControl Panel (ACP) ของคุณ แล้วไปที่แทป Styles เลือกที่ Templatesแล้วคลิกที่ Refresh จากนั้นคลิกที่ Theme และคลิกที่ Refresh เช่นกันครับลองกลับมาดูที่หน้าเว็บคุณก็จะพบว่าภาพหัวเว็บได้เปลี่ยนไปตาม ที่ต้องการแล้วครับ
________________________________________________________________________________________________________
2. นำโลโกของเว็บไซต์ออกไป
ถ้าเราเปลี่ยนหัวเป็นแบบของเราแล้วจะมีโลโกที่ติดมากะธีมหลายคนก้อคงไม่อยากให้มาทับโลโก้ของเราเอง เรามาลบส่วนนี้ออกไปดีกว่าซึ่งวิธีก็ทำได้ง่ายๆครับโดย
เปิดไฟล์ Open styles/prosilver/template/overall_header.html ขึ้นมาแล้วค้นหาโค้ด
จากนั้นทำการลบมันทิ้งไปแล้วอัพขึ้นไปไว้ทับของเดิมเป็นอันเสร็จครับผม
หลัง จากที่คุณอัพไฟล์ทั้งหมดขึ้นไปแล้วหากหน้าเว็บของคุณยังไม่มีการเปลี่ยนแปลง ให้เข้าไปที่ AdministratorControl Panel (ACP) ของคุณ แล้วไปที่แทป Styles เลือกที่ Templatesแล้วคลิกที่ Refresh จากนั้นคลิกที่ Theme และคลิกที่ Refresh เช่นกันครับลองกลับมาดูที่หน้าเว็บคุณก็จะพบว่าภาพหัวเว็บได้เปลี่ยนไปตาม ที่ต้องการแล้วครับ
________________________________________________________________________________________________________
3. นำชื่อและรายละเอียดเว็บตรงส่วนหัวออกไป
ปกติ แล้ว ชื่อตรงส่วนหัวเว็บจะขึ้นมาเป็น Text ให้เสมอ หากเรามีชื่อและโลโกอยู่บนภาพของเราแล้วส่วนนี้ก็ไม่จำเป้นอีกต่อไปครับ ลบเลยดีกว่า
ที่ไฟล์ styles/prosilver/template/overall_header.html เหมือนเดิมครับ ให้ทำการค้นหาโค้ดด้านล่างนี้แล้วลบซะ (Find , Delete)
เท่านี้ชื่อและรายละเอียดที่เราพิมพ์เป็น Text ไส้ก็จะหายไปไม่มาบังภาพหัวเว็บของเราแล้วครับ
หลัง จากที่คุณอัพไฟล์ทั้งหมดขึ้นไปแล้วหากหน้าเว็บของคุณยังไม่มีการเปลี่ยนแปลง ให้เข้าไปที่ AdministratorControl Panel (ACP) ของคุณ แล้วไปที่แทป Styles เลือกที่ Templatesแล้วคลิกที่ Refresh จากนั้นคลิกที่ Theme และคลิกที่ Refresh เช่นกันครับลองกลับมาดูที่หน้าเว็บคุณก็จะพบว่าภาพหัวเว็บได้เปลี่ยนไปตาม ที่ต้องการแล้วครับ
________________________________________________________________________________________________________
4. นำ search box ออกไป
ไม่ว่าจะมีประโยชน์หรือไม่มีประโยชน์ บางคนก็อาจจะไม่ชอบที่มันมาบังภาพหัวเว็บของเราครับ เหมือนเช่นเคย เปิดไฟล์ overall_header.html ขึ้นมา แล้วหาโค้ดด้านล่างนี้แล้วลบมันทิ้งครับ (Find , Delete)
หลังจากที่คุณอัพไฟล์ทั้งหมดขึ้นไปแล้ว หากหน้าเว็บของคุณยังไม่มีการเปลี่ยนแปลง ให้เข้าไปที่ Administrator Control Panel (ACP) ของคุณ แล้วไปที่แทป Styles เลือกที่ Templates แล้วคลิกที่ Refresh จากนั้นคลิกที่ Theme และคลิกที่ Refresh เช่นกันครับ ลองกลับมาดูที่หน้าเว็บ คุณก็จะพบว่าภาพหัวเว็บได้เปลี่ยนไปตามที่ต้องการแล้วครับ
.......................
ขอให้ทุกคนสนุกกับการแก้ phpBB3 ให้เป็นแบบของคุณเองนะครับ
ข้อความโดย barekadindern.com
ตัวอย่างการเปลี่ยนหัวเว็บที่ผมทำ ดูได้ที่ 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