วิธีใช้:แคสเคดดิงสไตล์ชีตส์

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

หน้านี้เป็นหน้าสารสนเทศ ซึ่งอธิบายวัตรที่ตั้งแล้วของชุมชนแก้ไขของบางแง่มุมของบรรทัดฐานและขนบธรรมเนียมของวิกิพีเดีย ทั้งนี้ ไม่ใช่นโยบายหรือแนวปฏิบัติของวิกิพีเดีย เพราะยังไม่ผ่านการพิจารณาอย่างถี่ถ้วนจากชุมชน

เว็บย่อ: H:CSS

User style เป็นโค้ดสไตล์ชีตหรือแคสเคดดิงสไตล์ชีตส์ ที่ใช้ในการตกแต่ง รูปแบบวิกิพีเดียสำหรับผู้ใช้แต่ละคน โดยปกติจะใส่ในหน้า monobook.css ของผู้ใช้ ซึ่งความสามารถส่วนนี้สำหรับผู้ที่เป็นสมาชิกวิกิพีเดียเท่านั้น.

ผู้ใช้สามารถเปลี่ยนลักษณะหน้าตาของวิกิพีเดีย (หลังจากล็อกอิน) ได้ตามต้องการ ไม่ว่าจะเป็นฟอนท์ สี พื้นหลัง หรือโลโก้ของวิกิพีเดีย โดยใช้แคสเคดดิงสไตล์ชีตส์ บันทึกไว้ในเพจย่อยของหน้าผู้ใช้ เช่นถ้า หน้าผู้ใช้ของคุณเป็น "ผู้ใช้:MyName"
ก็ให้สร้างหน้าใหม่ชื่อ "ผู้ใช้:MyName/monobook.css" และเขียนโค้ดสไตล์ชีต ไว้ในหน้านี้

หลังจากบันทึกแล้ว, คุณต้องล้างแคชของเบราว์เซอร์เสียก่อน จึงจะเห็นการเปลี่ยนแปลง ด้วยวิธีดังต่อไปนี้:

• ใน Mozilla/Safari/Konqueror: กด Shift ค้าง แล้วกด Reload (หรือ Ctrl-Shift-R)
• ใน IE: กด Ctrl-F5
• ใน Opera: กด F5

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

หน้าตาของวิกิพีเดีย

ตามปกติผู้ใช้ที่เป็นสมาชิกวิกิพีเดีย สามารถเปลี่ยนหน้าตา(skin)ของวิกิพีเดียได้หลากหลาย ตามต้องการ โดยการแก้ไขข้อมูลในหน้า"การตั้งค่าของฉัน" (หรือ "พิเศษ:Preferences" ในส่วนแทป"หน้าตา" และแทป"แกเจต") ซึ่งหน้าตาของวิกิพีเดียที่เลือกใช้กันส่วนใหญ่(ที่ตั้งไว้โดยปริยาย) ก็จะเป็นหน้าตาของวิกิพีเดียที่เรียกว่า แบบ"monobook"

แต่หากผู้ใช้คนใดต้องการเปลี่ยนหน้าตา(skin)แบบ"monobook"ที่แสดงอยู่ ให้แตกต่างออกไป เช่นเเปลี่ยนสี เปลี่ยนฟอนท์ ก็อาจทำได้ สองวิธีคือ ตั้งค่าในเบราว์เซอร์ และการสร้างหน้าย่อย monobook.css ของตนขึ้นมา (เช่น ผู้ใช้:MyName/monobook.css)

การสร้างหน้าย่อย monobook.css ส่วนตัว(ไว้เป็นหน้าย่อย-subpage ของหน้าผู้ใช้) เป็นการใช้เทคนิคที่เรียกว่า สไตล์ชีตหรือ Cascading Style Sheets ในการปรับเปลี่ยนหน้าตาของวิกิพีเดีย ซึ่งจะมีผลเฉพาะภายหลังจากล็อกอินด้วยชื่อ ที่ตนใช้เท่านั้น แต่ทำให้สามารถใช้หน้าตาของวิกิพีเดียตามต้องการได้ ไม่ว่าจะไปใช้คอมพิวเตอร์เครื่องอื่นใดอ่านวิกิพีเดีย (โดยไม่ต้องมาคอยตั้งค่าในเบราเซอร์ทุกครั้ง) นอกจากนี้ยังสามารถปรับเปลี่ยนเปลี่ยนหน้าตา(skin)ของวิกิพีเดียได้หลากหลายมากๆิ และการเปลี่ยนหน้าตานี้ก็ไม่มีผลต่อการแสดงผลของผู้ใช้ท่านอื่นๆ (ดูตัวอย่าง(ภาษาอังกฤษ))

โดยทั่วไปหน้าตา(skin)แบบ monobook ของวิกิพีเดียจะถูกกำหนดอยู่ใน 5 แห่ง (ลองคลิกเข้าไปศึกษาโค้ดได้) คือ

1. main.css
2. MediaWiki:Common.css
3. มีเดียวิกิ:Monobook.css
4. หน้าย่อยส่วนตัวชื่อ monobook.css (เช่น ผู้ใช้:MyName/monobook.css - ยังไม่ได้สร้างขึ้นเมื่อเริ่มเป็นสมาชิกวิกิพีเดีย)
5. การตั้งค่าในเบราว์เซอร์

