ข้ามไปเนื้อหา

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

จากวิกิพีเดีย สารานุกรมเสรี

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

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

ทั่วไป

[แก้]

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

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

ซีเอสเอสทั้งเว็บอยู่ใน

คุณสามารถบันทึกทับหน้าข้างต้นได้โดยใช้สไตล์ผู้ใช้ ในการทำให้การเปลี่ยนแปลงนั้นมีผลกับทุกสกิน ให้เปลี่ยน 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: ' &lt;double redirect&gt;';
  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;
}

มุมมน

[แก้]

การปรับมุมมองการพิมพ์

[แก้]
/*
** 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 เพื่อแทรกซีเอสเอสกำหนดเองแล้วรีเฟรชแคชของเบราว์เซอร์

ลิงก์ภายนอกสำหรับซีเอสเอส

[แก้]

จาวาสคริปต์

[แก้]

จาวาสคริปต์มีความเป็นไปได้มากมาย ตัวอย่างเช่น การเติมข้อความ รวมทั้งลิงก์ ณ ตำแหน่งที่ต้องการ เนื้อหาเสริมเหล่านี้อาจขึ้นอยู่กับเนื้อหาของหน้าต้นทางเอชทีเอ็มแอลที่เซิร์ฟเวอร์ผลิต ตัวอย่างเช่น อาจขึ้นอยู่กับส่วนย่อยเอชทีเอ็มแอลที่มีไอพี เมื่อใช้ 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' สำหรับแต่ละภาษา จึงใช้การไม่ได้บนสกินนั้น)

ลิงก์ภายนอกสำหรับเจเอส

[แก้]

ดูเพิ่ม

[แก้]
เข้าถึงจาก "https://th.wikipedia.org/w/index.php?title=วิธีใช้:สไตล์ผู้ใช้&oldid=8462490"