วิธีใช้:สไตล์ผู้ใช้

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

**ทั่วไป**
สำหรับสไตล์ที่ผู้ใช้นิยามได้ เริ่มจากการเลือกสกินก่อน ร่วมกับซีเอสเอสที่ใช้กับสกินนั้น สำหรับแต่ละสกิน ผู้ใช้มีหลายตัวเลือกในการปรับแต่งชุดแบบอักษร สี ตำแหน่งของลิงก์ในขอบ เป็นต้น ระบุซีเอสเอสโดยพาดพิงถึงตัวเลือก   : องค์ประกอบเอชทีเอ็มแอล, คลาสและไอดีที่ระบุในรหัสเอชทีเอ็มแอล ฉะนั้น โอกาสที่สกินต่าง ๆ สามารถปรับแต่งได้นั้นดูได้จากรหัสต้นทางเอชทีเอ็มแอลของหน้า โดยเฉพาะอย่างยิ่งดูที่คลาสและไอดีเหล่านี้ ยิ่งมีมากก็ยิ่งปรับแต่งได้ยืดหยุ่นมาก 
มีซีเอสเอสในซอฟต์แวร์มีเดียวิกิ และวิกิพีเดียบันทึกทับซีเอสเอสดังกล่าวโดยใช้หน้าต่อไปนี้ - Cologne Blue – มีเดียวิกิ:Cologneblue.css - Monobook – มีเดียวิกิ:Monobook.css - Vector – มีเดียวิกิ:Vector.css 
ซีเอสเอสทั้งเว็บอยู่ใน  
คุณสามารถบันทึกทับหน้าข้างต้นได้โดยใช้สไตล์ผู้ใช้ ในการทำให้การเปลี่ยนแปลงนั้นมีผลกับทุกสกิน ให้เปลี่ยน common.css ของคุณ หากต้องการให้การเปลี่ยนแปลงนั้นมีผลเฉพาะกับสกินปัจจุบัน ให้เปลี่ยน skin.css และหากต้องการการเปลี่ยนแปลงให้มีผลกับโครงการมีเดียวิกิทุกโครงการ คุณสามารุล็อกอินเข้าสู่เมทาวิกิ แล้วเปลี่ยน global.css ของคุณ 
ป้อนซีเอสเอสลงในหน้านั้น การดูตัวอย่างซีเอสเอสทำงานแบบพิเศษ คือ อนุญาตให้ดูขอบของหน้า (ไม่ใช่เนื้อหา) บนรากฐานของข้อสนเทศสไตล์ในหน้านั้น โดยที่สกินที่ใช้เป็นสกินที่หน้านำไปใช้ด้วย ทั้งนี้ มีข้อจำกัด เช่น สามารถดูตัวอย่างว่าลิงก์ในขอบจะมีหน้าตาอย่างไร แต่อาจไม่ใช่ทุกชนิดที่บุคคลต้องการตรวจสอบ หลังบันทึกแล้ว ขณะยังอยู่ในหน้านั้นหรือแม้แต่อยู่ในหน้าอื่น ให้โหลดใหม่แบบบังคับ (shift-reload/ctrl-f5) เพื่อรับไฟล์ใหม่ 
หากต้องการนำเข้าซีเอสเอสจากหน้าย่อยผู้ใช้ให้ใช้คำสั่ง importStylesheet ใน common.js ของคุณ:
importStylesheet( 'User:Example/stylesheet.css' );

**เรนเดอร์**
ต้นฉบับเอชทีเอ็มแอลของหน้าจะมีบรรทัดอย่าง 


