หน้า 1 จากทั้งหมด 2

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

โพสต์แล้ว: 14 พ.ย. 2008, 06:22
โดย 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)

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

    </div>


แล้วลองดูซิครับว่าภาพ 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

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

โพสต์แล้ว: 19 พ.ย. 2008, 11:26
โดย JingJung
ผมอยากรู้ว่า Head ที่ใช้ต้องมีขนาดเท่าไหร่หรอคร๊าบ

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

โพสต์แล้ว: 19 พ.ย. 2008, 19:22
โดย salad
JingJung เขียน:ผมอยากรู้ว่า Head ที่ใช้ต้องมีขนาดเท่าไหร่หรอคร๊าบ


จะมีขนาดความสูงเท่าไหร่ก้อได้ครับมันอยู่ที่ภาพที่เอามาใส่ ส่วนความกว้างก้อน่าจะไม่ต่ำกว่า 800 นะครับ เพราะ phpbb มันจะปรับขนาดความกว้างให้เองครับ

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

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

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

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


overall_header.html ตอนเซฟให้เลือก Encoding : UTF8

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

หา Mod ได้ที่ viewtopic.php?f=34&t=4011 คำว่าประกาศ จาง่ายกว่าครับ

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

โพสต์แล้ว: 05 ธ.ค. 2008, 18:42
โดย jinntake2
มีวิธีที่จะทำให้ header มันล๊อกขนาดที่ 800 หรือ 1024 ไหมครับ

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

โพสต์แล้ว: 13 ม.ค. 2009, 17:53
โดย bondham
ผมลองทำตามข้อ 1 จะเปลิยนHeader ไฟล์ผมขนาด 800 x 100px ทำตามแล้วแต่มันยังไม่ขึ้นอ่ะ เข้าไปทำใน ACP แล้วด้วยครับ

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

โพสต์แล้ว: 18 เม.ย. 2009, 16:48
โดย 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>

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

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

โพสต์แล้ว: 23 เม.ย. 2009, 15:53
โดย anne
:lol: ทำได้แล้ว...มีประโยชน์มากมายเลยค่ะ

ขอบคุณนะคะที่เอาเทคนิคดีๆมาแบ่งปันกัน

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

โพสต์แล้ว: 27 มิ.ย. 2009, 20:23
โดย 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;
ลงไปแทนคะ

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

โพสต์แล้ว: 29 มิ.ย. 2009, 21:56
โดย 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

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

โพสต์แล้ว: 24 ก.ย. 2009, 07:23
โดย wongsaprom
ผมเข้าไปเปลี่ยนรูปแต่ใช้ชื่อเดิมอย่างที่ว่านี่ละครับ ง่าย ไม่ต้องมานั่งงมโค้ด เครียดมาก เหอะ ๆ ๆ :-D

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

โพสต์แล้ว: 30 ต.ค. 2009, 03:43
โดย monkiiclub
หลายขั้นตอนจังเลย

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

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

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

โพสต์แล้ว: 13 พ.ค. 2011, 17:31
โดย hmu111
ขอบคุณมากครับ ต้องมาลื้อฟื้นใหม่เลย อยากกลับมาใช่เหมือนเดิม