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

ผู้ใช้สามารถปรับแต่งชุดแบบอักษร สี ตำแหน่งของลิงก์ในขอบ และอีกมากมาย! ซึ่งปรับแต่งได้ผ่านแคสเคดดิงสไตล์ชีตส์แต่งเองที่เก็บอยู่ในหน้าย่อยของหน้า "ผู้ใช้"

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

ทั่วไป

สำหรับสไตล์ที่ผู้ใช้นิยามได้ เริ่มจากการเลือกสกินก่อน ร่วมกับซีเอสเอสที่ใช้กับสกินนั้น สำหรับแต่ละสกิน ผู้ใช้มีหลายตัวเลือกในการปรับแต่งชุดแบบอักษร สี ตำแหน่งของลิงก์ในขอบ เป็นต้น ระบุซีเอสเอสโดยพาดพิงถึงตัวเลือก [1] : องค์ประกอบเอชทีเอ็มแอล, คลาสและไอดีที่ระบุในรหัสเอชทีเอ็มแอล ฉะนั้น โอกาสที่สกินต่าง ๆ สามารถปรับแต่งได้นั้นดูได้จากรหัสต้นทางเอชทีเอ็มแอลของหน้า โดยเฉพาะอย่างยิ่งดูที่คลาสและไอดีเหล่านี้ ยิ่งมีมากก็ยิ่งปรับแต่งได้ยืดหยุ่นมาก

มีซีเอสเอสในซอฟต์แวร์มีเดียวิกิ และวิกิพีเดียบันทึกทับซีเอสเอสดังกล่าวโดยใช้หน้าต่อไปนี้

• 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' ); 

เรนเดอร์

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

 <script type="text/javascript" src="/w/wiki.phtml?title=User:your-username-here/standard.js&amp;action=raw&amp;ctype=text/javascript"> </script> @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 (แต่มีผลกับโครงการมีเดียวิกิทุกโครงการ ไม่ใช่โครงการเดียว)

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

คอมพิวเตอร์บางเครื่อง เช่น ในคาเฟ่อินเทอร์เน็ต อุปกรณ์เคลื่อนที่/แทเบล็ต ไม่อนุญาตให้ผู้ใช้ตั้งค่าพึงใจสำหรับเบราว์เซอร์ สำหรับกรณีนั้น หน้าย่อยผู้ใช้เปิดให้ตั้งค่าสไตล์ผู้ใช้ดังเดิม

เมื่อมีการตั้งตัวเลือกเบราว์เซอร์ให้ละเลยขนาดชุดแบบอักษรที่ตั้งไว้สำหรับเว็บเพจหรือซีเอสเอสภายนอก จะต้องบรรทัดซีเอสเอสที่ว่าด้วยขนาดชุดแบบอักษรในซีเอสเอสท้องถิ่น

ตัวเลือกซีเอสเอส

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

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

a กับ :link – เป็นข้อผิดพลาดทั่วไปที่จะใช้ " a " แทน " :link " เพื่อจัดสไตล์ลิงก์ ในขณะที่ " :link " ใช้เฉพาะกับลิงก์ " a " ใช้กับทั้งลิงก์และหลักยึดมีชื่อ (เช่น <a name="bookmark"> )

ปกติลิงก์ภายในไม่อยู่ในคลาส internal (แต่ยังใช้อยู่ในเว็บไซต์ที่ใช้ซอฟต์แวร์รุ่นเก่า เช่น [2] ); สามารถใช้คลาสนี้จัดสไตล์เมื่อพาดพิง :link และ :link:visited โดยทั่วไป หลังการจัดสไตล์ :link.extiw ฯลฯ สามารถให้ข้อยกเว้นแก่สไตล์ทั่วไปสำหรับลิงก์

สำหรับลิงก์ข้ามภาษา

• {{code|lang=css|code=#p-lang a}}

บุคคลอาจให้สไตล์เปลี่ยนไปตามลักษณะประจำหนึ่งได้ เช่น ด้วยตัวเลือก:

• :link[title ="User:username"]
• :link[title ="pagename"]
• :link[href ="full url "]

เพื่อทำสีรหัสหรือเน้นผู้ใช้คนใดคนหนึ่ง (รวมถึงตัวเอง) และ/หรือ ลิงก์ไปหน้าใดหน้าหนึ่ง (เช่นการทำตัวเส้นหนาหน้าที่เฝ้าดูในการเปลี่ยนแปลงล่าสุด) ซึ่งใช้ได้บนโอเปรา แต่ใช้ไม่ได้บนอินเทอร์เน็ตเอ็กซพลอเรอร์

รายการเฝ้าดูและเปลี่ยนแปลงล่าสุดใช้สองคลาส:

• autocomment
  ตัวอย่าง
• new (ดูด้านล่าง)

ประวัติหน้ามีคลาส autocomment และ:

• user
• minor

ดังนั้นชุดแบบอักษรที่กำหนดสำหรับ user จะใช้กับประวัติหน้า แต่ไม่มีการใช้ในรายการเฝ้าดูและเปลี่ยนแปลงล่าสุด

แก้ไขหน้า

• กล่องแก้ไข: textarea#wpTextbox1

example1

• แก้ไขความย่อการแก้ไข: input#wpSummary

example2

บล็อกสไตล์สำคัญ

ดู meta:Customization:Explaining_skins

ไม่แสดงผล

"สไตล์" แบบสุดขั้วอย่างหนึ่งสำหรับข้อความ คือ ไม่ให้แสดงผลข้อความนั้น โดย

.classname {display: none} #id {display: none} 

เป็นต้น

การห้ามลิงก์แสดงผลจะไม่ทำงาน (แต่ลิงก์ในชุดแบบอักษรขนาดเล็กมากยังใช้งานได้)

ไม่สามารถใช้สไตล์นี้เพื่อลบข้อความในนิพจน์สำหรับชื่อแม่แบบ ชื่อตัวแปรเสริม ค่าตัวแปรเสริม ชื่อหน้าในลิงก์ เป็นต้น

ในเมทา m:MediaWiki:Common.css มี

 .hiddenStructure {display: none} 

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

คลาสหรือไอดีตัวแปร

คลาสหรือไอดีสามารถขึ้นอยู่กับผลลัพธ์ที่ได้จากแม่แบบหรือในตัวแปรเสริมแม่แบบได้ เช่น class="abc def " สำหรับชื่อคลาสที่ใช้ได้ สามารถนิยามสไตล์ของคลาสนั้นได้ หากไม่นิยามคลาสนั้น จะละเลยสไตล์นั้นและใช้สไตล์มาตรฐานแทน

ในกรณีง่ายที่สุด ยกตัวอย่าง class="abc {{{1}}} " และนิยามคลาส abcdef หากค่าพารามิเตอร์คือ "def" จะใช้คลาสดังกล่าว

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

ชื่อลักษณะประจำเอชทีเอ็มแอลแปรได้

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

ค่าตัวแปรเสริมสไตล์แปรได้

ข้อความวิกิอย่าง

<span style="display:{{{3|none}}}">Wed</span> 

แสดง "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: ' <double redirect>'; 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.childNodes[0]); } 

อีกทางเลือกหนึ่ง คือเมื่อใช้ร่วมกับสไตล์ชีตที่เหมาะสม จะใส่ข้อความขึ้นอยู่ในประมาณบรรทัดเดียวกับชื่อเรื่อง

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)