@import "/style/wikistandard.css";
@import "/w/wiki.phtml?title=User:your-username-here/standard.css&action=raw&ctype=text/css";
สำหรับซีเอสเอสทั้งโครงการสำหรับสกินหนึ่ง ๆ (ในกรณีนี้บนวิกิพีเดียพาดพิงถึง //th.wikipedia.org style/wikistandard.css) และเจเอสและซีเอสเอสสำหรับสกินหนึ่ง ๆ 
ฉะนั้นเซิร์ฟเวอร์จัดหาเอชทีเอ็มแอลที่พาดพิงถึงไฟล์ซีเอสเอสและเจเอส แต่ไม่มีการตีความเนื้อหาใด ๆ เบราว์เซอร์เป็นผู้ตีความ โดยขึ้นอยู่กับสมรรถนะและการตั้งค่า

**ซีเอสเอส**

**ซีเอสเอสในหน้าย่อยผู้ใช้กับซีเอสเอสในไฟล์ท้องถิ่น**
นอกเหนือจากข้างต้น หรืออีกวิธีหนึ่ง สามารถตั้งซีเอสเอสท้องถิ่นบนเบราว์เซอร์ได้ หากบุคคลใช้หลายเบราว์เซอร์ เบราว์เซอร์แต่ละอย่างสามารถตั้งให้มีหลายซีเอสเอสได้ ซีเอสเอสแต่ละตัวใช้กับทั้งเวิล์ดไวด์เว็บ ไม่เพียงแต่โครงการของมีเดียวิกิเท่านั้น (และไม่ต้องเข้าสู่ระบบ) อย่างไรก็ดี การตั้งค่าจะมีผลกับเว็บเพจอื่นเฉพาะถ้ามีตัวเลือกซีเอสเอสเดียวกันเท่านั้น เช่น การตั้งค่าสำหรับตัวเลือก a.extiw มีผลกับหน้าบนเว็บน้อยกว่าตัวเลือกสำหรับ h2 (แต่มีผลกับโครงการมีเดียวิกิทุกโครงการ ไม่ใช่โครงการเดียว) 
สำหรับบรรทัดซีเอสเอสซึ่งควรแตกต่างกันไปสำหรับโครงการมีเดียวิกิ เช่น สำหรับสีพื้นหลังต่างกันเพื่อให้แยกแยะได้ง่าย ชัดเจนว่าไม่สามารถใช้ซีเอสเอสท้องถิ่นได้ ควรใส่บรรทัดเหล่านี้ในหน้าย่อยผู้ใช้   
คอมพิวเตอร์บางเครื่อง เช่น ในคาเฟ่อินเทอร์เน็ต อุปกรณ์เคลื่อนที่/แทเบล็ต ไม่อนุญาตให้ผู้ใช้ตั้งค่าพึงใจสำหรับเบราว์เซอร์ สำหรับกรณีนั้น หน้าย่อยผู้ใช้เปิดให้ตั้งค่าสไตล์ผู้ใช้ดังเดิม 
เมื่อมีการตั้งตัวเลือกเบราว์เซอร์ให้ละเลยขนาดชุดแบบอักษรที่ตั้งไว้สำหรับเว็บเพจหรือซีเอสเอสภายนอก จะต้องบรรทัดซีเอสเอสที่ว่าด้วยขนาดชุดแบบอักษรในซีเอสเอสท้องถิ่น 

**ตัวเลือกซีเอสเอส**
ตัวเลือกซีเอสเอส ที่แสดงออกในพจน์ของเอเลเมนต์ คลาสและไอดี ซึ่งเกี่ยวข้องสำหรับสไตล์ของตัวหน้าได้แก่ต่อไปนี้ มีการใส่ตัวอย่างที่เป็นไปได้ซึ่งแสดงผลลัพธ์ของการตั้งค่าสไตล์ปัจจุบัน
*code=:link — ลิงก์ — ค่าโดยปริยาย: help:index
*code=:link:link
*code=:link:visited
*code=:link#contentTop
*code=:link.external — http://example ; ค่าโดยปริยาย: 
*code=:link.extiw – ลิงก์ข้ามโครงการในตัวหน้า – ; ค่าโดยปริยาย: en:example
*code=:link.image – ลิงก์จากภาพเต็มไปยังหน้าคำบรรยายภาพ
*code=:link.internal – ลิงก์ไปตัวไฟล์เอง (สื่อ:) และลิงก์จากภาพขนาดย่อและไอคอนแว่นขยายไปหน้าคำบรรยายภาพ (หมายเหตุว่าสีและขนาดชุดแบบอักษรที่กำหนดไว้สำหรับ a.internal จะใช้ได้เฉพาะกับกรณีแรกเท่านั้น)
*code=:link.new example ; ค่าโดยปริยาย: example
*code=.allpagesredirect – abc – การเปลี่ยนทางใน Special:Allpages และ Special:Prefixindex
*code=body.ns-0, ..., code=body.ns-15 (เนมสเปซ)
*code=div#bodyContent
*code=div#column-content
*code=div#editsection
*code=div#globalWrapper
*code=div#tocindent
*code=div.tocline
*code=h1.firstHeading
*code=h2
*code=h3
*code=img.tex ภาพ TeX
*code=small – example
*code=table.toc 
code=a  กับ code=:link  – เป็นข้อผิดพลาดทั่วไปที่จะใช้ " code=a " แทน " code=:link " เพื่อจัดสไตล์ลิงก์ ในขณะที่ " code=:link " ใช้เฉพาะกับลิงก์ " code=a  " ใช้กับทั้งลิงก์และหลักยึดมีชื่อ (เช่น code=  ) 
ปกติลิงก์ภายในไม่อยู่ในคลาส code=internal  (แต่ยังใช้อยู่ในเว็บไซต์ที่ใช้ซอฟต์แวร์รุ่นเก่า เช่น  ); สามารถใช้คลาสนี้จัดสไตล์เมื่อพาดพิง code=:link  และ code=:link:visited  โดยทั่วไป หลังการจัดสไตล์ code=:link.extiw  ฯลฯ สามารถให้ข้อยกเว้นแก่สไตล์ทั่วไปสำหรับลิงก์ 
สำหรับลิงก์ข้ามภาษา 
บุคคลอาจให้สไตล์เปลี่ยนไปตามลักษณะประจำหนึ่งได้ เช่น ด้วยตัวเลือก: 
*:linktitle ="User:username"
*:linktitle ="pagename"
*:linkhref ="full url "
เพื่อทำสีรหัสหรือเน้นผู้ใช้คนใดคนหนึ่ง (รวมถึงตัวเอง) และ/หรือ ลิงก์ไปหน้าใดหน้าหนึ่ง (เช่นการทำตัวเส้นหนาหน้าที่เฝ้าดูในการเปลี่ยนแปลงล่าสุด) ซึ่งใช้ได้บนโอเปรา แต่ใช้ไม่ได้บนอินเทอร์เน็ตเอ็กซพลอเรอร์  
รายการเฝ้าดูและเปลี่ยนแปลงล่าสุดใช้สองคลาส: - code=autocomment  ตัวอย่าง- code=new  (ดูด้านล่าง) 
ประวัติหน้ามีคลาส code=autocomment  และ: - code=user  - code=minor  
ดังนั้นชุดแบบอักษรที่กำหนดสำหรับ user จะใช้กับประวัติหน้า แต่ไม่มีการใช้ในรายการเฝ้าดูและเปลี่ยนแปลงล่าสุด 

**แก้ไขหน้า**
 กล่องแก้ไข: code=textarea#wpTextbox1  
example1 - แก้ไขความย่อการแก้ไข: code=input#wpSummary  
example2 

**บล็อกสไตล์สำคัญ**
ดู meta:Customization:Explaining_skins

**ไม่แสดงผล**
"สไตล์" แบบสุดขั้วอย่างหนึ่งสำหรับข้อความ คือ ไม่ให้แสดงผลข้อความนั้น โดย 
.classname {display: none}
#id {display: none}
เป็นต้น 
การห้ามลิงก์แสดงผลจะไม่ทำงาน (แต่ลิงก์ในชุดแบบอักษรขนาดเล็กมากยังใช้งานได้) 
ไม่สามารถใช้สไตล์นี้เพื่อลบข้อความในนิพจน์สำหรับชื่อแม่แบบ ชื่อตัวแปรเสริม ค่าตัวแปรเสริม ชื่อหน้าในลิงก์ เป็นต้น 
ในเมทา m:MediaWiki:Common.css มี

**สไตล์ที่ขึ้นอยู่กับพารามิเตอร์หรือตัวแปร**

**คลาสหรือไอดีตัวแปร**
คลาสหรือไอดีสามารถขึ้นอยู่กับผลลัพธ์ที่ได้จากแม่แบบหรือในตัวแปรเสริมแม่แบบได้ เช่น class="abc {def} " สำหรับชื่อคลาสที่ใช้ได้ สามารถนิยามสไตล์ของคลาสนั้นได้ หากไม่นิยามคลาสนั้น จะละเลยสไตล์นั้นและใช้สไตล์มาตรฐานแทน 
ในกรณีง่ายที่สุด ยกตัวอย่าง class="abc  " และนิยามคลาส abcdef หากค่าพารามิเตอร์คือ "def" จะใช้คลาสดังกล่าว 
ถ้าหน้าสำหรับใช้ทั่วไปสมเหตุสมผลเฉพาะเมื่อนิยามสไตล์สำหรับบางคลาส เช่นนั้นเจาะจงคลาสในหน้า มีเดียวิกิ:Common.css ซึ่งใช้สำหรับผู้ใช้ทุกคนและทุกสกิน ตราบเท่าที่ไม่มีการบันทึกทับ 

**ชื่อลักษณะประจำเอชทีเอ็มแอลแปรได้**
ชื่อลักษณะประจำสามารถทำให้แปรได้ HTML Tidy ไลบรารี HTML4 ที่ล้าสมัยซึ่งมีกำหนดลบออก เดิมมีลักษณะประจำที่เคยถูกลบโดยมีชื่อที่ไม่สมเหตุสมผลในฝั่งเซิร์ฟเวอร์ ฉะนั้นผลลัพธ์ไม่ขึ้นอยู่กับสมรรถนะของเบราว์เซอร์ในการละเลยชื่อลักษณะประจำที่ไม่สมเหตุสมผล และจะลดปริมาณข้อมูลที่ส่ง 

**ค่าตัวแปรเสริมสไตล์แปรได้**
ข้อความวิกิอย่าง 
Wed
แสดง "Wed" หากมีการกำหนดตัวแปรเสริม 3 แต่ไม่ใช่ "none" และจะไม่แสดงหากไม่ได้กำหนดตัวแปรเสริม 3 หรือมีค่า "none" หากค่าของตัวแปรเสริม 3 เป็นสไตล์แสดงนอกเหนือจาก "none" จะใช้สไตล์นั้น

**ตัวอย่าง**
สามารถใส่สไตล์กำหนดเองได้ในไฟล์ซีเอสเอสส่วนบุคคลของผู้ใช้ เช่น พิเศษ:Mypage/common.css ซึ่งผู้ใช้แต่ละคนสามารถแก้ไขเพื่อตั้งสไตล์ส่วนบุคคลได้ 
/* make the background behind the content area and the tabs a light grey */
#content, #content table
#p-cactions ul li a { background: #f5f5f5; }
/* stop background image from scrolling with content area */
body { background-attachment: fixed; }
/* replace the book in the background with something else */
body { background: Purple; }
/* changes the background of pre areas  */
pre { background: White }
/* change the logo */
#p-logo a { background: url(https://upload.wikimedia.org/wikipedia/commons/9/93/Color-chars-logo.png) 35% 50% no-repeat; }
/* don't use any logo, move the boxes onto that area instead */
#p-logo { display: none }
#column-one { padding-top: 0; }
/* suppress the person icon by your username */
li#pt-userpage { background: none }
/* use browser prefs for text size and font */
html, body, #globalWrapper { font: inherit !important; }
/* always underline links */
link { text-decoration: underline; }
/*Display body content in a narrower column for easier reading*/
/*adjust percentages as desired*/
div#bodyContent {
width: 50%;
line-height: 105%;
}
/* change background of unselected tabs */
#p-cactions ul li a { background: #C7FDC7; }
/* change background of selected tabs */
#p-cactions ul li.selected a { background: white; }
/* change border background of selected tabs */
#p-cactions li.selected { border-color: #aaaaaa; }
/* tab bottom not removed on hover */
#p-cactions li a:hover { z-index: 0; text-decoration: none; }
#p-cactions li.selected a:hover { z-index: 3; }
/* style the search box and the buttons below it */
.searchButton {
background-color: #efefef;
border: 1px outset;
}
#searchInput { border: 1px inset; }
/* standard link colors */
a:link { color: #0645ad; }
a:visited { color: #0b0080; }
a.new:link { color: #cc2200; }
a.new:visited { color: #a55858; }
a.extiw:link { color: #3366bb; } /* links to other Wikipedias */
a.extiw:visited { color: #3366bb; }
a.external:link { color: #3366bb; } /* external links */
a.external:visited { color: #3366bb; }
/* put scrollbar on pre sections instead of ugly cutoff/overlap in Firefox */
pre { overflow: auto; }
/* strikeout Upload File link as a reminder to upload to Commons instead */
li#t-upload { text-decoration: line-through; }
/* center/centre the title of each page */
.firstHeading { text-align: center; }
/* Double-redirect warning */
div.redirectMsg a.mw-redirect:after {
content: ' ';
color: Red;
font-style: italic;
}
/* Prevent the new CSS in "Typography Refresh" (since early 2014) from showing page titles and headings in serif font */
h1, h2 { font-family: inherit !important; }
/* Display persondata boxes in articles */
table.persondata { display:table; }
/* Get rid of tedious warnings */
#editpage-copywarn, #editpage-copywarn2, #editpage-copywarn3,
#editpage-head-copywarn, .editpage-head-copywarn,
#editnotice_BLP_editintro, .ve-ui-mwSaveDialog-license
{ display: none !important; }
/* Get rid of tedious noob boilerplate */
#category-namespace-editnotice, #footer-info-copyright, #sitesub, .edithelp,
.posteditwindowhelplinks, #footer-icons, .ve-ui-mwSaveDialog-summaryLabel
{ display: none !important; }
/* Save space in list of templates displayed at end of page when editing */
templatesUsed ul, :templatesUsed li {display: inline; padding-right: 5px;}
/* Change all text to the font “Avenir” (except headers) (you can change the font to anything else) */
.mw-body h1, .mw-body h2 {
font-family: "Avenir"
}

**Rounded corners**
Rounded corner rules in Firefox
/* make a few corners round */
#p-cactions ul li, #p-cactions ul li a {
border-top-left-radius: 1em;
border-top-right-radius: 1em;
}
#content {
border-top-left-radius: 1em;
border-bottom-left-radius: 1em;
}
.pBody {
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
}

**มุมมน**
 Moz: ดูกฎข้างต้น- http://www.vertexwerks.com/tests/sidebox/ – การจัดรูปแบบกล่องข้าง- http://www.alistapart.com/articles/slidingdoors2/ – rounded tabs with rollover effect- http://www.alistapart.com/articles/customcorners/ – อีกตัวแปรหนึ่งสำหรับมุมกล่องมน- http://alistapart.com/articles/customcorners2/,  สาธิต- http://www.alistapart.com/articles/mountaintop/ – ตัวแปรมุมที่แปลกมากขึ้น- http://www.virtuelvis.com/gallery/css/rounded/ – แบบฟรีสไตล์เรียบง่ายที่ใช้ส่วนย่อยเทียม :before และ :after (เฉพาะเบราว์เซอร์ css2 ไม่รวม IE)

**การปรับมุมมองการพิมพ์**
/** Place all print-specific rules in an @media print block.
*/
/* save ink and paper with very small fonts */
@media print {
#footer,
#content,
body { font-size: 8pt !important; }
h1 { font-size: 17pt }
h2 { font-size: 14pt }
h3 { font-size: 11pt }
h4 { font-size: 9pt }
h5 { font-size: 8pt }
h6 {
font-size: 8pt;
font-weight: normal;
}
}
/* Advanced things: using :before and :after it's possible to add formatting
this here adds the full href of a link after it (not needed in the current version): */
@media print {
#content a:link:after,
#content a:visited:after {
content: " ( " attr(href) " ) ";
}
}

**ทำให้แถบเครื่องมือผู้ใช้เป็นกล่องข้าง**
ทดสอบแล้วใช้การได้บน Camino, Safari และ Internet Explorer 7 
/* Transform the user toolbar into a sidebox */
#p-personal {
position:relative;
z-index:3;
width: 11.6em;
}
#p-personal .pBody {
width: 10.7em;
border: none;
margin: 0 0 0.1em 0em;
float: none;
overflow: hidden;
font-size: 95%;
background: White;
border-collapse: collapse;
border: 1px solid #aaaaaa;
padding: 0 0.8em 0.3em .5em;
}
#p-personal ul {
line-height: 1.5em;
list-style-type: square;
list-style-image: url("/style/monobook/bullet.gif");
font-size:95%;
margin: 0 0 0 1.5em;
padding:0;
text-align:left;
text-transform: none;
}
#p-personal li {
display: list-item;
padding:0;
margin: 0 0 0 0;
margin-bottom: 0.1em;
}
/* suppress the person icon by your username */
/* needed if not already in place */
li#pt-userpage { background: none }

**ตรึงตำแหน่งของแถบข้างขณะเลื่อนขึ้นลง**
ในสกินเวกเตอร์โดยปริยาย สามารถตรึงตำแหน่งของแถบข้างได้โดยง่าย 
/* Fix sidebar */
div#mw-panel { position: fixed;
overflow: auto;
top: 0px;
bottom: 0px;
height: 100%;
/* Prevent content overlay when sidewards scrolling */
background-color: #F6F6F6;
border-right: 1px solid #A7D7F9;
}
/* Prevent sidewards scrolling in pre elements */
pre {
overflow: auto;
max-height: 25em;
}
แต่อาจมีผลข้างเคียงไม่พึงประสงค์ในโครม เช่น เมื่อชมหน้า common.css ที่คุณเพิ่งแก้ไขเพื่อใส่รหัสนี้เข้าไป เนื้อหาที่ชมได้ในจอภาพจะสั้นลงมาก ทำให้ต้องเลื่อนแนวตั้งในเฟรม 

