การแก้ไขสีบาร์และเมนูของบอร์ด SMF

[เซียวเหล่งนึ่งฯ]

การแก้ไขสีบาร์และเมนูของบอร์ด 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  เป็นที่เรียบร้อยแล้ว
จะได้หน้าตาบอร์ดตามเฉดสีที่เราต้องการ

[ff-Mobile]

เยี่ยมทุ่มทุนสร้างมากๆๆ

[kaikimao]

ของผมใช้ปรับ Hue (Ctrl-U) หรือไม่ก็ Color Balance (Ctrl-B) บน PS แล้ว Define เป็น Action เลย

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

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

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

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

[เซียวเหล่งนึ่งฯ]

ตามวิธีท่านไก่ก็ดี  ใช้แอ็คชั่นไปเลย

[naidb]

ขอบคุณมากครับ

[ครับ]

ขอบคุณท่านผู้ให้ความรู้ครับ ลองแล้วได้ผลครับ
ท่านเซียวเหล่งนึ่ง แห่งสำนักสุสานโบราณ
ท่านไก่ขี้เมา
ขอบคุณครับ

[ครับครับ]

ขอบคุณกระทู้นี้และผู้ตอบทุกท่านครับ

[SMF]

ทำตามขึ้นตอนทุกอย่างแล้วครับแต่ว่าสีไม่เปลี่ยนครับ

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

[nikoch]

ทุกขั้นตอนที่แนะนำ ทำเหมือนทุกอย่างค่ะ
แต่ว่าสีไม่ขึ้น จะลองไปปรับแต่งที่ style.css
แต่ปรับไม่ถูกค่ะ แนะนำด้วยค่ะ

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

[kaikimao]

ทุกขั้นตอนที่แนะนำ ทำเหมือนทุกอย่างค่ะ
แต่ว่าสีไม่ขึ้น จะลองไปปรับแต่งที่ 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]

ขอบคุณมากน่ะค่ะที่แนะนำค่ะ จะลองทำดูน่ะค่ะ

[เซียวเหล่งนึ่งฯ]

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

[construction]

ถ้าทำเป็น Action ก็ไม่ต้องจำ กดโช๊ะๆๆ รองานเสร็จเลย 

ทำไงครับ

[kaikimao]

ถ้าทำเป็น Action ก็ไม่ต้องจำ กดโช๊ะๆๆ รองานเสร็จเลย 

ทำไงครับ

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

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

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

[กฤติยา]

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

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