การทำสกิน Discuz อย่างง่าย

Onimakill

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

สกิน Discuz ก็มีให้โหลดใช้กันมากพอสมควร การติดตั้งสกิน Discuz จะต้องติดตั้งให้ตรงตามเวอร์ชั่นของ Discuz ที่คุณติดตั้งไว้ถึงจะใช้งานได้ แต่หากว่าคุณต้องการสกินที่ไม่เหมือนใครคุณก็ต้องทำสกินเอง โดยมีขั้นตอนดังนี้

1. ทำการติดตั้ง Discuz ตามปกติ
2. ในโฟล์เดอร์ template จะมีสกิน Default ของ Discuz จะมีไฟล์อยู่จำนวนมาก ห้ามลบธีม Default ทิ้งโดยเด็ดขาด
3. ในโฟล์เดอร์ template ให้คุณสร้างโฟล์เดอร์สำหรับเก็บสกินของคุณ เช่น Myskin1
4. สร้างไฟล์ xml และจะต้องตั้งชื่อ discuz_style_Myskin1.xml ให้พิมพ์โค้ด xml ดังต่อไปนี้

discuz_style_Myskin1.xml

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <root>
   
3. <item id="Title"><![CDATA[Discuz! Style]]></item>
   
4. <item id="Version"><![CDATA[7.2]]></item>
   
5. <item id="Time"><![CDATA[]]></item>
   
6. <item id="From"><![CDATA[Discuz! Board]]></item>
   
7. <item id="Data">
   
8. <item id="name"><![CDATA[Myskin1]]></item>
   
9. <item id="templateid"><![CDATA[Myskin1]]></item>
   
10. <item id="tplname"><![CDATA[Myskin1]]></item>
    
11. <item id="directory"><![CDATA[./templates/Myskin1]]></item>
    
12. <item id="copyright"><![CDATA[www.samarn.com]]></item>
    
13. <item id="style">
    
14. <item id="boardimg"><![CDATA[logo.gif]]></item>
    
15. <item id="available"><![CDATA[]]></item>
    
16. <item id="footertext"><![CDATA[]]></item>
    
17. <item id="sidebgcolor"><![CDATA[ side.gif repeat-y 100% 0]]></item>
    
18. <item id="bgcolor"><![CDATA[ bg.gif repeat-x 0 0]]></item>
    
19. <item id="stypeid"><![CDATA[1]]></item>
    
20. <item id="styleimgdir"><![CDATA[templates/Myskin1/images]]></item>
    
21. <item id="imgdir"><![CDATA[]]></item>
    
22. <item id="headertext"><![CDATA[]]></item>
    
23. <item id="headerbordercolor"><![CDATA[]]></item>
    
24. <item id="headerborder"><![CDATA[0]]></item>
    