**การย้ายลิงก์หมวดหมู่**
/******************************************************************/
/* moving catlinks to the right                                   */
/******************************************************************/
/* move the catlinks box */
#catlinks {
position:absolute;
z-index:1;
/*  border: 1px solid #aaaaaa;
background: #fafaff; */
right:1em;
top:-0.25em;
width:10.5em;
float:right;
margin: 0.2em;
padding:0.2em;
}
/* format the catlinks itself */
p.catlinks {
color: #aaaaaa;
font-family: Verdana,sans-serif;
font-size:67%;
line-height: 1.5em;
text-align:left;
text-indent:0;
text-transform: none;
white-space:normal;
margin: 0.2em;
}
#p-personal h5 {
display: inline;
}
/* format links in the catlinks (as distinguished from ":" and "|") */
p.catlinks a {
color:#888888;
}

**การจัดมุมมองผลต่าง**
/* don't use a smaller font */
td.diff-addedline, td.diff-deletedline, td.diff-context { font-size: 100% };
/* underline just the text that's different */
span.diffchange { text-decoration:underline; }

**การลบปุ่ม "(ขอบคุณ)" ในปูมประวัติ**
/*Suppress "(thank)" buttons*/
.mw-thanks-thank-link { display:none; }

**ซ่อนสารคำชี้แจงขนาดยาว**
/* hide View-Source blurb when editing a protected page */
#mw-protectedpagetext { display: none; }
เช่นเดียวกับสไตล์ซีเอสเอสอื่นข้างต้น ให้แก้ไข พิเศษ:หน้าของฉัน/skin.css หรือ พิเศษ:หน้าของฉัน/common.css เพื่อแทรกซีเอสเอสกำหนดเองแล้วรีเฟรชแคชของเบราว์เซอร์

