การปรับแต่ง Header (ส่วนหัวเว็บ) ให้เป็นแบบของเราเอง

สอบถามปัญหา อยากแก้ไข การแสดงผลของบอร์ด เช่นเปลี่ยน Logo โทนสี ทำลิงค์เมนูเพิ่มเติม และ อื่นๆ ที่เกี่ยวกับ Styles การแก้ไขรูป ปุ่ม สี การเปลี่ยนหน้าตาบอร์ด

Moderator: phpbb, mindphp, ผู้ดูแลกระดาน

salad
phpBBThailand Hero Member
phpBBThailand Hero Member
โพสต์: 157
ลงทะเบียนเมื่อ: 02 ก.ย. 2008, 23:01
ติดต่อ:

การปรับแต่ง Header (ส่วนหัวเว็บ) ให้เป็นแบบของเราเอง

โพสต์ โดย salad »

การปรับแต่ง 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)

โค้ด: เลือกทั้งหมด

    .headerbar {
       background: #ebebeb none repeat-x 0 0;
       color: #FFFFFF;
       margin-bottom: 4px;
       padding: 0 5px;
หลังจากข้อความให้ใส่
(After , Add)

โค้ด: เลือกทั้งหมด

       height: 100px ;
ลงไปครับ โดยเปลี่ยนค่า 100px นี้ให้เป็นค่าความสูงของภาพที่คุณนำมาใส่ครับ

3) จากนั้นเปิด styles/prosilver/theme/colours.css แล้วหาข้อความด้านล่าง
(Find)

โค้ด: เลือกทั้งหมด

    .headerbar {
       background-color: #12A3EB;
       background-image: url("{T_THEME_PATH}/images/bg_header.gif");
       color: #FFFFFF;
    }
ที่ bg_header.gif นั้นให้เปลี่ยนเป็นชื่อไฟล์ที่คุณอัพโหลดไว้ตอนแรกครับ


4) เปิดไฟล์ styles/prosilver/template/overall_header.html ขึ้นมา แล้วหาโค้ดด้านล่างครับ
(Find)

โค้ด: เลือกทั้งหมด

    <div id="site-description">
จากนั้นให้ใส่โค้ดต่อไปนี้ ก่อน โค้ดทีให้หาบรรทัดบนครับ
(Before , Add)

โค้ด: เลือกทั้งหมด

    <div style="height: 90px ;">
โดยค่า 90px นี้ให้เปลี่ยนป็น ( ค่าความสูงของภาพที่คุณอัพโหลด-10px ) นะครับ อย่างตอนแรกค่าความสูงภาพผมเป็น 100px ผมก็ใส่ค่าเป็น 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) แล้วลองดูซิครับว่าภาพ Header ของเว็บคุณเป้นตามที่คุณต้องการรึยังครับ ;)


หลัง จากที่คุณอัพไฟล์ทั้งหมดขึ้นไปแล้วหากหน้าเว็บของคุณยังไม่มีการเปลี่ยนแปลง ให้เข้าไปที่ 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>
เท่านี้ชื่อและรายละเอียดที่เราพิมพ์เป็น Text ไส้ก็จะหายไปไม่มาบังภาพหัวเว็บของเราแล้วครับ


หลัง จากที่คุณอัพไฟล์ทั้งหมดขึ้นไปแล้วหากหน้าเว็บของคุณยังไม่มีการเปลี่ยนแปลง ให้เข้าไปที่ 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 -->
หลังจากที่คุณอัพไฟล์ทั้งหมดขึ้นไปแล้ว หากหน้าเว็บของคุณยังไม่มีการเปลี่ยนแปลง ให้เข้าไปที่ Administrator Control Panel (ACP) ของคุณ แล้วไปที่แทป Styles เลือกที่ Templates แล้วคลิกที่ Refresh จากนั้นคลิกที่ Theme และคลิกที่ Refresh เช่นกันครับ ลองกลับมาดูที่หน้าเว็บ คุณก็จะพบว่าภาพหัวเว็บได้เปลี่ยนไปตามที่ต้องการแล้วครับ

.......................

ขอให้ทุกคนสนุกกับการแก้ phpBB3 ให้เป็นแบบของคุณเองนะครับ
ข้อความโดย barekadindern.com
JingJung
phpBBThailand Newbie
phpBBThailand Newbie
โพสต์: 2
ลงทะเบียนเมื่อ: 18 พ.ย. 2008, 09:41

Re: การปรับแต่ง Header (ส่วนหัวเว็บ) ให้เป็นแบบของเราเอง

โพสต์ โดย JingJung »

ผมอยากรู้ว่า Head ที่ใช้ต้องมีขนาดเท่าไหร่หรอคร๊าบ
salad
phpBBThailand Hero Member
phpBBThailand Hero Member
โพสต์: 157
ลงทะเบียนเมื่อ: 02 ก.ย. 2008, 23:01
ติดต่อ:

Re: การปรับแต่ง Header (ส่วนหัวเว็บ) ให้เป็นแบบของเราเอง

โพสต์ โดย salad »

