본문 바로가기
미디어위키

Help User style

by 다움위키 2024. 12. 13.

원문 보기: https://dawoum.duckdns.org/wiki/Help:User_style

 

사용자는 글꼴, 색상, 여백의 링크 위치, 및 기타 여러 사항을 사용자 정의할 수 있습니다! 이것은 사용자의 "User" 페이지의 하위 페이지에 저장된 사용자 정의 Cascading Style Sheets를 통해 수행됩니다.

예를 들어, 현재 사용 중인 스킨에 대해 자신의 CSS 수정 사항을 직접 만들기 위해, Special:MyPage/skin.css에 사용하려는 CSS를 포함하는 페이지를 만드십시오 (사용하는 스킨에 관계없이 변경 사항을 적용하기 위해, 대신 Special:MyPage/common.css에 그것들을 넣으십시오). 특정 메시지를 숨기는 방법에 대해, WP:CSSHIDE를 참조하십시오.

General

Cascading Style Sheets

사용자-정의가능 스타일마다, 스킨이 먼저 선택되고, 해당 Cascading Style Sheet (CSS)도 함께 선택됩니다. 각 스킨마다, 사용자는 글꼴, 색상, 여백에서 링크 위치, 등에 관해 다양한 선택을 할 수 있습니다. CSS는 선택자 [1]: HTML 코드에 지정된 HTML 요소, 클래스, ID를 참조하여 지정됩니다. 그에 따라서, 각 스킨에 대한 가능성은 페이지의 HTML 소스 코드, 특히 이러한 클래스와 ID를 살펴보면 알 수 있습니다: 클래스와 ID가 많을수록 다양성이 커집니다.

미디어위키 소프트웨어 자체에는 CSS가 있고, 다움위키는 다음 페이지를 사용하여 이를 재정의합니다:

사이트-전체 CSS는 MediaWiki:Common.css에 있습니다.

사용자 스타일을 사용하여 직접 이를 덮어쓸 수 있습니다. 현재 스킨과 관계 없이 적용되는 변경 사항을 만들기 위해, common.css를 변경하십시오. 현재 스킨에 영향을 미치는 변경 사항을 만들기 위해, skin.cs를 변경하십시오. 모든 위키미디어 프로젝트에 영향을 미치는 변경 사항을 만들기위해, Meta에 로그인하여 global.css를 변경하십시오.

해당 페이지에 CSS를 입력하십시오. CSS의 미리보기는 특별한 방식으로 작동합니다: 사용된 스킨이 페이지에 적용되는 스킨이라는 조건으로 하여, 페이지에서 스타일 정보를 기반으로 페이지의 여백 (컨텐츠가 아님)을 볼 수 있습니다. 여기에는 제한이 있습니다. 예를 들어, 여백에서 링크가 어떻게 보일지 미리 볼 수 있지만, 이것들은 확인하고 싶은 모든 유형이 아닐 수 있습니다. 저장한 후, 페이지에 있는 동안 또는 또 다른 페이지에 있는 동안 강제로 다시 로드(shift-reload/ctrl-f5)하여 새 파일을 가져오십시오.

사용자 CSS가 자동으로 로드되도록 하기 위해, config에서 $wgAllowUserCss 변수가 true로 설정되어 있는지 확인하십시오. 그렇지 않으면, JavaScript로 로드할 수 있습니다.

JavaScript를 사용하여 사용자 하위 페이지에서 CSS를 가져오기 위해, common.js에서 mw.loader.load 명령을 사용하십시오:

 mw.loader.load( '/w/index.php?title=User:Example/stylesheet.css&action=raw&ctype=text/css', 'text/css' );

JavaScript & user scripts

위키피디아에서, JavaScript를 사용하여 찾기/바꾸기 텍스트 상자를 추가하거나 고급 롤백 옵션을 제공하는 것과 같은 새로운 기능을 추가할 수 있습니다. 기본 글꼴 스타일에서 사용자 지정 버튼에 이르기까지 모든 것을 사용자 지정하는 스크립트가 있습니다.

많은 스크립트 페이지를 가져와서 사용할 수 있습니다. 역시 서로 다른 스크립트를 함께 사용하여 여러 작업을 한 번에 수행할 수 있습니다. 일부 스크립트는 "가젯"으로 사용할 수 있습니다. 즉, Special:Preferences의 "Gadgets" 탭에서 상자를 체크하기만 하면 설치할 수 있습니다.

JavaScript 페이지에 기존 스크립트를 추가하기 위해, {{subst:js|name of script}}을 파일에 추가하십시오. 더 자세한 지침은 Wikipedia:User scripts/Guide에서 찾을 수 있습니다.