การสร้างหน้าย่อยส่วนตัวชื่อ monobook.css (เช่น ผู้ใช้:MyName/monobook.css) ทำให้เราสามารถแก้ไขค่าต่างๆที่กำหนดไว้สำหรับหน้าตาแบบ monobook ได้ตามต้องการ เพียงแค่สร้างหน้าย่อยส่วนตัวชื่อ monobook.css ขึ้นมา ต่อมาในหน้า"แก้ไข" ใส่โค้ดที่ต้องการลงไป และกด"ดูตัวอย่าง" หน้าตาของวิกิพีเดียก็จะเปลี่ยนไป คุณสามารถแก้ไขและดูตัวอย่างไปเรื่อยๆ จนได้หน้าตาของวิกิพีเดียตามที่ต้องการแล้วจึงกด"บันทึก"

ค่าต่างๆ ที่สามารถกำหนดได้

ตัวอย่างค่าต่างๆ ที่สามารถกำหนดได้ โดยการใช้เทคนิคแบบสไตล์ชีตใน monobook.css

• column-content
• content
• firstHeading
• bodyContent
• contentSub
• p-cactions
• p-personal
• p-logo
• p-navigation
• p-search
• p-tb
• p-lang
• footer
• f-poweredbyico
• f-list

ตัวอย่างสไตล์ชีต

• ไม่แสดงโลโก้ของวิกิพีเดีย

# p-logo { display: none } 

• ไม่แสดงโลโก้ของวิกิพีเดีย และเลื่อนกล่องข้อความซ้ายขึ้นไปแทนที่

# p-logo { display: none } # column-one { padding-top: 0; } 

 

ไม่แสดงโลโก้ของวิกิพีเดีย และเลื่อนกล่องข้อความซ้ายขึ้นไปแทนที่

• เปลี่ยนโลโก้ของวิกิพีเดียเป็นภาษาอังกฤษ (หรือเปลี่ยน url ได้ตามต้องการ ไปที่รูปใดๆในวิกิพีเดีย)

# p-logo a { background: url (http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png) 35% 50% no-repeat !important; } 

 

เปลี่ยนโลโก้ของวิกิพีเดียเป็นภาษาอังกฤษ

• เอาพื้นหลังที่เป็นรูปหนังสือออก และเปลี่ยนพื้นหลังวิกิพีเดียเป็นสีเขียว
  คุณสามารถเปลี่ยนพื้นหลังเป็นสีอื่นๆได้ โดยใช้เลขฐาน16 ตั้งแต่ #000000 ถึง #ffffff

body { background: #99ffff; } 

 

เอาพื้นหลังที่เป็นรูปหนังสือออก และเปลี่ยนพื้นหลังวิกิพีเดียเป็นสีเขียว

• แสดงฟอนท์ตัวหนังสือให้ใหญ่ขึ้นเป็น120%

body, #globalWrapper { font-size: 120% !important; } 

• ไม่แสดงเครื่องหมายสัญญลักษณ์หน้าชื่อผู้ใช้

li#pt-userpage { background: none } 

• เปลี่ยนเครื่องหมายหน้าชื่อผู้ใช้เป็นรูปอื่น (หรือเปลี่ยน url ได้ตามต้องการ ไปที่รูปใดๆในวิกิพีเดีย)

li#pt-userpage { background: url(http://upload.wikimedia.org/wikipedia/th/thumb/b/be/WikiBotany_Year.png/120px-WikiBotany_Year.png) } 

 

แสดง-ไม่แสดงเครื่องหมายหน้าชื่อผู้ใช้ และเปลี่ยนเครื่องหมายหน้าชื่อผู้ใช้ไปเป็นรูปอื่น

• เปลี่ยนเครื่องหมายหน้าลิสต์ไปเป็นรูปอื่น (หรือเปลี่ยน url ได้ตามต้องการ ไปที่รูปใดๆในวิกิพีเดีย)

ul { list-style-image: url("http://upload.wikimedia.org/wikisource/th/f/f5/Sb1.gif") } 

 

เปลี่ยนเครื่องหมายหน้าลิสต์เป็นรูปอื่น

• เปลี่ยนสีอักษรในป้ายบอกทาง

#p-navigation .pBody a { color: blue; } 

• เปลี่ยนฟอนท์-ขนาดอักษรในป้ายบอกทาง

#p-navigation .pBody a { font-family: Microsoft Sans Serif;font-size: 110%; } 

 

เปลี่ยนสี-ขนาดอักษรในป้ายบอกทาง

• เปลี่ยนสีป้ายบอกทาง
  คุณสามารถเปลี่ยนพื้นหลังเป็นสีอื่นๆได้ โดยใช้เลขฐาน16 ตั้งแต่ #000000 ถึง #ffffff

#p-navigation .pBody { background: #ffffaa; } 

 

เปลี่ยนสีป้ายบอกทาง

• เปลี่ยนขอบกรอบข้อความต่างๆเป็นแบบโค้งมน (แสดงผลตามต้องการเฉพาะในไฟร์ฟอกซ์)

#p-cactions ul li, #p-cactions ul li a { -moz-border-radius-topleft: 1em; -moz-border-radius-topright: 1em; } #content { -moz-border-radius-topleft: 1em; -moz-border-radius-bottomleft: 1em; } div.pBody { -moz-border-radius-topright: 1em; -moz-border-radius-bottomright: 1em; } 

 

เปลี่ยนขอบกรอบข้อความต่างๆเป็นแบบโค้งมน (เฉพาะใน ไฟร์ฟอกซ์)

ข้อมูลภายนอก

อ่านรายละเอียดเพิ่มเติมได้ที่

• คู่มือฉบับภาษาอังกฤษ (User style)
• คู่มือฉบับภาษาอังกฤษ (Cascading style sheets)

และดูผลงานการตกแต่งรูปแบบวิกิพีเดีย(และโครงการที่เกี่ยวข้อง)ที่สวยงามแปลกตา และน่าสนใจโดยผู้ใช้ท่านอื่น ๆได้ที่

• Gallery of user styles(ภาษาอังกฤษ)