25. <item id="inputbg"><![CDATA[#FFF]]></item>
    
26. <item id="font"><![CDATA[Verdana,Helvetica,Arial,sans-serif]]></item>
    
27. <item id="inputborderdarkcolor"><![CDATA[#B8BEB4]]></item>
    
28. <item id="menuhover"><![CDATA[#51A482]]></item>
    
29. <item id="menutext"><![CDATA[]]></item>
    
30. <item id="inputborder"><![CDATA[#D2DACE]]></item>
    
31. <item id="dropmenuborder"><![CDATA[#D2DACE]]></item>
    
32. <item id="menuhovertext"><![CDATA[]]></item>
    
33. <item id="dropmenubgcolor"><![CDATA[#FEFDFA]]></item>
    
34. <item id="floatbgcolor"><![CDATA[#F8F8F5]]></item>
    
35. <item id="floatmaskbgcolor"><![CDATA[]]></item>
    
36. <item id="commonbg"><![CDATA[#F8F8F5]]></item>
    
37. <item id="commonborder"><![CDATA[#D2DACE]]></item>
    
38. <item id="specialborder"><![CDATA[#D2DACE]]></item>
    
39. <item id="specialbg"><![CDATA[#E8ECE6]]></item>
    
40. <item id="interleavecolor"><![CDATA[#F8F8F5]]></item>
    
41. <item id="headerbgcolor"><![CDATA[]]></item>
    
42. <item id="menuborder"><![CDATA[]]></item>
    
43. <item id="noticetext"><![CDATA[#F60]]></item>
    
44. <item id="menubgcolor"><![CDATA[]]></item>
    
45. <item id="contentwidth"><![CDATA[]]></item>
    
46. <item id="msgfontsize"><![CDATA[14px]]></item>
    
47. <item id="msgbigsize"><![CDATA[16px]]></item>
    
48. <item id="wrapborder"><![CDATA[0]]></item>
    
49. <item id="contentseparate"><![CDATA[#D2DACE]]></item>
    
50. <item id="wrapbordercolor"><![CDATA[]]></item>
    
51. <item id="wrapbg"><![CDATA[#FFF]]></item>
    
52. <item id="link"><![CDATA[#444]]></item>
    
53. <item id="wrapwidth"><![CDATA[1000px]]></item>
    
54. <item id="highlightlink"><![CDATA[#099]]></item>
    
55. <item id="lighttext"><![CDATA[#999]]></item>
    
56. <item id="tabletext"><![CDATA[#444]]></item>
    
57. <item id="midtext"><![CDATA[#666]]></item>
    
58. <item id="smfontsize"><![CDATA[0.83em]]></item>
    
59. <item id="smfont"><![CDATA[Verdana,Helvetica,Arial,sans-serif]]></item>
    
60. <item id="fontsize"><![CDATA[12px]]></item>
    
61. </item>
    
62. </item>
    
63. </root>

คัดลอกไปที่คลิปบอร์ด

* ใน CDATA[] ส่วนที่ตัวหนังสือเป็นสีเขียว คุณจำเป็นต้องกรอกให้ครบ เพื่อให้สกินของคุณสามารถติดตั้งได้เวลาเอาไปใช้งาน
5. หากคุณดาวน์โหลดสกินเวอร์ชั่นอื่นมาติดตั้งซึ่งเวอร์ชั่นไม่ตรงกัน ให้คุณแก้ไขในส่วนของ <item id="Version"><![CDATA[7.2]]></item> ให้ตรงกันก่อนถึงจะติดตั้งสกินนั้นได้
6. ในโฟลเดอร์ Myskin1 ของคุณ ให้คุณสร้างโฟลเดอร์ images สำหรับเก็บรูปภาพที่ใช้สำหรับสกินของคุณ
7. ให้คุณสร้างไฟล์ css โดยตั้งชื่อ css_append.css
8. เริ่มเขียน css เพื่อสร้างสกินของคุณเอง หากคุณต้องการเปลี่ยนส่วนไหนก็ให้คุณเขียน css จัดการส่วนนั้น เช่น

css_append.css

1. 
   
2. html { height:100%}
   
3. body {margin:0px auto; padding:0px; background:#b0d8f4;}
   
4. #wrap {background:#ffffff; width:1000px; margin:0px auto; padding:0px; border:0px; height:auto;}
   
5. .wrap {padding:0px; margin:0px auto; width:980px; height:auto; }
   
6. 
   
7. #header { margin-bottom: 0; width:1000px; background:#ffffff; margin:0px auto;}
   
8. #header .wrap { padding: 0px; height: 80px; width:1000px; background:#ffffff; }
   
9. #umenu {padding-top:5px;padding-right:10px;}
   
10. #menu { right: 20px; height: 30px; }
    
11. #menu li { height: 30px; background: #F8F8F5 ; opacity: 0.95; filter: alpha(opacity=95); }
    
12. #menu a { border: none; height: 30px; background:#f8f8f5; line-height: 35px; }
    
13. #menu a:hover { border: none; height: 30px; background:#cfe0b7; line-height: 35px; }
    
14. #menu a.dropmenu { background-position: 100% -80px !important; }
    
15. #menu li.current { border: none; height: 30px; background:#eaeae3 !important; line-height: 35px;}
    
16. #menu li.current a { color: #099; font-weight: 700; background:#eaeae3; }
    
17. #style_switch { padding: 14px 15px 0 0; }
    
18. #nav { margin: 0 auto; border-bottom: 1px solid #E8ECE6; text-indent: 20px; width:1000px; background:#f8f8f5;}
    
19. .fwin {border:0px;}
    
20. .t_l, .t_c, .t_r, .m_l, .m_r, .b_l, .b_c, .b_r {background:#009999;}
    
21. 
    
22. .list th { background-image: url({STYLEIMGDIR}/forum.gif); }
    
23. .list th.new { background-image: url({STYLEIMGDIR}/forum_new.gif); }
    
24. .postbtn { background-image:url({STYLEIMGDIR}/post.gif) !important; }
    
25. .replybtn { background-image:url({STYLEIMGDIR}/reply.gif) !important; }
    
26. .side .shadowline {margin-right:10px;}
    
27. 
    
28. .threadfix {width:980px !important; border:#ffffff 10px solid !important; border-top:0px !important; margin: 0 auto;}
    
29. .main {width:980px !important; padding:0px; padding-top:10px; padding-bottom:10px; margin: 0 auto; border:0px;}
    
30. .soom img {width:780px}
    
31. #ad_text {margin:0px auto; padding:10px; border:0px; width:980px; background:#ffffff;}
    
32. #ad_text table, #ad_text td, #ad_text th {padding:0px; border:0px;}
    
33. .ad_text {width:980px; margin:0px auto;}
    
34. 
    
35. .ad_footerbanner { margin:0px auto; padding:0px; border:0px;}
    
36. 
    
37. #footer {width:1000px; background:#eeeeee; padding:0px; padding-bottom:20px; padding-top:10px; margin:0 auto; height:auto;}
    
38. #footer .wrap { width:1000px; margin:0 auto; }
    
39. #footlink {padding-right:20px;}
    
40. #rightinfo {padding-left:20px;}

คัดลอกไปที่คลิปบอร์ด

* คุณจำเป็นต้องเข้าใจโครงสร้างเทมเพลตของ Discuz คุณถึงจะเขียน css จัดการส่วนต่างๆของ Discuz ได้


9. หากคุณต้องการเปลี่ยนเลเอาท์ไม่ว่าจะเป็น header หรือ footer ให้คุณไป copy ไฟล์ header.htm และ footer.htm จากธีม Default มาไว้ในธีม(สกิน) ที่คุณสร้าง คุณสามารถเพิ่มเติม หรือเอาบ้างอย่างออกได้ หากต้องการเปลี่ยนเลเอาท์หน้าอื่นๆ ก็ทำวิธีเดียวกันครับ

เรายังสามารถทำอะไรกับ Discuz ได้อีกมากมาย หากคุณติดตามอ่าน http://samarn.multiply.com
เช่น การใช้ JSWizard ช่วยในการทำเทมเพลต

ปล. ทำไม่เก่งไม่เป็นไร ขอให้มีจินตนาการ เครดิต>http://samarn.multiply.com/

ฉลาด

  ความรู้ๆ

ฉลาด

สวย มากสกิน  http://samarn.multiply.com/photos/album/191/bigmountainmusicfestival

bomlovesom

นึกถึงตัวเองแล้วขำ ชาวบ้านแต่งกันซะสวย ผมใช้ ทีม ดีฟอร์ล ฮา ฮา เปลี่ยนแค่โลโก้

PerfectDay

ขอบคุณมากเลย ^^

nateekhan

ขอบคุณครับ