**ลิงก์ภายนอกสำหรับซีเอสเอส**
 http://www.22bulbjungle.com/ – great css tutorials- http://www.csszengarden.com/ – inspiration- http://css-discuss.incutio.com/ – highly concentrated info, very comprehensive- http://www.alistapart.com/ – great articles- http://www.positioniseverything.net/ – some entertaining i.e. bugs and more- http://meyerweb.com/eric/css/edge/ – great ideas for advanced css

**จาวาสคริปต์**
จาวาสคริปต์มีความเป็นไปได้มากมาย ตัวอย่างเช่น การเติมข้อความ รวมทั้งลิงก์ ณ ตำแหน่งที่ต้องการ เนื้อหาเสริมเหล่านี้อาจขึ้นอยู่กับเนื้อหาของหน้าต้นทางเอชทีเอ็มแอลที่เซิร์ฟเวอร์ผลิต ตัวอย่างเช่น อาจขึ้นอยู่กับส่วนย่อยเอชทีเอ็มแอลที่มีไอพี เมื่อใช้ getElementById ตำแหน่งของการแทรกอาจกำหนดโดย insertBefore 
ตัวอย่างเช่น ในการเพิ่มลิงก์หน้าด้านซ้ายของการตั้งค่าของคุณ ให้เติมรหัสต่อไปนี้ใน พิเศษ:Mypage/common.js โดยแทน PageTitle ด้วยชื่อเรื่องของหน้าวิกินั้น 
mw.util.addPortletLink(	'p-personal', '/wiki/PageTitle', 'PageTitle', null, null, null, '#pt-preferences');

