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

จากวิกิพีเดีย สารานุกรมเสรี
(เปลี่ยนทางจาก วิธีใช้:Cascading style sheets)
บทความนี้เกี่ยวกับการปรับเปลี่ยน monobook.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;
}
เปลี่ยนขอบกรอบข้อความต่างๆเป็นแบบโค้งมน (เฉพาะใน ไฟร์ฟอกซ์)

ข้อมูลภายนอก[แก้]

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

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