Rendering

페이지의 HTML 소스에는 특정 스킨에 대한 프로젝트-전체 CSS (https://dawoum.duckdns.org/style/wikistandard.css를 참조하는 다움위키에서 이 경우에서)에 대한 다음과 특정 스킨에 대한 개인 JS 및 CSS와 같은 줄이 포함되어 있습니다:

 <script 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";

따라서 서버는 CSS와 JS 파일을 참조하는 HTML을 제공하지만, 그 컨텐츠에 대한 해석은 하지 않습니다. 해석은 브라우저에 의해 기능과 설정에 의존하여 수행됩니다.

CSS

CSS in user subpages versus CSS in a local file

위에 언급한 것 외에도, 또는 대안으로, 지역 CSS를 브라우저에 설정할 수 있습니다. 여러 브라우저를 사용하면, 각각은 다른 CSS로 설정될 수 있습니다. 각각은 미디어위키 프로젝트뿐만 아니라 전체 World Wide Web에 적용됩니다 (그리고 로그인 여부에 따라 달라지지 않습니다). 어쨌든, 설정은 같은 CSS 선택기를 사용하는 경우에만 다른 웹 페이지에 영향을 미칩니다; 예를 들어, 선택기 a.extiw에 대한 설정은 h2에 대한 설정보다 웹의 페이지에 영향을 덜 미칩니다 (하지만 적어도 모든 미디어위키 프로젝트에 영향을 미치며 하나만 영향을 미치는 것은 아닙니다).

예를 들어, 쉽게 구분할 수 있도록 배경색을 다르게 하는 등 미디어위키 프로젝트마다 다르게 적용해야 하는 CSS 줄에 대해, 지역 CSS를 사용할 수 없다는 것은 명백합니다; 최소한 이들 줄은 사용자 하위 페이지에 넣어야 합니다.

일부 컴퓨터 (예를 들어, 인터넷 카페, 모바일 기기/태블릿)에서는 사용자가 브라우저에 대한 환경 설정을 할 수 없습니다. 그런 경우에서, 어쨌든 사용자 하위 페이지에서 사용자 스타일을 설정할 수 있습니다.

브라우저에서 웹 페이지나 외부 CSS에 지정된 글꼴 크기를 무시하는 옵션이 설정될 때, 글꼴 크기와 관련된 CSS 줄을 지역 CSS에 넣어야 합니다.

CSS selectors

페이지 본문의 스타일과 관련하여 CSS 선택기는 요소, 클래스, 및 id로 표현되며, 다음을 포함합니다. 가능한 한, 현재 스타일 설정에 대한 결과를 보여주는 예를 제공합니다:

  • :link — links — example: Help:Index ; default: help:index (See a vs :link)
  • :link:link
  • :link:visited
  • :link#contentTop
  • :link.external — http://example ; default: http://example
  • :link.extiw – interwiki link in page body – ; default: en:example
  • :link.image – link from full image to image description page
  • :link.internal – link to file itself (Media:), and links from thumbnail and magnifying glass icon to image description page (note that color and font size specified for a.internal are only applicable in the first case)
  • :link.new example ; default: example
  • .allpagesredirect – abc – redirects in Special:Allpages and Special:Prefixindex
  • body.ns-0, ..., body.ns-15 (namespaces)
  • div#bodyContent
  • div#column-content
  • div#editsection
  • div#globalWrapper
  • div#tocindent
  • div.tocline
  • h1.firstHeading
  • h2
  • h3
  • img.tex TeX image
  • small – example
  • table.toc

a vs :link – 링크 스타일을 지정할 때 ":link" 대신 "a"를 사용하는 것은 공통적인 실수입니다. ":link"는 링크에만 적용되는 반면, "a"는 링크와 명명된 앵커 (예를 들어, <a name="bookmark">)에 모두 적용됩니다.

일반적인 내부 링크는 클래스 internal에 있지 않습니다 (그것들은 과거에는 클래스 내부였고, 이전 버전의 소프트웨어를 사용하는 사이트에서는 여전히 클래스 내부입니다. 예를 들어, [2]); 그것들은 일반적으로 :link 및 :link:visited를 참조하여 스타일을 지정할 수 있으며, 이후 :link.extiw 등의 스타일을 지정하여 링크에 대한 이 일반 스타일의 예외를 제공할 수 있습니다.

언어-사이 링크에 대해:

  • #p-lang a

역시 속성의 값, 예를 들어, 선택기에 따라 스타일을 지정할 수도 있습니다.

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

특정 사용자 (자신 포함) 및/또는 특정 페이지에 대한 링크 (최근 변경 사항에서 관심 갖는 페이지의 굵은 글씨와 같은)를 색상 코드로 표시하거나 강조 표시합니다. 오페라 브라우저에서는 작동하지만 IE에서는 작동하지 않습니다. Help:Watching pages#CSS도 참조하십시오.

관심 목록과 최근 변경 사항은 두 가지 클래스를 사용합니다:

  • autocomment
    example
  • new (see below)

페이지 역사에는 autocomment와 다음 클래스가 있습니다:

  • user
  • minor

따라서 사용자에게 지정된 글꼴은 페이지 기록에는 적용되지만, 관심 목록이나 최근 변경 사항에는 적용되지 않습니다.

Edit page

  • Edit box: textarea#wpTextbox1
example1
  • Edit summary box: input#wpSummary
example2

Major style blocks

See meta:Customization:Explaining_skins

Non-display

텍스트에 대한 극단적인 "스타일" 중 하나는 텍스트를 표시하지 않는 것입니다:

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

표시되지 않는 링크는 작동하지 않습니다 (글꼴이 매우 작은 링크와는 대조적으로).

그것은 템플릿 이름, 매개변수 이름, 매개변수 값, 링크에서 페이지 이름 등의 표현에서 텍스트를 제거하는 데 사용할 수 없습니다.

Style depending on a parameter or variable

Variable class or id

클래스 또는 id는 템플릿에 의해 생성된 결과나 템플릿 매개변수 (예를 들어, class="abcdef")에 따라 달라질 수 있습니다. 하나 이상의 가능한 클래스 이름에 대해, 해당 클래스의 스타일을 정의할 수 있습니다. 클래스가 정의되지 않으면, 그것이 무시되므로, 표준 스타일이 사용됩니다.

가장 간단한 경우에서, 예를 들어 class="abc{{{1}}}"가 있고 클래스 abcdef를 정의합니다. 매개변수 값이 "def"이면 그것이 적용됩니다.

일반적으로 사용되는 페이지에서 특정 클래스에 대한 스타일이 정의되어야만 의미가 있으면, 이것들은 MediaWiki:Common.css 페이지에서 지정되어야 하며, 이는 모든 사용자와 모든 스킨에 적용되며, 덮어쓰지 않는 한 적용됩니다.

Variable HTML attribute name

HTML 속성 이름은 변수로 만들 수 있습니다. HTML Tidy (제거 예정인 오래된 HTML4 라이브러리)는 역사적으로 서버 측에서 잘못된 이름의 속성을 제거했으므로, 결과는 잘못된 속성 이름을 무시하는 브라우저 기능에 따라 달라지지 않고, 전송되는 데이터 양이 줄어듭니다. 가능한 값 "class"를 갖는 변수에 대해, Wikipedia:HiddenStructure 및 en:Template:Infobox (backlinks edit)를 참조하십시오.

Variable style parameter value

다음과 같은 위키텍스트는

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

매개변수 3이 정의되어 있으면 "Wed"를 표시하지만, "none"은 표시하지 않고, 매개변수 3이 정의되지 않았거나 "none"이면 아무것도 표시하지 않습니다. 매개변수 3의 값이 "none"이 아닌 표시 스타일이면, 해당 스타일이 적용됩니다.

Samples

사용자 정의 스타일은 각 사용자의 개인 CSS 파일 (예를 들어, Special: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;
}
Rounded corners/tabs links
/*
** 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) " ) ";
  }
}

Make the user toolbar a sidebox

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 }

기본적으로 사용되는 전체 스타일에 대해 monobook main.css를 참조하십시오.

Fix the top bar's position while you scroll

이 스타일을 사용하면 Vector Legacy 사용자는 스크롤할 때 상단 바 (검색 바, 토론 페이지, 편집, 사용자 페이지 등의 링크 포함)를 Vector 2022와 유사하게 표시할 수 있습니다:

@media screen {
    #mw-head {
        position: fixed;
        background: linear-gradient(to bottom,#fff 50%,#f6f6f6 100%);
    }
}

Fix the sidebar's position while you scroll

Vector Legacy 스킨에서는 사이드바의 위치를 ​​쉽게 수정할 수 있습니다:

/* 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;
}

이것은 크롬에서 바람직하지 않은 부작용을 일으킬 수 있습니다; 예를 들어, 방금 이 코드를 넣기 위해 편집한 매우 일반적인 .css 페이지와 같은 페이지를 볼 때, 볼 수 있는 컨텐츠가 훨씬 짧아지고 프레임 안에서 수직 스크롤이 필요할 수 있습니다.

Cologne Blue 스킨에는 "떠다니는 왼쪽" 퀵바 옵션이 있는데, 이를 통해 스크롤하는 동안 탐색 링크와 도구 상자 등이 화면에서 같은 위치에 유지됩니다. 이는 Monobook 스킨 (Mozilla에서)에 같은 기능을 제공합니다. meta:Help:User style/floating quickbar를 참조하십시오.

Monobook menus with serif fonts in the content area

텍스트 영역에 세리프 글꼴을 갖는 Monobook 메뉴의 빠르고 간단한 조합은 User:Tillwe/monobook.css (첫 번째 부분)에서 찾을 수 있습니다. 역시 테이블 형식의 항목을 다소 올바르게 표시합니다. 몇 가지 괴상한 점과 버그가 있습니다 (일부는 위키피디아의 CSS 체계가 그다지 사려 깊지 않은 것 같습니다). 저자의 Netscape7/Win98에서 작동합니다.

/******************************************************************/
/* 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;
}

Diff view styling

/* 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; }

Removing the "(thank)" buttons in History log

/*Suppress "(thank)" buttons*/
.mw-thanks-thank-link { display:none; }

Hiding long instruction messages

/* hide View-Source blurb when editing a protected page */
#mw-protectedpagetext { display: none; }

위의 다른 CSS 스타일과 마찬가지로, Special:MyPage/skin.css 또는 Special:MyPage/common.css를 편집하여 사용자 정의 CSS를 삽입하고, 그런-다음 브라우저의 캐시를 새로 고칩니다.

Add style formatting to discussion threads

토론 쓰레드 왼쪽에 수직선을 추가하고 두 가지 다른 배경색을 번갈아가며 사용할 수 있는 실험적 스타일 시트가 있습니다. 자세한 내용과 모양 모형에 대해 User:Isaacl/style/discussion-threads를 참조하십시오.

Infoboxes and user style

사용자는 자신의 브라우저에서 모든 정보 상자를 숨기는 사용자 CSS를 가질 수 있습니다.

모든 infobox를 숨기기 위해, Special:MyPage/common.css (모든 스킨에 대해, 또는 Special:MyPage/skin.css 현재 스킨에 대해)에 다음 내용을 한 줄에 따로 추가합니다:

div.mw-parser-output .infobox { display: none; }

대안적으로, 다음 코드를 common.js에 추가하거나 Greasemonkey와 같은 확장에서 실행되는 브라우저 사용자 스크립트에 추가할 수 있습니다:

$('.infobox').hide();

WP:Manual of Style/Infoboxes에 따르면 인포박스의 모든 정보는 이상적으로는 기사 본문에서도 찾을 수 있어야 하지만, 이 지침을 완벽하게 준수하는 것은 아닙니다. 예를 들어, {{Taxobox}}의 전체 분류 계층 구조와 {{Infobox disease}}의 OMIM 및 기타 의료 데이터베이스 코드는 종종 기사 본문에서 찾을 수 없습니다. 인포박스는 종종 기사에서 가장 중요한 이미지, 심지어 유일한 이미지의 위치이기도 합니다. 인포박스를 제거하지만 포함된 이미지를 별도의 썸네일로 옮기는 사용자 스크립트가 있습니다: User:Maddy from Celeste/disinfobox.js.

User CSS for a monospaced coding font

l, 1, 및 I 사이, 그리고 O, 및 0, 그리고 -, −, –, 및 —를 명확하게 구분할 수 있도록 코딩 시 잘 디자인된 문자로 고정폭 글꼴을 일관되게 사용하기 위해, 시스템-기본 고정폭 글꼴을 다음과 같이 변경할 수 있습니다:


만약 그대로 원하면, 간단히 그것을 @import (전달-삽입)하면 됩니다: 빠른 지침에 대해 meta:User:SMcCandlish/codefont.css에서 확인하십시오.

그렇지 않으면, 아래 코드 조각 중 하나를 Special:MyPage/common.css 또는 meta:Special:MyPage/global.css 페이지에 복사하고, 코드에서 "Roboto Mono"를 원하는 코딩 글꼴로 바꾸십시오. (이 예에서는 Roboto Mono를 사용했는데, 위키에서 사용자가 편집할 수 있는 자료에 적합한 자유 코딩 글꼴이기 때문입니다).

이 코드는 다음을 수행합니다:

  • <code>, <pre>, 등과 같이 통상적으로 모든 고정폭 HTML 요소에 일관된 고정폭 글꼴을 적용합니다.
  • 선택한 글꼴을 사용할 수 없거나 필요한 문자가 없을 때 시스템-기본 고정폭 글꼴을 사용합니다.
  • {{mxt}} 및 {{mxt}}와 같은 모든 예제-서식 템플릿의 출력에 대해서도 같은 작업을 수행합니다.
  • 지금까지 확인된 추가적인 사이트-전체 클래스 (예를 들어, .monospaced)에 적용하여 고정폭으로 출력합니다.
  • 가장 자주 사용되는 세 개의 편집 필드 (주요 편집 창, 편집 요약 줄, 및 검색 항목 상자)에도 이 글꼴 스택을 사용합니다.
  • 임의의 추가적인 클래스가 추가되어야 할 것으로 알려져 있다면, 이 페이지를 업데이트하거나 토론 페이지에 언급해 주십시오.

Horizontal style

/* Use my font, when available, for code */
code, pre, samp, kbd, tt, .example-mono, .userlinks-username, .monospaced, .keyboard-key, .button, .plaincode { font-family: "Roboto Mono", monospace !important; }
/*  Make some of the editable stuff monospaced */
#wpTextbox1, #wpSummary, #searchInput, #searchText { font-family: "Roboto Mono", monospace !important; }

Vertical style

/* Use my font, when available, for code */
code,
pre,
samp,
kbd,
tt,
.example-mono,
.userlinks-username,
.monospaced,
.keyboard-key,
.button
.plaincode {
  font-family: "Roboto Mono", monospace !important;
}
/*  Make some of the editable stuff monospaced */
#wpTextbox1,
#wpSummary,
#searchInput,
#searchText {
  font-family: "Roboto Mono", monospace !important;
}