**ย้ายหมวดหมู่ขึ้นด้านบน**
รหัสต่อไปนี้จะย้ายกล่องหมวดหมู่ไปบนสุดของบทความ แน่นอนว่าคุณอาจต้องการใช้ซีเอสเอสเพิ่มเพื่อให้ดูสวยงามขึ้น 
function catsattop() {
var cats = document.getElementById('catlinks');
var bc = document.getElementById('bodyContent');
bc.insertBefore(cats, bc.childNodes0);
}
อีกทางเลือกหนึ่ง คือเมื่อใช้ร่วมกับสไตล์ชีตที่เหมาะสม จะใส่ข้อความขึ้นอยู่ในประมาณบรรทัดเดียวกับชื่อเรื่อง 
function categoryToTop() {
var thebody = document.getElementById('contentTop');
var categories = document.getElementById('catlinks');
if (categories != null) {
categories.parentNode.removeChild (categories);
thebody.parentNode.insertBefore(categories, thebody);
}
}
ซีเอสเอสบางชนิดยังใช้ได้ด้วย 
/* move the catlinks box */
#catlinks {
right:1em;
top:-0.25em;
max-width: 50%; /* this limits the box size, but doesn't set strictly */
float: right;
margin: 0.5em;
padding: 0.2em;
}
/* format the catlinks itself */
p.catlinks {
font-size:67%;
text-align:left;
text-indent:0;
text-transform: none;
white-space:normal;
margin: 0.2em;
}
อย่างไรก็ดี หากกล่องหมวดหมู่มีขนาดใหญ่ เช่น ในบทความชีวประวัตินายกรัฐมนตรีไทยหรือบุคคลสำคัญอื่น กล่องจะไปเบียดกล่องข้อมูลไปด้านข้าง สามารถใส่ลักษณะประจำ "clear: right" ในกล่องข้อมูลเพื่อแก้ไขปัญหานี้ 

