[Guide]JS WIZ for ahmeng xledoo 6.1

buachompoox

สืบเนื่องจากกระทุ้นี้ : http://www.cazdesign.com/forums/thread-3088-1-1.html
ตัว discuzrequest เป็น gbk ทำให้เวลา import มาไม่สามารถใช้งาน js wiz ได้ ถึงแปลเป็น utf8 ก้อใช้ไม่ไ่ด้อยู่ดีต้องทำการ manual JS wiz ด้วยตนเอง

เดโมด้านล่าง



จะเริ่มจากทำตรง What new ก่อนนะครับ ดูโค้ดตามเลยแระกัน



{eval request('threads_digest3_left');}

1. <div style="width:272px;height:170px;float:left;background:url(images/xledoo/bg_r1.gif) no-repeat; ">
   
2.         <div style="width:258px;height:88px;margin:2px auto 6px auto;">
   
3.                 <a href="{link}"><img src="{imgattach}" alt="{subject_full}" width="258" height="88"></a>
   
4.         </div>
   
5.         <div style="margin:auto;padding-top:6px;width:250px;height:60px;"> <!--content-->
   
6.                 <div class="htopicex">
   
7.                         [{forum}] {subject}
   
8.                 </div>
   
9.                 <div class="hposter">Author : {author}</div>
   
10.                 <div style="font-size:11px;color:#858585;line-height:23px;">{message}</div>
    
11.         </div>
    
12. </div>

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

{eval request('threads_digest3_right');}

1. <div style="width:272px;height:170px;float:right;background:url(images/xledoo/bg_r1.gif) no-repeat;">
   
2.         <div style="width:258px;height:88px;margin:2px auto 6px auto; overflow:hidden">
   
3.                 <a href="{link}"><img src="{imgattach}" alt="{subject_full}" width="258" height="88"></a>
   
4.         </div>
   
5.         <div style="margin:auto;padding-top:6px;width:250px;height:60px;"> <!--content-->
   
6.                 <div class="htopicex">
   
7.                         [{forum}] {subject}
   
8.                 </div>
   
9.                 <div class="hposter">Author : {author}</div>
   
10.                 <div style="font-size:11px;color:#858585;line-height:23px;">{message}</div>
    
11.         </div>
    
12. </div>

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

{eval request('threads_digest1_left');}

1. <div style="width:272px;height:75px;background:#F0F2F2 url(images/xledoo/bg_icon.gif) no-repeat 197px 1px; margin-bottom:10px;">
   
2.         <div style="float:left;width:185px;height:65px;padding:4px 9px 0 7px;overflow:hidden;">
   
3.                 <div class="htopic">[{forum}] {subject}</div>
   
4.                 <div class="hposter">oster : {author}</div>
   
5.                 <div class="hdesc">{message}</div>
   
6.         </div>
   
7.         <div style="float:left;width:63px;height:63px;margin-top:6px;"><a href="{link}" title="{subjectall}"><img src="{imgattach}" alt="{subject_full}" width="63" height="63"></a></div>
   
8. </div>

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

{eval request('threads_digest1_right');}

1. <div style="width:272px;height:75px;background:#F0F2F2 url(images/xledoo/bg_icon.gif) no-repeat 197px 1px; margin-bottom:10px;">
   
2.         <div style="float:left;width:185px;height:65px;padding:4px 9px 0 7px;overflow:hidden;">
   
3.                 <div class="htopic">[{forum}] {subject}</div>
   
4.                 <div class="hposter">oster : {author}</div>
   
5.                 <div class="hdesc">{message}</div>
   
6.         </div>
   
7.         <div style="float:left;width:63px;height:63px;margin-top:6px;"><a href="{link}" title="{subject_full}"><img src="{imgattach}" alt="{subject_full}" width="63" height="63"></a></div>
   
8. </div>

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

ต่อไปตรงกระทู้ล่าสุด



ใช้โค้ดตัวเดียวกันทั้ง 4 เลยครับแตกต่างตรงผู้ตั้งกระทู้กับคนตอบกระทู้

CSS

1. <style type="text/css">
   
2. html {overflow:hidden;}
   
