Home Webboard ArticlesKnowledges  
ข่าวประกาศ:

:: กติกา มารยาท ในการใช้งานเว็บบอร์ด ::
กรุณากรอกอีเมล์จริงในการสมัคร และรับอีเมล์ยืนยันเพื่อใช้งานในบอร์ด

ผู้เขียน หัวข้อ: การแก้ไขสีบาร์และเมนูของบอร์ด SMF  (อ่าน 32255 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ เซียวเหล่งนึ่งฯ

  • Global Moderator
  • *
  • กระทู้: 5535
  • เห็นด้วย&ขอบคุณ: 2134
    • SMFjusthost.com
การแก้ไขสีบาร์และเมนูของบอร์ด SMF

ประโยชน์  
บอร์ดที่ต้องการความสเถียร และไม่ต้องการเปิดช่องว่างให้พวกสคริปก่อกวน ป๊อปอัพต่างๆ รวมถึงแฮ็คเว็บทั้งหลาย
ส่วนใหญ่แล้วจะใช้ธีมมาตรฐาน  เพราะการใช้ธีมแปลกๆ ก็เป็นส่วนหนึ่งของปัญหาข้างต้น 
แต่เพื่อความสวยงามและเอกลักษณ์ของบอร์ดก็มักจะทำการแก้สีบาร์
ยกตัวอย่าง  บางเว็บเช่น
com-th.net, justusers.net

ส่วนที่จะต้องทำการแก้ไข
- ไฟล์รูปภาพใน Themes\default\images
- แก้ไขโค๊ดไฟล์ style.css


ธีมมาตรฐาน
ซึ่งปกติบาร์ของบอร์ดจะเป็นสีฟ้าตามมาตรฐานเอสเอ็มเอฟ 




ทีนี้เราจะเปลี่ยนสีของบาร์ให้เป็นสีส้มๆแกมเหลือง 
เมื่อเราแตกไฟล์ซิปติดตั้งเอสเอ็มเอส  ทำการติดตั้งเป็นที่เรียบร้อยแล้ว
ทำการก็อบปี้โฟลเดอร์  Themes\default\images แยกออกมาก่อน เพื่ออจะได้ไม่กระทบต่อต้นฉบับ

ทำการแก้สีไฟล์ภาพต่อไปนี้ด้วยโฟโตช็อป
catbg2.jpg
catbg.jpg
collapse.gif
expand.gif
helptopics.gif
maintab_active_back.gif
maintab_active_first.gif
maintab_active_last.gif
maintab_back.gif
maintab_first.gif
maintab_last.gif
mirrortab_active_back.gif
mirrortab_active_first.gif
mirrortab_active_last.gif
mirrortab_back.gif
mirrortab_first.gif
mirrortab_last.gif
modtab_back.gif
modtab_first.gif
modtab_last.gif
titlebg.jpg
topbg.jpg
upshrink2.gif
upshrink.gif

ตัวอย่างการแก้สีด้วยโฟโตช็อป

ไฟล์ส่วนใหญ่ นามสกุล.gif ซึ่งเป็นโหมดไฟล์อินเด็ก จะไม่สามารถทำการแก้ไขได้ 
เราจะต้องทำการเปลี่ยนโหมดไฟล์เสียก่อน   อิมเมจ -- โหมด -- อาจีบี









ตอนที่เลือกเซฟนั้น อย่าเปลี่ยนชื่อไฟล์โดยเด็ดขาด
เมื่อเราแก้ไฟล์ทั้งหมดแล้วจะได้หน้าตาประมาณนี้



จากนั้นทำการอัพโหลดไฟล์ทั้งหมดที่แก้ไข  ไปทับไว้ที่    Themes\default\images



เข้าไปดูบอร์ดของเราทางเว็บเบราว์เซอร์  สีของบอร์ดจะเปลี่ยนไป  ถ้าไม่เปลี่ยนให้กด คอนโทรล+เอฟ5

ถึงสีบอร์ดจะเปลี่ยนแต่เมื่อลองพรีวิวแล้วยังมีหลายอย่างที่ขัดกับสีบาร์ ไม่ได้อยู่ในโทนสีเดียวกัน
เช่น  พื้นหลัง พื้นกรอบ ตัวหนังสือ  เส้น 



เหล่านี้สามารถแก้ไขได้จากไฟล์ style.css

ตามนี้
ขอถามเพิ่มครับเกี่ยวกับเปลี่ยนสี theme บอร์ด  (LittleCat)
http://www.justusers.net/forum/index.php?topic=386.0

เว็บแนะนำโค๊ดสี
http://www.colorschemer.com/online.html

เมื่อเราแก้ไขไฟล์ style.css  เป็นที่เรียบร้อยแล้ว
จะได้หน้าตาบอร์ดตามเฉดสีที่เราต้องการ





« แก้ไขครั้งสุดท้าย: 30, มิถุนายน 2008, 07:09:58 PM โดย เซียวเหล่งนึ่ง แห่งสำนักสุสานโบราณ »



ออฟไลน์ ff-Mobile

  • Ju
  • *
  • กระทู้: 26
  • เห็นด้วย&ขอบคุณ: 8
  • เพศ: ชาย
Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
« ตอบกลับ #1 เมื่อ: 01, กรกฎาคม 2008, 11:18:22 AM »
เยี่ยมทุ่มทุนสร้างมากๆๆ
บอร์ดโทรศัพท์มือถือ ดาวน์โหลดธีม,ทรูโทน,โปรแกรมมือถือ,วอลเปเปอร์ ฯลฯ ดาวโหลดการ์ตูน โปรเด็ดๆ
มาช่วยกันสร้างสังคมให้น่าอยู่ยิ่งขึ้น ff-Mobile.com

kaikimao

  • บุคคลทั่วไป
Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
« ตอบกลับ #2 เมื่อ: 01, กรกฎาคม 2008, 04:25:59 PM »
ของผมใช้ปรับ Hue (Ctrl-U) หรือไม่ก็ Color Balance (Ctrl-B) บน PS แล้ว Define เป็น Action เลย

กดโช๊ะๆ ได้ทุกไฟล์  :shocked: (ทำงานแบบเหมาโหล  :cheesy: )

ทำตามขั้นตอนประมาณนี้ (ไม่บอกการสร้างให้เป็น Action อยากให้ทดลองทำดู)

- เปิดไฟล์ด้านบนขึ้นมา
- กด Ctrl-U หรือ Ctrl-b เลื่อน slider แต่ละตัวให้ได้ค่าสีที่ต้องการ กด OK
- ถ้าไม่ทำเป็น Action ก็จำค่าแต่ละตัวไว้ ไฟล์อื่นๆ ตั้งตามกัน
- ถ้าทำเป็น Action ก็ไม่ต้องจำ กดโช๊ะๆๆ รองานเสร็จเลย  :shocked:

ก็แค่อีกวิธีการหนึ่งนะครับ แอพพลายไปใช้ได้ เรื่อยๆ เปื่อยๆ  :rolleyes:

ออฟไลน์ เซียวเหล่งนึ่งฯ

  • Global Moderator
  • *
  • กระทู้: 5535
  • เห็นด้วย&ขอบคุณ: 2134
    • SMFjusthost.com
Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
« ตอบกลับ #3 เมื่อ: 01, กรกฎาคม 2008, 07:47:09 PM »
ตามวิธีท่านไก่ก็ดี  ใช้แอ็คชั่นไปเลย

ออฟไลน์ naidb

  • Ju
  • *
  • กระทู้: 173
  • เห็นด้วย&ขอบคุณ: 7
Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
« ตอบกลับ #4 เมื่อ: 02, กรกฎาคม 2008, 05:36:41 PM »
ขอบคุณมากครับ :smiley: :smiley:

ครับ

  • บุคคลทั่วไป
Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
« ตอบกลับ #5 เมื่อ: 03, ธันวาคม 2008, 02:15:01 AM »
ขอบคุณท่านผู้ให้ความรู้ครับ ลองแล้วได้ผลครับ :razz:
ท่านเซียวเหล่งนึ่ง แห่งสำนักสุสานโบราณ
ท่านไก่ขี้เมา
ขอบคุณครับ :adore:

ออฟไลน์ ครับครับ

  • Ju
  • *
  • กระทู้: 31
  • เห็นด้วย&ขอบคุณ: 2
    • โหลดคลิป คลิปมือถือ คลิปขำๆ คลิปแปลกๆ โหลดอะไรดอทคอม
Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
« ตอบกลับ #6 เมื่อ: 06, ธันวาคม 2008, 12:57:46 AM »
ขอบคุณกระทู้นี้และผู้ตอบทุกท่านครับ :adore: :adore:

SMF

  • บุคคลทั่วไป
Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
« ตอบกลับ #7 เมื่อ: 06, กุมภาพันธ์ 2009, 04:18:55 PM »
ทำตามขึ้นตอนทุกอย่างแล้วครับแต่ว่าสีไม่เปลี่ยนครับ

แก้ไขอย่างไรครับ

ออฟไลน์ nikoch

  • Ju
  • *
  • กระทู้: 34
  • เห็นด้วย&ขอบคุณ: 3
Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
« ตอบกลับ #8 เมื่อ: 06, กุมภาพันธ์ 2009, 07:06:51 PM »
ทุกขั้นตอนที่แนะนำ ทำเหมือนทุกอย่างค่ะ
แต่ว่าสีไม่ขึ้น จะลองไปปรับแต่งที่ style.css
แต่ปรับไม่ถูกค่ะ แนะนำด้วยค่ะ

ขอบคุณมากน่ะค่ะ

kaikimao

  • บุคคลทั่วไป
Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
« ตอบกลับ #9 เมื่อ: 06, กุมภาพันธ์ 2009, 07:46:48 PM »
ทุกขั้นตอนที่แนะนำ ทำเหมือนทุกอย่างค่ะ
แต่ว่าสีไม่ขึ้น จะลองไปปรับแต่งที่ style.css
แต่ปรับไม่ถูกค่ะ แนะนำด้วยค่ะ


ลองเปิด style.css ด้วย Dream หรือโปรแกรมที่ถนัด (ถ้าเปิดด้วย Notepad จะอ่านยากหน่อย เพราะไม่ตัดบรรทัดให้)

ลองไล่ตามทีละส่วนๆ  ยกตัวอย่างมาให้นิดนึง
โค๊ด: [Select]
a:link
{
color: #476C8E;
text-decoration: none;
}
a:visited
{
color: #476C8E;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
body
{
background-color: #E5E5E8;
margin: 0px;
padding: 12px 30px 4px 30px;
}

a:link = รายละเอียดของลิ้งค์
a:visited  = รายละเอียดของลิงค์ ที่เคยกดเข้าไปดูแล้ว
a:hover = รายละเอียดของลิ้งค์ เวลาเลื่อนเม้าส์ไว้ด้านบน
body = เนื้อหาทั่วไป

อื่นๆ ก็จะคล้ายๆ เวลาที่เราทำเว็บ html ธรรมดา เช่น table, td, th , tr ,input, button, etc. อะไรเป็นอะไร ลองศึกษาเพิ่มดู

รายละเอียดของสิ่งที่เรากำหนดไปตามชื่อข้างต้น จะอยู่ในลักษณะ
โค๊ด: [Select]
ชื่อ
{
   ค่าที่1 : ค่าที่กำหนด ;
   ค่าที่2 : ค่าที่กำหนด ;
}

เช่น
โค๊ด: [Select]
body, td, th , tr
{
color: #000000;
font-size: small;
font-family: verdana, sans-serif;
}
a img
{
border: 0;
}

อธิบาย
body, td, th , tr (ข้อความธรรมดา, ข้อความในตาราง)
หากเราใช้ CSS อันนี้จะเหมือนกับเรากำหนดค่าของอักษรโดย HTML ว่า

<font color="#000000" face="Verdana, Arial, Helvetica, sans-serif" size="1">ตัวหนังสือ</font>

a img
หากเราใช้ CSS อันนี้จะเหมือนกับเรากำหนดค่าของรูปภาพที่เป็นลิ้งค์โดย HTML ว่า

<img src="ชื่อรูป" border="0">

ตัวอย่าง
style.css
โค๊ด: [Select]
body, td, th , tr
{
color: #0000ff;
font-size: small;
font-family: verdana, sans-serif;
}
test.html
โค๊ด: [Select]
....
<link rel="stylesheet" type="text/css" href="style.css">
....
<body>
สวัสดีครับ
</body>
....
....


ตัวอย่างหน้่าปกติ ก่อนใส่บรรทัด <link href="style.css" ...... >


ตัวอย่างหน้่าปกติ หลังใส่บรรทัด <link href="style.css" ...... >


อื่นๆ ลองแก้ไขค่า, บันทึก, ทดสอบ จะได้รู้ว่าเปลี่ยนตรงไหน แล้วผลที่ได้จะไปอยู่ที่ไหน นะครับ (เก็บไฟล์เก่าไว้ก่อนก็ได้ ถ้าไม่แน่ใจ)
ย้ำว่า ควรต้องทดลองแก้ไขก่อน จะได้รู้

หากยังไม่ได้เริ่มก้าวแรกไม่มีทางไปถึงจุดหมาย เด้อ...

ออฟไลน์ nikoch

  • Ju
  • *
  • กระทู้: 34
  • เห็นด้วย&ขอบคุณ: 3
Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
« ตอบกลับ #10 เมื่อ: 06, กุมภาพันธ์ 2009, 08:22:02 PM »
ขอบคุณมากน่ะค่ะที่แนะนำค่ะ จะลองทำดูน่ะค่ะ

ออฟไลน์ เซียวเหล่งนึ่งฯ

  • Global Moderator
  • *
  • กระทู้: 5535
  • เห็นด้วย&ขอบคุณ: 2134
    • SMFjusthost.com
Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
« ตอบกลับ #11 เมื่อ: 06, กุมภาพันธ์ 2009, 08:27:45 PM »
ส่วนพวกสีบารืนั่น ถ้าเปลี่ยนแล้วก็ต้องอัพไปทับให้ถูกที่ ถูกธีม ถูกโฟลเดอร์ด้วยนะ

ออฟไลน์ construction

  • ตามหาความรู้
  • You Are Just Member
  • ******
  • กระทู้: 272
  • เห็นด้วย&ขอบคุณ: 23
  • โยธาภูธรคอนหวัน
    • อบต.โพธิ์ประสาท
Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
« ตอบกลับ #12 เมื่อ: 28, มีนาคม 2009, 09:40:57 AM »
อ้างถึง
ถ้าทำเป็น Action ก็ไม่ต้องจำ กดโช๊ะๆๆ รองานเสร็จเลย 


ทำไงครับ

kaikimao

  • บุคคลทั่วไป
Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
« ตอบกลับ #13 เมื่อ: 28, มีนาคม 2009, 09:54:04 AM »
อ้างถึง
ถ้าทำเป็น Action ก็ไม่ต้องจำ กดโช๊ะๆๆ รองานเสร็จเลย 


ทำไงครับ


ค้นหาจาก Google
http://www.google.co.th/search?hl=th&q=photoshop+action

ผลลัพท์ที่คิดว่าเข้าใจง่ายที่สุด
http://topicstock.pantip.com/camera/topicstock/O3008891/O3008891.html

ขอให้สนุกกับการสร้าง+ใช้ Action ครับ
 :smitten-1:

ออฟไลน์ กฤติยา

  • You Are Just Member
  • ******
  • กระทู้: 757
  • เห็นด้วย&ขอบคุณ: 193
  • หวงเหมือนไล่ ให้เหมือนเรียก
Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
« ตอบกลับ #14 เมื่อ: 23, เมษายน 2011, 11:38:41 AM »

body
{
   background-color: #E5E5E8;
   margin: 0px;
   padding: 12px 30px 4px 30px;
}


สวนนี้คือ ตัวแบล๊กกราวน์ไหม

 

Sitemap 1 2 3 4 5 6 7 8 9 10 
Back to top