ตั้งค่าการอ่าน

ค่าเริ่มต้น

  • เลื่อนอัตโนมัติ
    Princer Theme

    ลำดับตอนที่ #3 : Princer Theme : แจกโค้ดทำธีม+อธิบายอย่างละเอียด

    • อัปเดตล่าสุด 24 ม.ค. 57


    ตามสัญญานะคะ ว่าวันนี้จะมาอัพโค้ดธีมแจก ^^

    และดาจะอธิบายโค้ดอย่างละเอียด ว่าโค้ดไหนคือส่วนไหน

        Copy Code ในกรอบด้านล่างนี้ไปได้เลยนะคะ



    หลังจากนั้น มาดูกันดีกว่าว่า โค้ดไหนคือส่วนไหน

    <a href="ลิ้งค์หน้าบทความ" target="_blank">
    <style type="text/css">
    .
    .
    .
    .
    </style></a>

    ที่เห็นด้านบน นี้เป็นโค้ดเปิด และ ปิดท้าย โค้ดทุกโค้ดนะคะ เราสามารถใส่ชื่อธีมของเราแทรกลงไประหว่าง

    <a href="ลิ้งค์หน้าบทความ" target="_blank">Princer<style type="text/css">

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



    body { background:url(url พื้นหลังบทความ) repeat fixed !important;}

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

    background: #โค้ดสี !important; (หากไม่ต้องการใส่รูปภาพพื้นหลัง)

    background: url(url ภาพพื้นหลังบทความ) repeat fixed !important; (หากต้องการใส่รูปภาพพื้นหลังบทความ)

    repeat คือ การทำภาพพื้นหลังซ้ำ *แนะนำให้เป็นภาพที่ต่อกันนะคะ*

    fixed   คือ     การทำให้ภาพพื้นหลังอยู่กับที่ ไม่เลื่อนตาสกอร์บาร์

    !important; คือ ต้องการให้แสดงผลของภาพและสีนั้นๆ *ตัวนี้สำคัญมากๆ ค่ะ*


    table,td,tbody,tr { background: #สีพื้นตารางทั้งหน้า ; border:none !important; border-collapse:separate !important;}

    โค้ดนี้เป็นส่วนกำหนดสีพื้นตารางของเนื้อหาทั้งหน้า

    border:none คือ ไม่มีเส้นขอบ *นิยมใช้กันมากที่สุดในบทความธีม

    border-collapse: separate คือ เป็นการแบ่งแยกเส้นขอบ แต่ถ้าเป็น border-collapse: collapse จะเป็นการยุบเส้นขอบค่ะ



    td font { color: #สีตัวหนังสือ !important;}

    โค้ดนี้เป็นการเปลี่ยนสีตัวอักษรในแถบของ นิยาย-เรื่องยาว  
     


    td,th,div,body,li,ul,p,a,span,span.desc_head { color: #สีตัวหนังสือทั้งหน้า !important; font-family:Tahoma; font-size: 12px;}

    โค้ดนี้เป็นการเปลี่ยนสีตัวหนังสือเกือบทั้ง *ยกเว้น แถบนิยาย-เรื่องนาว*

    font-family:Tahoma คือ ฟ้อนต์ที่นิยมใช้มากที่สุด 

    font-size: 12px คือ ขนาดของตัวหนังสือทั้งหน้า *แนะนำ 11 - 12*



    .head1 {background: #สีพื้นหลัง !important; border: ขนาดเส้นpx รูปแบบเส้น #สีเส้นขอบ; padding: ความห่างเส้นจากขอบpx  !important;}

    โค้ดนี้เป็นการเปลี่ยนสีพื้นหลังของชื่อบทความของเรา หากต้องการใส่รูปพื้นหลัง สามารถเปลี่ยนจาก

    background: #สีพื้นหลัง เป็น background: url(url ของภาพ)  *ขนาดภาพพื้นหลัง แนะนำ 780*41*

    ขนาดเส้นpx คือ ขนาดของเส้นของ ยิ่งใส่ตัวเลขเยอะเท่าไหร่ เส้นจะยิ่งหนาเท่านั้น *แนะนำ 1-2 ค่ะ*

    รูปแบบเส้น   คือ ลักษณะของเส้นที่เราต้องการนำมาเป็นเส้นขอบ มีดังนี้

    dotted

    dashed

    solid

    double

    groove

    ridge

    inset

    outset

    #สีเส้นขอบ คือ สีของเส้นขอบนี่แล่ะ *แนะนำให้เป็นสีใดสีหนึ่งในสีของหน้าบทความ จะสวยกว่าค่ะ*

    padding: ความห่างเส้นจากขอบpx คือ ความห่างของเส้นขอบจากขอบของ head1 ค่ะ ยิ่งตัวเลขมากความห่างจะยิ่งมาก



    .head1 h1 {color: #สีตัวหนังสือ !important; font-size: ขนาดของตัวหนังสือpx !important font-family: Tahoma !important;}

    โค้ดนี้เป็นการเปลี่ยนสีตัวหนังสือชื่อบทความค่ะ

    font-size: ขนาดของตัวหนังสือpx คือ ขนาดของตัวหนังสือชื่อบทความค่ะ ยิ่งตัวเลขมาก ตัวหนังสือจะใหญ่มาก



    .head2 { background: #สีพื้นหลัง !important;}

    โค้ดนี้เป็นการเปลี่ยนสีพื้นหลังของ head2 มีอะไรบ้าง

    ***ในหน้าบทความ***

    1.แถบเลือกอ่านตอนต่างๆ

    2.แถบผลงานเรื่องอื่นๆ

    3.แถบคำนิยม *เห็นได้ในส่วนข้าง*

    ***ในตอนย่อย***

    จะเป็นแถบเล็กๆ ด้านบน และ ด้านล่าง ที่เขียนว่า 

    Princer Theme ตอนที่ 3 : - , ผู้เข้าชมตอนนี้ : - , โพส : - , Rating : 0/0 vote(s)



    head2 { color: #สีตัวหนังสือ !important;  font-family: Tahoma , tahoma;}

    โค้ดนี้เป็นการเปลี่ยนสีตัวหนังสือของ head2 มีอะไรบ้าง

    ***ในหน้าบทความ***

    1.แถบเลือกอ่านตอนต่างๆ

    2.แถบผลงานเรื่องอื่นๆ

    3.แถบคำนิยม *เห็นได้ในส่วนข้าง*

    ***ในตอนย่อย***

    จะเป็นแถบเล็กๆ ด้านบน และ ด้านล่าง ที่เขียนว่า 

    Princer Theme ตอนที่ 3 : - , ผู้เข้าชมตอนนี้ : - , โพส : - , Rating : 0/0 vote(s)



    h2 {font-size: ขนาดตัวหนังสือpx !important; color: #สีตัวหนังสือ !important;}

    โค้ดนี้เป็นการเปลี่ยนสีตัวหนังสือ ในหน้าบทความตอนย่อยที่อยู่ใต้ชื่อบทความ



    input,select,textarea {background: #สีพื้นหลัง !important; color: #สีตัวหนังสือ !important; border: ขนาดเส้นpx รูปแบบเส้น #สีเส้นขอบ !important; font-family: tahoma; font-size: 11px;}

    โค้ดนี้เป็นการเปลี่ยนสีพื้นหลัง ตัวหนังสือ และ เส้นขอบ มีอะไรบ้าง

    1.ปุ่มค้นหา

    2.ปุ่ม กรอกข้อมูลต่างๆ ในส่วนของ แถบค้นหา และ แถบแสดงความคิดเห็น



    #button3,#button4{font-color:#สีตัวหนังสือ!important; backgroung:#สีพื้นหลัง!important; border:ขนาดเส้นpx รูปแบบเส้น #สีเส้นขอบ!important;}

    โค้ดนี้เป็นการเปลี่ยนพื้นหลัง ตัวหนังสือ และ เส้นขอบ มีอะไรบ้าง

    1.ปุ่ม เขียนคำนิยมบ้าง

    2.ปุ่ม ดูทั้งหมด (ในส่วนของ คนที่มาวิจารณ์แล้ว ถึงจะเห็น)



    #button3,#button4,input:hover{background:#สีพื้นหลังเมื่อเม้าส์ชี้!important}

    เป็นการเปลี่ยนสีพื้นหลังของโค้ดที่อยู่ด้านบน ทั้ง 2 โค้ด ตอนที่เม้าส์ชี้



    ***แสดงผลใน IE*** ไม่รองรับโค้ด CSS3
    html { scrollbar-arrow-color: #สีลูกศร; 
    scrollbar-3dlight-color: #สีเดียวกับสีสกอร์บาร์;
    scrollbar-darkshadow-color: #สีเดียวกับสีสกอร์บาร์;
    scrollbar-face-color: #สีสกอร์บาร์;
    scrollbar-highlight-color: #สีเดียวกับสีสกอร์บาร์;
    scrollbar-shadow-color: #สีเดียวกับสีสกอร์บาร์;
    scrollbar-track-color: #สีเดียวกับลูกศร; }

    ***แสดงผลใน G.Chrome , Safari , Opera*** รองรับ CSS3
    ::-webkit-scrollbar {width: ความกว้างของสกอร์บาร์px;  background: #สีเดียวกับลูกศร; }
    ::-webkit-scrollbar-thumb {background:#สีสกอร์บาร์ตอนไม่เอาเม้าส์ชี้;
    -webkit-border-radius: ขนาดความโค้งของขอบpx; border:ขนาดเส้นpx รูปแบบเส้น #สีเส้นขอบตอนไม่เอาเม้าส์ชี้;}
    ::-webkit-scrollbar-thumb:hover{background:#สีสกอร์บาร์ตอนเอาเม้าส์ชี้;
    -webkit-border-radius: ขนาดความโค้งของขอบpx; border:ขนาดเส้นpx รูปแบบเส้น #สีเส้นขอบตอนเอาเม้าส์ชี้;}
     
    โค้ดนี้เป็นการเปลี่ยนสีสกอร์บาร์นะคะ ถือเป็นไฮไลท์ของบทความเลยก็ว่าได้ 

    โค้ดนี้สามารถใช้คู่กันได้ เพื่อการแสดงผลที่ทั่วถึง ทั้งแบบที่ไม่รองรับ CSS3 และ รองรับ CSS3

    ดาอธิบายให้ไม่ถูกค่ะ แต่ลองทำตามที่ดาพิมพ์ไว้ให้ในโค้ด รับรอง แจ่มค่ะ
     


    *::selection{background: #สีพื้นหลังตอนคลุมดำ ;color: #สีตัวหนังสือตอนคลุมดำ;}
    *::-moz-selection{background: #สีพื้นหลังตอนคลุมดำ ;color: #สีตัวหนังสือตอนคลุมดำ;}
    *::-webkit-selection{background: #สีพื้นหลังตอนคลุมดำ ;color: #สีตัวหนังสือตอนคลุมดำ;}

    โค้ดนี้เป็นการกำหนดสีพื้น และ สีตัวอักษร ตอนที่เรากำลังคลุมดำ หรือ Ctrl+A ข้อความนั้นๆ *ไม่ควรจะเป็นสีเดียวกับสีพื้นของตารางนะคะ*



    span.cke_skin_kama{border-radius: ขนาดความโค้งของขอบpx; border: ขนาดเส้นpx รูปแบบเส้น #สีเส้นขอบ; padding: ความห่างของเส้นขอบpx !important;}
    .cke_skin_kama.cke_wrapper{background: #สีพื้นหลัง !important; }

    โค้ดนี้เป็นการเปลี่ยนสีหรือภาพพื้นหลังของกล่องแสดงความคิดเห็น ด้านล่างสุดค่ะ *แนะนำ cool มากๆๆ*



    เย้ๆๆ เป็นการอธิบายโค้ดที่ไม่มีภาพประกอบ แต่หวังว่าเพื่อนๆ คงจะเข้าใจกันนะคะ ถ้าไม่เข้าใจถามได้ในตอนนี้ค่ะ 

    ลองอ่านไป ทำไป นะคะ รับรองว่า ครั้งเดียวจำได้แน่นอน (มั้ง) 555+ แต่จริงๆ ที่ทำอันนี้ขึ้นมา เพื่อเป็นการเตือนตัวเองเหมือนกันค่ะ

    เพราะเวลาทำธีมทีไร ดามักจะลืมทุกที แต่ยังไง ดาก็ขอขอบคุณ ไลน์ น่ารักๆ จาก bearbie item png มากๆ ค่ะ


    อย่าลืมนำ Banner ของบทความนี้ไปแปะและ Comment ด้วยนะคะ ขนาด 250*75 ค่ะ



     
    Princer L.
    ติดตามเรื่องนี้
    เก็บเข้าคอลเล็กชัน

    ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

    loading
    กำลังโหลด...

    อีบุ๊ก ดูทั้งหมด

    loading
    กำลังโหลด...

    ความคิดเห็น

    ×