**ซีเอสเอสที่ควบคุมด้วยข้อความวิกิ**
สามารถควบคุมซีเอสเอสผ่านเจเอสได้ด้วยข้อความวิกิ ตัวอย่างเช่น ส่วนย่อยเอชทีเอ็มแอล "span" ที่ไม่มีเนื้อหาสามารถเป็นตัวแปรเสริมให้แก่เจเอสที่เจาะจงซีเอสเอสสำหรับส่วนใดของหน้าก็ได้ผ่านคลาสและไอดีของมัน ตัวอย่างเช่น หากหน้ามีส่วนย่อย "span" โดยมีคลาส FA และไอดี lc มีเดียวิกิ:Monobook.js เจาะจงสไตล์และชื่อเรื่องสำหรับส่วนย่อย "li" ของคลาส  interwiki-lc ฉะนั้นจึงควบคุมสไตล์และชื่อเรื่องของลิงก์ข้ามภาษาในรหัสภาษา lc ในขอบ ทั้งนี้ หากสกินนั้นเจาะจงคลาส  interwiki-lc (ตัวอย่างเช่น Cologne Blue เจาะจง class='external' สำหรับแต่ละภาษา จึงใช้การไม่ได้บนสกินนั้น) 

**ลิงก์ภายนอกสำหรับเจเอส**
 http://www.quirksmode.org/ – see the JavaScript and DOM section- http://www.alistapart.com/- http://www.quirksmode.org/dom/domform.html – form cloning (might be possible to upload a few images at once using this, also a good starting point for the structure cloning)

**ดูเพิ่ม**
 วิธีใช้:แคสเคดดิงสไตล์ชีตส์ - mw:Gallery of user styles - mw:Skin projects - mw:Help:Preferences, m:Help:Preferences - m:Customization:Explaining skins - mw:Help:Configuration settings (โดยเฉพาะอย่างยิ่ง mw:Manual:$wgAllowUserJs และ mw:Manual:$wgAllowUserCss) 
หมวดหมู่:คุณลักษณะวิกิพีเดีย
หมวดหมู่:เนมสเปซผู้ใช้วิกิพีเดีย