JingJung เขียน:ผมอยากรู้ว่า Head ที่ใช้ต้องมีขนาดเท่าไหร่หรอคร๊าบ
จะมีขนาดความสูงเท่าไหร่ก้อได้ครับมันอยู่ที่ภาพที่เอามาใส่ ส่วนความกว้างก้อน่าจะไม่ต่ำกว่า 800 นะครับ เพราะ phpbb มันจะปรับขนาดความกว้างให้เองครับ
goldrich
phpBBThailand Newbie
phpBBThailand Newbie
โพสต์: 2
ลงทะเบียนเมื่อ: 31 ต.ค. 2008, 15:06

Re: การปรับแต่ง Header (ส่วนหัวเว็บ) ให้เป็นแบบของเราเอง

โพสต์ โดย goldrich »

ส่วนที่เราพิมภาษาไทยลงไปใน header ทำยังไงให้แสดงผลเป็นภาษาไทยครับ (ตรงส่วนประกาศของเวบ http://www.it-radio.in.th/)
salad
phpBBThailand Hero Member
phpBBThailand Hero Member
โพสต์: 157
ลงทะเบียนเมื่อ: 02 ก.ย. 2008, 23:01
ติดต่อ:

Re: การปรับแต่ง Header (ส่วนหัวเว็บ) ให้เป็นแบบของเราเอง

โพสต์ โดย salad »

goldrich เขียน:ส่วนที่เราพิมภาษาไทยลงไปใน header ทำยังไงให้แสดงผลเป็นภาษาไทยครับ (ตรงส่วนประกาศของเวบ http://www.it-radio.in.th/)
overall_header.html ตอนเซฟให้เลือก Encoding : UTF8

ที่ผมใช้อยู่นั่นเป็น MOD ครับ ชื่อ phpbb_notice

หา Mod ได้ที่ http://www.phpbbthailand.com/viewtopic.php?f=34&t=4011 คำว่าประกาศ จาง่ายกว่าครับ
jinntake2
phpBBThailand Newbie
phpBBThailand Newbie
โพสต์: 8
ลงทะเบียนเมื่อ: 08 ต.ค. 2008, 21:04

Re: การปรับแต่ง Header (ส่วนหัวเว็บ) ให้เป็นแบบของเราเอง

โพสต์ โดย jinntake2 »

มีวิธีที่จะทำให้ header มันล๊อกขนาดที่ 800 หรือ 1024 ไหมครับ
bondham
phpBBThailand Jr. Member
phpBBThailand Jr. Member
โพสต์: 16
ลงทะเบียนเมื่อ: 02 ธ.ค. 2008, 09:03

Re: การปรับแต่ง Header (ส่วนหัวเว็บ) ให้เป็นแบบของเราเอง

โพสต์ โดย bondham »

ผมลองทำตามข้อ 1 จะเปลิยนHeader ไฟล์ผมขนาด 800 x 100px ทำตามแล้วแต่มันยังไม่ขึ้นอ่ะ เข้าไปทำใน ACP แล้วด้วยครับ
wsnda
phpBBThailand Newbie
phpBBThailand Newbie
โพสต์: 1
ลงทะเบียนเมื่อ: 18 เม.ย. 2009, 16:39

Re: การปรับแต่ง Header (ส่วนหัวเว็บ) ให้เป็นแบบของเราเอง

โพสต์ โดย wsnda »

ของผมก็ทำตามหมดแล้วทำไมยังไม่เปลี่ยนอ่ะครับงงมากมาย

อันนี้ common.css

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
background: #ebebeb none repeat-x 0 0;
color: #FFFFFF;
margin-bottom: 4px;
padding: 0 5px;
height: 210px ;



อันนี้ colours.css

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
background-color: #12A3EB;
background-image: url("{T_THEME_PATH}/images/site_logo.gif");
color: #FFFFFF;



อันนี้ overall_header.html

<div style="height: 210px ;">
<div style="width: 1000px ;">
<div id="site-description">

<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>

ยังไงแล้วรบกวนผู้รู้ด้วยนะครับ เพราะทำตามหมดแล้วน่ะครับแต่ไม่ได้ ขอบคุณครับ
anne
phpBBThailand Newbie
phpBBThailand Newbie
โพสต์: 5
ลงทะเบียนเมื่อ: 01 ม.ค. 1970, 07:00
ติดต่อ:

Re: การปรับแต่ง Header (ส่วนหัวเว็บ) ให้เป็นแบบของเราเอง

โพสต์ โดย anne »

:lol: ทำได้แล้ว...มีประโยชน์มากมายเลยค่ะ

ขอบคุณนะคะที่เอาเทคนิคดีๆมาแบ่งปันกัน
SG14
phpBBThailand Jr. Member
phpBBThailand Jr. Member
โพสต์: 15
ลงทะเบียนเมื่อ: 24 มิ.ย. 2009, 15:46
ติดต่อ:

Re: การปรับแต่ง Header (ส่วนหัวเว็บ) ให้เป็นแบบของเราเอง

โพสต์ โดย SG14 »

ถ้าจะฟิคตามรูปนะคะ

ที่ไฟล์ common.css

โค้ด: เลือกทั้งหมด

.headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	margin-bottom: 4px;
	padding: 0 5px;
	height: 200px ;
}
ลบ ตรง background: #ebebeb none repeat-x 0 0; ออกแล้วใส่
background-attachment:fixed;
background-repeat:no-repeat;
ลงไปแทนคะ
กฏการใช้งานบอร์ด phpBBThailand.com
http://www.phpbbthailand.com/viewtopic.php?f=39&t=5940" onclick="window.open(this.href);return false;
jakri01
phpBBThailand Newbie
phpBBThailand Newbie
โพสต์: 8
ลงทะเบียนเมื่อ: 25 เม.ย. 2009, 11:25

Re: การปรับแต่ง Header (ส่วนหัวเว็บ) ให้เป็นแบบของเราเอง

โพสต์ โดย jakri01 »

wsnda เขียน:ของผมก็ทำตามหมดแล้วทำไมยังไม่เปลี่ยนอ่ะครับงงมากมาย

อันนี้ common.css

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
background: #ebebeb none repeat-x 0 0;
color: #FFFFFF;
margin-bottom: 4px;
padding: 0 5px;
height: 210px ;



อันนี้ colours.css

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
background-color: #12A3EB;
background-image: url("{T_THEME_PATH}/images/site_logo.gif");
color: #FFFFFF;



อันนี้ overall_header.html

<div style="height: 210px ;">
<div style="width: 1000px ;">
<div id="site-description">

<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>

ยังไงแล้วรบกวนผู้รู้ด้วยนะครับ เพราะทำตามหมดแล้วน่ะครับแต่ไม่ได้ ขอบคุณครับ
เอางี้ครับผมแนะนำแบบง่ายๆ
ไม่ต้องมานั่งแก้โค๊ตให้เลียเวลา

ไปที่โฟลเดอร์นี้ครับ

โค้ด: เลือกทั้งหมด

\styles\prosilver\theme\images
แล้วหาไปไฟล์ภาพที่ชื่อ

โค้ด: เลือกทั้งหมด

bg_header.gif
แล้วจัดการหารูป Header ไหม่ของเรามาทับซ่ะ header มันกว้างประมาณ 800 px เราก็เอารูปที่กว้าง 800 px ไปวางทับ
รูปเดิมแล้วแค่นี้ Header เราก็สวยขึ้นแล้ว

และยังเพิ่ม Logo web ของเราทับไปได้อีกครับ ตัวอย่างครับแต่ยังไม่เสร็จเลย http://www.one-car.co.cc
สังคมอยู่ได้ด้วยการแบ่งปัน วันนี้คุณให้อะไรกับสังคมบ้าง
wongsaprom
phpBBThailand Jr. Member
phpBBThailand Jr. Member
โพสต์: 11
ลงทะเบียนเมื่อ: 19 ก.ย. 2009, 08:35

Re: การปรับแต่ง Header (ส่วนหัวเว็บ) ให้เป็นแบบของเราเอง

โพสต์ โดย wongsaprom »

ผมเข้าไปเปลี่ยนรูปแต่ใช้ชื่อเดิมอย่างที่ว่านี่ละครับ ง่าย ไม่ต้องมานั่งงมโค้ด เครียดมาก เหอะ ๆ ๆ :-D
monkiiclub
phpBBThailand Jr. Member
phpBBThailand Jr. Member
โพสต์: 10
ลงทะเบียนเมื่อ: 26 ต.ค. 2009, 17:04

Re: การปรับแต่ง Header (ส่วนหัวเว็บ) ให้เป็นแบบของเราเอง

โพสต์ โดย monkiiclub »

หลายขั้นตอนจังเลย
Hellomydog.ueuo.com - เว็บบอร์ดชื้อขายสุนัข ?????
gungsakab
phpBBThailand Hero Member
phpBBThailand Hero Member
โพสต์: 147
ลงทะเบียนเมื่อ: 24 มิ.ย. 2010, 15:47
ติดต่อ:

Re: การปรับแต่ง Header (ส่วนหัวเว็บ) ให้เป็นแบบของเราเอง

โพสต์ โดย gungsakab »

ผมใส่ไฟล์ .swf เข้าไปทำไมมันไม่แสดงผลอะครับ หรือว่าต้องใช้ .gif อย่างเดียว ถ้างั้นพอจะมีวิธีอื่นอีกไหมครับ
ภาพประจำตัวสมาชิก
hmu111
phpBBThailand Newbie
phpBBThailand Newbie
โพสต์: 2
ลงทะเบียนเมื่อ: 13 พ.ค. 2011, 17:21

Re: การปรับแต่ง Header (ส่วนหัวเว็บ) ให้เป็นแบบของเราเอง

โพสต์ โดย hmu111 »

ขอบคุณมากครับ ต้องมาลื้อฟื้นใหม่เลย อยากกลับมาใช่เหมือนเดิม
ตอบกลับโพส

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 19 และ บุคคลทั่วไป 0 ท่าน