วิธีใช้:สไตล์ผู้ใช้
ผู้ใช้สามารถปรับแต่งชุดแบบอักษร สี ตำแหน่งของลิงก์ในขอบ และอีกมากมาย! ซึ่งปรับแต่งได้ผ่านแคสเคดดิงสไตล์ชีตส์แต่งเองที่เก็บอยู่ในหน้าย่อยของหน้า "ผู้ใช้"
เช่น ในการสร้างการดัดแปรซีเอสเอสสำหรับสกินที่คุณกำลังใช้อยู่ปัจจุบัน ให้สร้างหน้าที่ พิเศษ:หน้าของฉัน/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&action=raw&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:Prefixindexbody.ns-0
, ...,body.ns-15
(เนมสเปซ)div#bodyContent
div#column-content
div#editsection
div#globalWrapper
div#tocindent
div.tocline
h1.firstHeading
h2
h3
img.tex
ภาพ TeXsmall
– exampletable.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
- แก้ไขความย่อการแก้ไข:
input#wpSummary
บล็อกสไตล์สำคัญ
ดู 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
/* 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)