3. body {font-size:12px;color:#555;font-family:Tahoma, Arial, Verdana, serif;margin:0;padding:0;background-color:#FFF;}
   
4. img {border-width:0px;}
   
5. img.inline {vertical-align:middle;}
   
6. a:link, a:visited, a:active {text-decoration:none;color:#000;background-color:inherit;}
   
7. a:hover {text-decoration:none;color:#465584;background-color:inherit;}
   
8. .time {font-size:10px;color:#a0a0a0;background-color:inherit;}
   
9. 
   
10. #ptabcontentstyle {border-top:1px solid #84c7e4;width:545px;margin:0;padding:5px 0 0 10px;}
    
11. .tabcontent {display:none;}
    
12. .pshadetabs {padding:5px 0 3px 0;margin:2px 0 0 10px;color:#1E81B0;list-style-type:none;text-align:left;}
    
13. .pshadetabs li {display:inline;margin-right:6px; }
    
14. .pshadetabs li a {text-decoration:none;border:1px solid #84c7e4;color:#1E81B0;padding:4px 7px 3px 7px;}
    
15. .pshadetabs li a:visited {font-weight:bold;color:#1E81B0;}
    
16. .pshadetabs li a:hover {text-decoration:none;color:#1E81B0;}
    
17. .pshadetabs li.selected {position:relative;}
    
18. .pshadetabs li.selected a {border-bottom-color:#f6f5f0;color:#1E81B0;font-weight:bold;}
    
19. .pshadetabs li.selected a:hover {text-decoration:none;}
    
20. 
    
21. 
    
22. .replylist2 {width:550px;height:31px;line-height:30px;border-bottom:1px solid #d8e7ea;clear:both; }
    
23. .replyava {width:26px;height:31px;float:left;margin-left:10px;}
    
24. .imgc {width:25px;height:25px;margin:3px auto 0 auto;overflow:hidden;}
    
25. .avaimg {width:100%;height:100%; }
    
26. .replyc2 {width:350px;height:24px;overflow:hidden;float:left;}
    
27. .replyc2 a:link,.replyc2 a:visited,.replyc2 a:active{color:#566C75;background-color:inherit;}
    
28. .replyc2 a:hover {color:#465584;font-weight:bold;background-color:inherit;}
    
29. .replyu2 {float:left;overflow:hidden;width:65px;height:24px;text-align:center;margin-left:5px; }
    
30. .replyu2 a:link,.replyu a:visited {width:65px;height:24px;text-decoration:none;color:#858585;text-align:center; }
    
31. .replyd2 {width:92px;font-size:11px;color:#858585;background-color:inherit;float:left;line-height:30px;margin-left:30px; }
    
32. 
    
33. 
    
34. .replyt {width:225px;background-color:#666;color:#FFF;float:left; }
    
35. .replym {width:auto;height:21px;border-bottom:2px solid #c7e0ef;line-height:20px;background-color:inherit;clear:both; }
    
36. .replylist {width:550px;height:22px;line-height:24px;border-bottom:1px solid #d8e7ea;clear:both; }
    
37. .replyc {width:330px;height:26px;overflow:hidden;float:left;}
    
38. .replyc a:link,.replyc a:visited,.replyc a:active{color:#566C75;}
    
39. .replyc a:hover {color:#465584;font-weight:bold;}
    
40. .replyu {float:left;overflow:hidden;width:70px;height:24px;text-align:center;margin-left:10px; }
    
41. .replyu a:link,.replyu a:visited {width:70px;height:24px;text-decoration:none;color:#858585;text-align:center; }
    
42. .replyd {width:92px;font-size:11px;color:#858585;background-color:inherit;float:left;line-height:20px;margin-left:30px; }
    
43. .replyutext {width:50px;font-size:12px;color:#5392A3;background-color:inherit;float:left;line-height:23px;text-align:center; }
    
44. .replydtext {width:50px;font-size:12px;color:#5392A3;background-color:inherit;float:left;line-height:23px;text-align:center;margin-left:55px; }
    
45. 
    
46. .hreplyc {width:320px;height:24px;overflow:hidden;float:left;}
    
47. .hreplyc a:link, .hreplyc a:visited, .hreplyc a:active {color:#566C75;padding-left:25px;background:transparent url("{IMGDIR}/i_hotpost.gif") no-repeat 1px 0;}
    
48. .hreplyc a:hover {padding-left:8px;color:#465584;font-weight:bold;padding-left:25px;background:transparent url("{IMGDIR}/i_hotpost.gif") no-repeat 2px 1px;}
    
49. 
    
50. </style>

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

{eval request('threads_hothread');}
{eval request('threads_newreply');}
{eval request('threads_newthread');}
{eval request('threads_rule');}

1. <tr>
   
2. <td>
   
3. <div class="replylist2">
   
4. <div class="replyc2">[{forum}]{subject}</div>
   
5. <div class="replyu2">{author}</div>
   
6. <div class="replyd2">{dateline}</div>
   
7. </div>
   
8. </td>
   
9. </tr>

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

ต่อไปตรงแสดงสมาชิกดีเด่น



{eval request('memberrank_memberlist');}

1. <ul class="imginfolist">
   
2. [node]<li>{avatarsmall}<p>{member}</p></li>[/node]
   
3. </ul>
   

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

ต่อไปตรงกระทู้แนะนำด้านขวามือ



{eval request('threads_digest2');}

1. <div class="activitys">
   
2. 
   
3. <div style="float:left;width:93px;">
   
4. <a href="{link}">
   
5. <img src="{imgattach}" style="border:0;margin:4px 0 0 5px;" alt="{subject_full}" width="82" height="82"></a>
   
6. </div>
   
7. <div style="float:left;width:165px;margin:5px 0 0 6px;">
   
8. 
   
9. <div class="actopic">[{forum}]{subject}</div>
   
10. <div class="time">{dateline}</div>
    
11. <div class="actdesc">{message}</div>
    
12. <div class="more" style="margin-top:5px;"><a href="{link}">Read more</a></div>
    
13. </div>
    
14. 
    
15. </div>
    
16. 
    
17. <div class="pbottom"></div>

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

เป็นอันจบการทำ js wiz สำหรับสกินนี้

ปล.ผมไม่เอาตัวที่ทำแล้วมาให้โหลดนะครับเพราะมานต้องเข้าไปตั้งค่าเฉพาะของแต่ล่ะบอร์ด

ทิ้งท้าย ขอความกรุณาอย่านำสกินนี้ไปใช้เพื่อการค้าหรือแสวงหาผลกำไรนะครับคนทำเค้าตั้งใจทำมาให้ใช้กันฟรีๆ
บวกกับการนั่งแกะ js wiz ให้มานใช้งานได้ใกล้เคียงต้นฉบับไม่ง่ายนะครับ ขอความร่วมมือนิดนึงครับเปิดแชร์โค้ดเพื่อนักพัฒนาครับไม่ซ่อน

[ แก้ไขล่าสุด buachompoox เมื่อ 2008-6-30 11:40 ]

finalxiii

อยากได้แบบนี้มานาน

pie1

ขอเรียนถามนิดหนึ่งครับว่า ต้องเอาไปวางที่ไหนเหรอครับ งง มากมาย
เช่น วางที่ postlist.htm, discuz.htm อะไรประมาณนี้นะครับ รบกวนด้วย

buachompoox

ตัวเทมเพลทสกินจะใส่โค้ดดังกล่าวไว้แล้ว ขาดแค่ mod js wiz เท่านั้นครับ

CDC

ตรง CSS ต้องทำยังไงครับ ช่วยตอบด้วยคร้บ

buachompoox

CSS มีอยู่ในสกินอยู่แล้วครับ ผมยกมาให้ดูเป็นตัวอย่างน่ะครับเผื่อสกินอื่ยอยากนำไปใช้บ้าง

CDC

ขอบคุณครับ อีกคำถาม ไอ้ {eval request('threads_digest1_right');} right กับ left นี่มันแสดงผลเหมือนกันเหรอครับ
แล้วที่เป็นส่วน แสดง กระดานตอบล่าสุด กระทู้ล่าสุด กระทู้เด่น กระทู้ร้อน ทำไมมัน ไม่ขึ้นหัวข้างบนให้เลือกครับ ต้องเพิ่มอะไรหรือป่าวครับ

CDC

Webboard จะให้โชว์ทำไงครับตอนนี้ ขึ้นแต่หัวข้อใหญ่ ห้วข้อย่อยไม่โชว์เลย

buachompoox

มันไม่โชวหัวข้อย่อยครับ ต้อง mod ต่อกันเอานะ

เกี่ยวกับ JS ดูพื้นฐานได้ตามลิงค์ครับไม่ขอกล่าว
http://www.cazdesign.com/forums/ ... 26amp%3Btypeid%3D23

http://www.cazdesign.com/forums/thread-2940-1-1.html

numpun

งง บอกได้คำเดียวว่างงครับผมม