:: JustUsers.net ::

:: คนทำเว็บ :: => Simple Machines Forum [SMF] => Configuration => ข้อความที่เริ่มโดย: เซียวเหล่งนึ่งฯ ที่ 30, มิถุนายน 2008, 07:02:53 PM

หัวข้อ: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: เซียวเหล่งนึ่งฯ ที่ 30, มิถุนายน 2008, 07:02:53 PM
การแก้ไขสีบาร์และเมนูของบอร์ด SMF

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

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


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

(http://pic90.picturetrail.com/VOL2306/10594327/18920634/323440682.jpg)


ทีนี้เราจะเปลี่ยนสีของบาร์ให้เป็นสีส้มๆแกมเหลือง 
เมื่อเราแตกไฟล์ซิปติดตั้งเอสเอ็มเอส  ทำการติดตั้งเป็นที่เรียบร้อยแล้ว
ทำการก็อบปี้โฟลเดอร์  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 ซึ่งเป็นโหมดไฟล์อินเด็ก จะไม่สามารถทำการแก้ไขได้ 
เราจะต้องทำการเปลี่ยนโหมดไฟล์เสียก่อน   อิมเมจ -- โหมด -- อาจีบี

(http://pic90.picturetrail.com/VOL2306/10594327/18920634/323440684.jpg)

(http://pic90.picturetrail.com/VOL2306/10594327/18920634/323440686.jpg)

(http://pic90.picturetrail.com/VOL2306/10594327/18920634/323440689.jpg)

(http://pic90.picturetrail.com/VOL2306/10594327/18920634/323440690.jpg)

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

(http://pic90.picturetrail.com/VOL2306/10594327/18920634/323440691.jpg)

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

(http://pic90.picturetrail.com/VOL2306/10594327/18920634/323440692.jpg)

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

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

(http://pic90.picturetrail.com/VOL2306/10594327/18920634/323440694.jpg)

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

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

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

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

(http://pic90.picturetrail.com/VOL2306/10594327/18920634/323440672.jpg)



หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: ff-Mobile ที่ 01, กรกฎาคม 2008, 11:18:22 AM
เยี่ยมทุ่มทุนสร้างมากๆๆ
หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: kaikimao ที่ 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:
หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: เซียวเหล่งนึ่งฯ ที่ 01, กรกฎาคม 2008, 07:47:09 PM
ตามวิธีท่านไก่ก็ดี  ใช้แอ็คชั่นไปเลย
หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: naidb ที่ 02, กรกฎาคม 2008, 05:36:41 PM
ขอบคุณมากครับ :smiley: :smiley:
หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: ครับ ที่ 03, ธันวาคม 2008, 02:15:01 AM
ขอบคุณท่านผู้ให้ความรู้ครับ ลองแล้วได้ผลครับ :razz:
ท่านเซียวเหล่งนึ่ง แห่งสำนักสุสานโบราณ
ท่านไก่ขี้เมา
ขอบคุณครับ :adore:
หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: ครับครับ ที่ 06, ธันวาคม 2008, 12:57:46 AM
ขอบคุณกระทู้นี้และผู้ตอบทุกท่านครับ :adore: :adore:
หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: SMF ที่ 06, กุมภาพันธ์ 2009, 04:18:55 PM
ทำตามขึ้นตอนทุกอย่างแล้วครับแต่ว่าสีไม่เปลี่ยนครับ

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

ขอบคุณมากน่ะค่ะ
หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: kaikimao ที่ 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" ...... >
(http://img201.imageshack.us/img201/4876/86811088vz3.png)

ตัวอย่างหน้่าปกติ หลังใส่บรรทัด <link href="style.css" ...... >
(http://img201.imageshack.us/img201/5185/97028267td3.png)

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

หากยังไม่ได้เริ่มก้าวแรกไม่มีทางไปถึงจุดหมาย เด้อ...
หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: nikoch ที่ 06, กุมภาพันธ์ 2009, 08:22:02 PM
ขอบคุณมากน่ะค่ะที่แนะนำค่ะ จะลองทำดูน่ะค่ะ
หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: เซียวเหล่งนึ่งฯ ที่ 06, กุมภาพันธ์ 2009, 08:27:45 PM
ส่วนพวกสีบารืนั่น ถ้าเปลี่ยนแล้วก็ต้องอัพไปทับให้ถูกที่ ถูกธีม ถูกโฟลเดอร์ด้วยนะ
หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: construction ที่ 28, มีนาคม 2009, 09:40:57 AM
อ้างถึง
ถ้าทำเป็น Action ก็ไม่ต้องจำ กดโช๊ะๆๆ รองานเสร็จเลย 


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


ทำไงครับ


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

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

ขอให้สนุกกับการสร้าง+ใช้ Action ครับ
 :smitten-1:
หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: กฤติยา ที่ 23, เมษายน 2011, 11:38:41 AM

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


สวนนี้คือ ตัวแบล๊กกราวน์ไหม
หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: กฤติยา ที่ 09, พฤษภาคม 2011, 07:45:35 AM
http://www.aryujung.co.cc/index.php?action=forum (http://www.aryujung.co.cc/index.php?action=forum)

หวานมั้ย
หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: LittleCat ที่ 09, พฤษภาคม 2011, 05:34:24 PM
หวานมั้ย
สีหวานดี ลงตัได้พอดีเลย ชื่อบอร์ดสีส้มตัดกับธีมสีม่วง เด่นตาดี
หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: กฤติยา ที่ 11, พฤษภาคม 2011, 06:00:24 AM
 :adore:  ขอบคุณค่ะ
หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: construction ที่ 07, ตุลาคม 2012, 01:25:27 PM
ของผมออกมางี้เลย ครับ  จะเข้าไปแก้ไฟล์ stys.ccs   ตรงไหนส่วนไหนครับ  http://www.lifecivil.com/index.php (http://www.lifecivil.com/index.php)

(http://image.ohozaa.com/i/f50/RdeapJ.gif) (http://image.ohozaa.com/view2/wnpYQFH8bdabxeQY)

หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: เซียวเหล่งนึ่งฯ ที่ 07, ตุลาคม 2012, 05:56:21 PM
.catbg3, tr.catbg3 td {

windowbg2 {

tr.titlebg2 td {
หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: construction ที่ 07, ตุลาคม 2012, 07:22:35 PM
.catbg3, tr.catbg3 td {

windowbg2 {

tr.titlebg2 td {


ส่วนนี้ได้แล้วครับ  ........ขอโทษครับผมเลยด้านล่าง  ตัวอักษรดำกลืนไปเลย  :grin:

(http://image.ohozaa.com/i/9ab/etA1Fj.gif) (http://image.ohozaa.com/view2/wnrXdeKsIIAOmJTp)

แล้วส่วนนี้เอาออกได้ไหมครับ

(http://image.ohozaa.com/i/0ca/6L9WAb.gif) (http://image.ohozaa.com/view2/wnrYbv8oVtL5Tmdx)



หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: เซียวเหล่งนึ่งฯ ที่ 07, ตุลาคม 2012, 07:26:24 PM
titlebg, .titlebg a:link, .titlebg a:visited {
หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: กฤติยา ที่ 08, ตุลาคม 2012, 05:30:07 PM

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


หาไม่เจอค่ะ  :firstaid:

หัวข้อ: Re: การแก้ไขสีบาร์และเมนูของบอร์ด SMF
เริ่มหัวข้อโดย: เซียวเหล่งนึ่งฯ ที่ 08, ตุลาคม 2012, 06:57:53 PM
2.0 จะอยู่ใน ซีเอสเอส/