Cleanup efforts

<tt>...</tt> 요소의 사례를 정리하는 데 도움을 주고 싶다면 (이는 1990년대 이후로 권장되지 않고, 보통 <code>...</code>로 대체해야 함 (맥락에 따라 다를 수 있음)), common.css에 다음과 같은 내용을 추가하여 <tt>를 눈에 띄게 만들 수 있습니다:

/* Flag bad code for cleanup */
tt { color: DarkRed; background: Pink; }

<font>, <center>, <strike> 및 기타 사용되지 않는 요소로도 이 작업을 수행할 수 있습니다. CSS에 대해, 이를 위해 가져오기만 하면 됩니다. meta:User:SMcCandlish/lint.css를 참조하십시오.

JavaScript

JavaScript에는 링크를 포함한 텍스트를 원하는 위치에 추가하는 등 많은 가능성이 있습니다. 이 추가된 컨텐츠는 서버에 의해 생성된 HTML 소스 페이지의 컨텐츠에 따라 달라질 수 있습니다; 예를 들어, getElementById를 적용함으로써 ID를 갖는 HTML 요소에 따라 달라질 수 있습니다. 삽입 위치는 insertBefore로 지정될 수 있습니다.

예제로서, 환경 설정의 왼쪽에 페이지 링크를 추가하기 위해, Special:Mypage/common.js에 다음을 추가하고 PageTitle을 위키 페이지의 제목으로 바꾸십시오:

mw.util.addPortletLink(	'p-personal', '/wiki/PageTitle', 'PageTitle', null, null, null, '#pt-preferences');

Moving categories to top

다음 코드는 카테고리 상자를 기사 맨 위로 옮깁니다. 물론, 좀 더 예쁘게 보이게 하기 위해 CSS를 적용하고 싶을 수도 있습니다:

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);
  }
}

CSS도 좀 추가해 보십시오...

/* 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" 속성을 추가할 수 있습니다.

Wikitext-controlled CSS

CSS는 위키텍스트에 의해 JS를 통해 제어될 수 있습니다. 예를 들어, 컨텐츠 없이 HTML 요소 "span"은 클래스와 id를 통해 페이지의 임의의 부분에 대한 CSS를 지정하는 JS에 대한 매개변수를 제공할 수 있습니다. 예를 들어, 페이지에 클래스 FA와 id lc를 갖는 "span" 요소를 포함하고 있으면, MediaWiki:Monobook.js는 클래스 interwiki-lc의 요소 "li"의 스타일과 제목을 지정하여, 스킨이 이 클래스 interwiki-lc를 지정하는 것을 조건으로 하여 여백에 있는 언어 코드 lc의 언어-사이 링크의 스타일과 제목을 제어합니다 (예를 들어, Cologne Blue는 각 언어에 대해 class='external'을 지정하므로, 해당 스킨에 대해 작동하지 않습니다).

See also

 

관련글

티스토리툴바