도와 주세요.:사용자 스타일

이 위키백과 도움말 페이지를 업데이트해야 합니다.이 위키백과 도움말 페이지를 업데이트하여 최근 이벤트 또는 새로 사용 가능한 정보를 반영할 수 있도록 도와주십시오.관련 토론은 대화 페이지에서 확인할 수 있습니다.

사용자는 글꼴, 색상, 여백의 링크 위치 등을 사용자 정의할 수 있습니다!이 작업은 사용자의 "사용자" 페이지의 하위 페이지에 저장된 사용자 정의 계단식 스타일시트를 통해 수행됩니다.

예: 현재 사용 중인 스킨에 대한 CSS 수정을 직접 만들려면 Special:사용할 CSS가 포함된 MyPage/skin.css(사용 중인 스킨에 관계없이 변경 사항을 적용하려면 특수:대신 myPage/common.css).특정 메시지를 숨기는 방법은 WP:CSSHIDE.

사용자가 정의할 수 있는 각 스타일에 대해 해당하는 계단식 스타일 시트(CSS)와 함께 스킨이 먼저 선택됩니다.사용자는 각 스킨에 대해 글꼴, 색상, 여백의 링크 위치 등과 관련하여 다양한 선택을 할 수 있습니다.CSS는 HTML 코드에 지정된 HTML 요소, 클래스 및 ID 선택기 [1]를 참조하여 지정됩니다.따라서, 각 피부에 대한 가능성은 페이지의 HTML 소스 코드, 특히 이러한 클래스와 ID를 보면 알 수 있습니다: 더 많을수록 다양성이 있습니다.

미디어위키 소프트웨어 자체에 CSS가 있으며, 위키백과는 다음 페이지를 사용하여 이를 무시합니다.

• 쾰른 블루 – MediaWiki:쾰른 블루.css
• 모던 – 미디어위키:모던.css
• 모노북 – MediaWiki:모노북.css
• 벡터 – 미디어위키:벡터.css

사이트 전체 CSS는 미디어위키에 있습니다.공통.css

사용자 스타일을 사용하여 직접 이 항목을 재정의할 수 있습니다.현재 피부에 관계없이 적용되는 변경을 수행하려면 common.css를 변경합니다.현재 피부에 영향을 미치는 내용을 변경하려면 skin.css를 변경합니다.모든 Wikimedia 프로젝트에 영향을 미치는 내용을 변경하려면 Meta에 로그인하여 global.css를 변경할 수 있습니다.

그 페이지에 CSS를 입력합니다.CSS 미리보기는 특별한 방식으로 작동합니다. 사용된 스킨이 페이지가 적용되는 스킨이라면 페이지의 스타일 정보를 기반으로 페이지 여백을 볼 수 있습니다.이것은 제한이 있습니다.예를 들어, 여백의 링크가 어떻게 표시되는지 미리 볼 수 있지만 이러한 링크는 확인하려는 유형이 아닐 수 있습니다.저장 후 페이지에 있거나 다른 페이지에 있는 동안 강제 다시 로드(shift-reload/ctrl-f5)를 수행하여 새 파일을 가져옵니다.

사용자 하위 페이지에서 CSS를 가져오려면mw.loader.load명령어를 공통으로 입력합니다.js:

 mw.로더.짐을 싣다( '/w/index.php?title=사용자:예제/stylesheet.css&action=raw&ctype=text/css', '텍스트/문서' ); 

페이지의 HTML 소스는 다음과 같은 행을 포함합니다.

 <script src="/w/sshd.phtml?title=사용자:your-username-here/standard.js&amp;action=raw&amp;ctype=text/javascript"> </script> @import"/style/mailistand.javascripts.ptml?title=사용자:your-username-here/standard.css&action=raw&ctype=text/css";

특정 피부를 위한 프로젝트 전체 CSS(이 경우 위키백과에서는 //en.wikipedia.org/style/wikistandard.css 참조)와 특정 피부를 위한 개인 JS 및 CSS.

따라서 서버는 CSS 및 JS 파일을 참조하는 HTML을 제공하지만 내용에 대한 해석은 수행하지 않습니다.기능 및 설정에 따라 브라우저에서 해석을 수행합니다.

사용자 하위 페이지의 CSS 대 로컬 파일의 CSS

위에 추가로, 또는 브라우저에서 로컬 CSS를 설정할 수 있습니다.여러 브라우저를 사용하는 경우 각각 다른 CSS로 설정할 수 있습니다.각각은 MediaWiki 프로젝트뿐만 아니라 전체 World Wide Web에 적용됩니다(로그인에 의존하지 않음).그러나 다른 웹 페이지가 동일한 CSS 선택기를 사용하는 경우에만 영향을 줍니다. 예를 들어 선택기 a.extiw에 대한 설정은 h2에 대한 설정보다 웹에서 더 적은 수의 페이지에 영향을 미칩니다(그러나 하나만이 아니라 적어도 모든 미디어위키 프로젝트에 영향을 미칩니다).

다른 미디어위키 프로젝트에서 달라야 하는 CSS 라인의 경우, 예를 들어 쉽게 구별하기 위해 다른 배경색의 경우, 로컬 CSS는 분명히 사용할 수 없습니다. 적어도 이러한 라인은 사용자 하위 페이지에 넣어야 합니다.

인터넷 카페, 모바일 장치/태블릿 등의 일부 컴퓨터에서는 사용자가 브라우저에 대한 기본 설정을 설정할 수 없습니다.이 경우 사용자 하위 페이지는 사용자 스타일 설정을 허용합니다.

브라우저가 웹페이지 또는 외부 CSS에 지정된 글꼴 크기를 무시하는 옵션으로 설정된 경우, 글꼴 크기와 관련된 CSS 행을 로컬 CSS에 넣어야 합니다.

CSS 선택기

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

• :link링크 — 예:도움말:Index; 기본값:help:Index (vs:link 참조)
• :link:link
• :link:visited
• :link#contentTop
• :link.externalhttp://dll; 기본값: http://dll
• :link.extiw페이지 본문의 wiki 간 링크 – ; 기본값: en:filename
• :link.image전체 이미지에서 이미지 설명 페이지로 링크
• :link.internal파일 자체에 대한 링크(Media:), 썸네일 및 돋보기 아이콘에서 이미지 설명 페이지로의 링크(a.internal에 대해 지정된 색상 및 글꼴 크기는 첫 번째 경우에만 적용됨)
• :link.new 예제; 기본값: 예제
• .allpagesredirectabc – Special에서 리디렉션:모든 페이지 및 특수:접두사 색인
• body.ns-0, ...,body.ns-15(이름 공간)
• div#bodyContent
• div#column-content
• div#editsection
• div#globalWrapper
• div#tocindent
• div.tocline
• h1.firstHeading
• h2
• h3
• img.texTeX 이미지
• small예를 들어
• table.toc

a vs. – "를 사용하는 것은 흔한 실수입니다.a" 대신에:link스타일 링크로 이동합니다.반면에 ":link링크에만 적용됨, "a링크와 명명된 앵커 모두에 적용됩니다(예:<a name="bookmark">).

일반 내부 링크가 클래스에 없습니다.internal(예: [2]와 같이 이전 버전의 소프트웨어를 사용하는 사이트에 있으며, 현재도 존재합니다.)을 참조하여 스타일을 지정할 수 있습니다.:link그리고.:link:visited일반적으로, 그 이후의 스타일링.:link.extiw등은 링크에 대해 이 일반 스타일에 대한 예외를 제공할 수 있습니다.

언어 간 링크의 경우:

• {{code lang=syscode=#p-syscodea}}

또한 스타일은 속성 값에 따라 달라질 수 있습니다. 예를 들어, 선택기를 사용하면 다음과 같습니다.

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

특정 사용자(자신 포함) 및/또는 특정 페이지에 대한 링크(최근 변경사항에서 관찰된 페이지의 굵기 표시 등)를 색상으로 지정하거나 강조 표시합니다.이것은 오페라에서는 작동하지만 IE에서는 작동하지 않습니다.도움말 참조:페이지 보기 #CSS.

감시 목록과 최근 변경사항은 두 가지 클래스를 사용합니다.

• autocomment
  예
• new(아래 참조)

페이지 기록에 클래스가 있습니다.autocomment그리고:

• user
• minor

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

편집 페이지

• 편집 상자:textarea#wpTextbox1

• 요약 편집 상자:input#wpSummary

주 스타일 블록

메타 참조:사용자 지정:설명_스킨

표시 안 함

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

.학급명 {과시하는: 없음.} #이드 {과시하는: 없음.} 

기타.

표시되지 않는 링크는 매우 작은 글꼴의 링크와 달리 작동하지 않습니다.

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

매개변수 또는 변수에 따른 스타일

변수 클래스 또는 ID

클래스 또는 ID는 템플릿에 의해 생성된 결과 또는 템플릿 매개 변수(예:class="abcdef"가능한 클래스 이름 중 하나 이상에 대해 해당 클래스의 스타일을 정의할 수 있습니다.클래스가 정의되지 않은 경우 무시되므로 표준 스타일이 사용됩니다.

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

일반적으로 사용되는 페이지가 특정 클래스에 대해 스타일을 정의할 때만 의미가 있다면 MediaWiki: 페이지에서 다음과 같이 지정해야 합니다.Common.css - 재정의되지 않는 한 모든 사용자와 모든 스킨에 적용됩니다.

변수 HTML 특성 이름

HTML 특성 이름을 변수로 만들 수 있습니다.제거 예정인 오래된 HTML4 라이브러리인 HTML Tidy는 서버 측에서 잘못된 이름을 가진 속성을 과거에 제거했기 때문에 잘못된 속성 이름을 무시하는 브라우저 기능에 따라 결과가 달라지지 않으며 전송되는 데이터의 양이 줄어듭니다.가능한 값이 "class"인 변수는 위키백과를 참조하십시오.숨겨진 구조 및 en:템플릿:정보 상자(백링크 편집).

변수 스타일 매개 변수 값

Wikitext like

<span style="디스플레이:{{3none}}}"수요일</span>

에서는 매개 변수 3이 정의되었지만 "없음"은 아닌 경우 "수"를 표시하고 매개 변수 3이 정의되지 않았거나 "없음"인 경우에는 아무 것도 표시하지 않습니다.매개변수 3의 값이 "없음"이 아닌 표시 스타일이면 해당 스타일이 적용됩니다.

샘플

사용자 정의 스타일은 Special:과 같은 각 사용자의 개인 CSS 파일에 배치할 수 있습니다.각 사용자가 편집하여 개인 스타일을 설정할 수 있는 MyPage/common.css.

내용 영역 및 탭 뒤의 배경을 옅은 회색으로 만듭니다 */ #내용물, #내용물 테이블 #p-표현식 울 리 a { 배경: #f5f5f5; }  콘텐츠 영역과 함께 배경 이미지 스크롤을 중지합니다 */ 몸 { 백그라운드 평가: 고정된.; }  배경에 있는 책을 다른 것으로 바꾸기 */ 몸 { 배경: 퍼플; }  사전 영역의 배경을 변경합니다 */ 미리 { 배경: 하얀색 }  로고 변경 */ #p-time의 a { 배경: URL(https://upload.wikimedia.org/wikipedia/commons/9/93/Color-chars-logo.png) 35% 50% 무임승차의; }  로고를 사용하지 말고 상자를 해당 영역으로 이동 */ #p-time의 { 과시하는: 없음. } #제1열의 { 패딩탑: 0; }  사용자 이름으로 사용자 아이콘 표시 안 함 */ 리#pt-user 페이지 { 배경: 없음. }  텍스트 크기 및 글꼴에 브라우저 프리픽스 사용 */ html, 몸, #글로벌 래퍼 { 폰트: 유전의 !중요한; }  항상 밑줄 링크 */ :링크 { 텍스트 장식: 밑줄을 긋다; }  /*더 쉽게 읽을 수 있도록 본문 내용을 더 좁은 열에 표시*/ /*원하는 대로 백분율 조정*/ 디브#본문 내용 {   폭: 50%;   선 높이: 105%; }  선택하지 않은 탭의 배경 변경 */ #p-표현식 울 리 a { 배경: #C7FDC7; }  선택한 탭의 배경 변경 */ #p-표현식 울 리.선택된 a { 배경: 하얀색; }  선택한 탭의 테두리 배경 변경 */ #p-표현식 리.선택된 { 테두리 색의: #aaaaaaaaa; }  탭 하단이 호버에서 제거되지 않음 */ #p-표현식 리 a:맴돌다 { z 인덱스: 0; 텍스트 장식: 없음.; } #p-표현식 리.선택된 a:맴돌다 { z 인덱스: 3; }  검색 상자와 그 아래의 버튼 스타일 */ .검색 단추 {     배경색의: #effef;     경계: 1px 발단의; } #검색 입력 { 경계: 1px 끼워 넣은; }  표준 링크 색상 */ a:링크 { 색.: #0645 광고; } a:방문했다 { 색.: #0b0080; } a.신규:링크 { 색.: #cc2200; } a.신규:방문했다 { 색.: #a55858; } a.소멸시키다:링크 { 색.: #3366bb; } 다른 위키백과 링크 */ a.소멸시키다:방문했다 { 색.: #3366bb; } a.외부의:링크 { 색.: #3366bb; } 외부 링크 */ a.외부의:방문했다 { 색.: #3366bb; }  Firefox에서 보기 흉한 컷오프/오버랩 대신 사전 섹션에 스크롤 막대를 놓습니다. */ 미리 { 넘쳐흐르는: 자동의; }  대신 Commons에 업로드하라는 알림으로 파일 업로드 링크를 삭제합니다. */ 리#티셔츠 차림의 { 텍스트 장식: 라인스루의; }  각 페이지의 제목 가운데/ 가운데로 이동 */ .첫머리 { 텍스트 정렬: 중심; }  이중 리디렉션 경고 */ 디브.메시지 리디렉션 a.mw-mw-mw-dll:끝나고 {   내용물: <더블 리다이렉트>';   색.: 빨간.;   서체의: 이탤릭체의; }  2014년 초 이후 "타이포그래피 새로 고침"의 새 CSS가 페이지 제목과 제목을 serif 글꼴로 표시하지 못하도록 방지 */ h1, h2 { 서체족: 유전의 !중요한; }  문서에 사용자 데이터 상자 표시 */ 테이블.인적사항. { 과시하는:테이블; }  지루한 경고 제거 */ #페이지 복사 경고 편집, #페이지 복사 경고 편집2, #페이지 복사 경고 편집3, #페이지 헤드 카피 경고 편집, .페이지 헤드 카피 경고 편집, #공지사항 편집_BLP_편집 인트로, .v-ui-mwSaveDialog-라이센스 { 과시하는: 없음. !중요한; }  지루한 널빤지 제거 */ #카테고리별 편집 통지, #footer-info-description, #사이트 서브, .편집 도움말, .도움말 링크 창에 게시했습니다., #바닥글 아이콘, .v-ui-mw저장 대화상자-요약 레이블 { 과시하는: 없음. !중요한; }  편집 시 페이지 끝에 표시되는 템플릿 목록에 공간 절약 */ :템플릿사용 울, :템플릿사용 리 {과시하는: 인라인의; 패딩 라이트: 5px;}  모든 텍스트를 "Avenir" 글꼴로 변경(헤더 제외) (글꼴을 다른 글꼴로 변경할 수 있음) */ .mw-body h1, .mw-body h2 {     서체족: "아베니르" } 

• CSS MW 예제가 포함된 스니펫

둥근 모서리

모퉁이를 몇 개 돌립니다 */ #p-표현식 울 리, #p-표현식 울 리 a {   왼쪽 위에 있는 테두리: 1엠;   오른쪽 위에 있는 경계선.: 1엠; } #내용물 {   왼쪽 위에 있는 테두리: 1엠;   왼쪽 끝에 테두리를 두른: 1엠; } .pBody {   오른쪽 위에 있는 경계선.: 1엠;   오른쪽 아래의 경계선.: 1엠; } 

둥근 모서리/탭 링크

• Moz: 위의 규칙 참조
• http://www.vertexwerks.com/tests/sidebox/ – 사이드박스 포맷
• http://www.alistapart.com/articles/slidingdoors2/ – 롤오버 효과가 있는 둥근 탭
• 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와 :before를 사용한 단순한 프리스타일 변형 (css2 브라우저만, IE에서는 아님)

인쇄 보기 조정

/* 모든 인쇄 관련 규칙을 @media 인쇄 블록에 배치합니다. */  매우 작은 글꼴로 잉크와 종이를 절약합니다 */ @미디어 인쇄물 {     #바닥글,     #내용물,     몸 { 글꼴 크기의: 8pt의 !중요한; }     h1 { 글꼴 크기의: 17pt의 }     h2 { 글꼴 크기의: 14pt의 }     h3 { 글꼴 크기의: 11pt의 }     h4 { 글꼴 크기의: 9pt의 }     h5 { 글꼴 크기의: 8pt의 }     h6 {         글꼴 크기의: 8pt의;         폰트급의: 보통의;     } }  고급사항: :before 및 :before를 사용하여 포맷을 추가할 수 있는 경우 여기서 링크 뒤에 전체 href를 추가합니다(현재 버전에서는 필요하지 않습니다). */ @미디어 인쇄물 {   #내용물 a:링크:끝나고,   #내용물 a:방문했다:끝나고 {      내용물: " ( " 매력적인(href) " ) ";   } } 

사용자 도구 모음을 사이드박스로 만들기

Camino, Safari 및 Internet Explorer 7에서 작동하도록 테스트되었습니다.

사용자 도구 모음을 사이드박스로 변환 */ #개인적인 {     위치:관련있는;     z 인덱스:3;     폭: 11.6엠; }  #개인적인 .pBody {     폭: 10.7엠;     경계: 없음.;     여백: 0 0 0.1엠 0엠;     흘러가다: 없음.;     넘쳐흐르는: 숨은;     글꼴 크기의: 95%;     배경: 하얀색;     국경을 넘는: 무너지다;     경계: 1px 단단한 #aaaaaaaaa;     패딩: 0 0.8엠 0.3엠 .5엠; }  #개인적인 울 {     선 높이: 1.5엠;     리스트 스타일 유형: 광장;     리스트 스타일 이미지: URL("/style/book/book.gif");      글꼴 크기의:95%;     여백: 0 0 0 1.5엠;     패딩:0;     텍스트 정렬:왼쪽;     문자 변환의: 없음.; }  #개인적인 리 {     과시하는: 리스트 항목;     패딩:0;     여백: 0 0 0 0;     최저한도의: 0.1엠; }  사용자 이름으로 사용자 아이콘 표시 안 함 */ 아직 시행되지 않은 경우 필요함 */ 리#pt-user 페이지 { 배경: 없음. } 

기본적으로 사용 중인 전체 스타일은 monobook main.css를 참조하십시오.

스크롤하는 동안 맨 위 막대의 위치를 수행

Vector Legacy 사용자는 Vector 2022와 유사하게 스크롤할 때 상단 막대(검색 막대 및 토크 페이지, 편집, 사용자 페이지 등의 링크)를 계속 볼 수 있습니다.

@미디어 화면. {     #mw-head {         위치: 고정된.;         배경: 직선 운동의(로. 맨 아래,#ffff 50%,#f6f6f6f6 100%);     } } 

스크롤하는 동안 사이드바 위치 수정

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

사이드바 수정 */ 디브#mw 패널 { 위치: 고정된.;   넘쳐흐르는: 자동의;   정상: 0px;   맨 아래: 0px;   높이: 100%;   옆으로 스크롤할 때 내용 오버레이 방지 */   배경색의: #F6F6F6;   국경 우경의: 1px 단단한 #A7D7F9; } 선행 요소에서 측면 스크롤 방지 */ 미리 {   넘쳐흐르는: 자동의;   최대 높이: 25엠; } 

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

쾰른 블루 스킨에는 스크롤하는 동안 탐색 링크 및 도구 상자 등이 화면에서 동일한 위치에 유지되도록 하는 "왼쪽 부동" 퀵바 옵션이 있습니다.이 기능은 Mozilla에서 Monobook 스킨과 동일한 기능을 제공합니다.메타 참조:도움말:사용자 스타일/부동 퀵바.

내용 영역에 Serif 글꼴이 있는 모노북 메뉴

텍스트 영역에 세리프 글꼴이 있는 모노북 메뉴의 빠르고 더러운 조합은 사용자:우리/monobook.css(첫 번째 부분)까지.또한 테이블 형식의 항목을 다소 올바르게 표시합니다.몇 가지 특이한 점과 버그가 있습니다(일부는 위키백과의 CSS 체계가 너무 사려 깊지 않은 것처럼 보이기 때문입니다).Netscape 7/Win98에서 작업합니다.

카테고리 링크 이동

/******************************************************************/ 고양이 링크를 오른쪽으로 이동 */ /******************************************************************/  catlinks 박스를 이동합니다 */ #고양이 링크 {   위치:절대의;   z 인덱스:1;   경계: 1px 단단한 #aaaaaaaaa;   배경: #파프;   맞다:1엠;   정상:-0.25엠;   폭:10.5엠;   흘러가다:맞다;   여백: 0.2엠;   패딩:0.2엠; }  catlinks 자체 포맷 */ p.고양이 링크 {   색.: #aaaaaaaaa;   서체족: 베르다나,산세리프;   글꼴 크기의:67%;   선 높이: 1.5엠;   텍스트 정렬:왼쪽;   문자 변환의:0;   문자 변환의: 없음.;   공백의:보통의;   여백: 0.2엠; }  #개인적인 h5 {     과시하는: 인라인의; }  catlink의 형식 링크(":" 및 ""와 구별됨) */ p.고양이 링크 a {   색.:#888888; } 

Diff 뷰 스타일

더 작은 글꼴 사용 안 함 */ td.디프 가산선, td.시차선, td.디플렉티드 { 글꼴 크기의: 100% };  다른 텍스트에 밑줄만 그어 */ 기간.거스름 { 텍스트 장식:밑줄을 긋다; } 

기록 로그에서 "(감사)" 버튼 제거

/*(감사) 버튼 누르기*/ .mw-thank-thank-link { 과시하는:없음.; } 

긴 지침 메시지 숨기기

보호된 페이지를 편집할 때 보기 숨기기 - 소스 흐림 */ #mw 보호 페이지 텍스트 { 과시하는: 없음.; } 

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

정보 상자 및 사용자 스타일

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

모든 정보 상자를 숨기려면 특수에 다음을 추가합니다.MyPage/common.css(모든 스킨용 또는 특수:현재 스킨에 대해서만 MyPage/skin.css)가 자동으로 라인에 표시됩니다.

디브.mw-parser-output .인포박스 { 과시하는: 없음.; } 

또는 다음 코드를 common.js 또는 Greasemonkey와 같은 확장자로 실행되는 브라우저 사용자 스크립트에 추가할 수 있습니다.

$('.infobox').숨다(); 

WP: 스타일/인포박스 설명서에 따르면, 이상적으로는 정보 상자의 모든 정보가 기사의 본문에서도 발견되어야 하지만, 이 지침을 완벽하게 준수하는 것은 아닙니다.예를 들어, 의 전체 분류 계층 구조{{Taxobox}}그리고 OMIM 및 기타 의료 데이터베이스 코드{{Infobox disease}}는 종종 주 기사 내용에서 찾을 수 없습니다.또한 정보 상자는 종종 기사에서 가장 중요한 이미지(심지어는 이미지)의 위치이기도 합니다.정보 상자를 제거하지만 포함된 이미지를 별도의 미리 보기로 이동하는 사용자 스크립트가 있습니다.사용자:Celest/disinfobox.js의 Maddy.

단일 공간 코딩 글꼴에 대한 사용자 CSS

코드화를 위해 잘 설계된 문자가 포함된 단일 공간 글꼴을 일관되게 사용할 수 있습니다(예: 다음을 명확하게 구별하기 위해).l,1,그리고.I그 사이에O그리고.0그 사이에-,−,–,그리고.—).

아래 코드 스니펫 중 하나를 페이지에 추가하고 원하는 코딩 글꼴로 대체합니다(이 예에서는 Roboto Mono가 무료로 사용 가능한 코딩 글꼴로 선택됨).

이 코드를 수동으로 CSS 페이지에 추가하지 않고 싶다면,@import(제외) 메타 참조:사용자:SMCCandlish/codefont.css는 빠른 지침을 제공합니다.

이 코드는 다음 작업을 수행합니다.

• 선택한 일관된 단일 공간 글꼴(및 폴백 시스템 기본값, 해당 글꼴이 누락되거나 필요한 문자가 없는 경우)을 다음과 같은 일반적인 단일 공간 HTML 요소에 적용합니다.<code>,<pre>,기타.
• 에서 사용하는 클래스에 대해 동일한 작업 수행{{mxt}}기타 단일 공간 템플릿{{xt}}가족
• 추가 사이트 전체 클래스(지금까지 확인된 바와 같이)에 대해서도 동일한 작업을 수행합니다..monospaced) 단일 공간으로 출력됩니다.
• 주 편집 창, 편집 요약 줄 및 검색 입력란과 같이 가장 자주 접하는 세 가지 편집 필드도 이 글꼴 스택을 사용하도록 합니다.

여기에 추가할 추가 클래스를 알고 있다면 이 페이지를 업데이트하거나 대화 페이지에 언급하십시오.

가로 스타일

코드 */ 사용 가능한 경우 내 글꼴 사용 코드, 미리, 샘프, kbd, tt, .모범적인, .사용자 링크 - 삭제, .단공간의, .건반의, .단추를 채우다, .보통 부호 { 서체족: "Roboto Mono", 단일 공간 !중요한; } 편집 가능한 항목 중 일부를 단일 공간으로 만들기 */ #wp 텍스트 상자1, #wp 요약, #검색 입력, #검색 텍스트 { 서체족: "Roboto Mono", 단일 공간 !중요한; } 

세로 스타일

코드 */ 사용 가능한 경우 내 글꼴 사용 코드, 미리, 샘프, kbd, tt, .모범적인, .사용자 링크 - 삭제, .단공간의, .건반의, .단추를 채우다 .보통 부호 {   서체족: "Roboto Mono", 단일 공간 !중요한; } 편집 가능한 항목 중 일부를 단일 공간으로 만들기 */ #wp 텍스트 상자1, #wp 요약, #검색 입력, #검색 텍스트 {   서체족: "Roboto Mono", 단일 공간 !중요한; } 

정리 작업

만약 당신이 그들의 인스턴스를 정리하는 것을 돕고 싶다면.<tt>...</tt>요소 - 1990년대 이후로 유효한 HTML이 아니며 일반적으로 다음으로 대체되어야 합니다.<code>...</code>(상황에 따라 다를 수 있음) – 다음과 같은 것을 에 추가하여 만들 수 있습니다.<tt>엄지손가락처럼 튀어나왔습니다.

정리를 위한 잘못된 코드 플래그 */ tt { 색.: 다크레드; 배경: 핑크; } 

이 작업은 다음을 통해 수행할 수도 있습니다.<font>,<center>,<strike>기타 사용되지 않는 요소.이를 위해 가져오기만 하면 되는 CSS의 경우 메타:사용자:SMCCandlish/lint.css.

CSS의 외부 링크

• http://www.22bulbjungle.com/ – 훌륭한 CSS 튜토리얼
• http://www.csszengarden.com/ – 영감
• http://www.alistapart.com/ – 훌륭한 기사
• http://www.positioniseverything.net/ – 일부 재미있는 정보(예: 버그 등)

JavaScript에는 링크를 포함한 텍스트를 원하는 위치에 추가하는 등 여러 가지 가능성이 있습니다.이렇게 추가된 내용은 서버에서 생성한 HTML 원본 페이지의 내용에 따라 달라질 수 있습니다. 예를 들어 getElementById를 적용하여 ID가 있는 HTML 요소에 따라 달라질 수 있습니다.삽입 위치는 insertBefore로 지정할 수 있습니다.

예를 들어 환경설정 왼쪽에 페이지 링크를 추가하려면 특수에 다음을 추가합니다.내 페이지/common.js, 페이지 제목을 위키 페이지 제목으로 대체:

mw.효용.포틀렛 링크 추가( 'p-퍼스널', '/wiki/PageTitle', '페이지 제목', 무효의, 무효의, 무효의, '#pt-참조'); 

카테고리를 맨 위로 이동

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

기능. 캣츠탑() {   넝쿨 고양이들 = 문서.요소 가져오기 기준이드('catlinks');   넝쿨 bc = 문서.요소 가져오기 기준이드('본문내용');   bc.앞에 삽입(고양이들, bc.자식 노드[0]); } 

적절한 스타일시트와 결합하면 제목과 거의 같은 줄에 텍스트가 표시됩니다.

기능. 카테고리 맨 위로() {   넝쿨 본문입니다. = 문서.요소 가져오기 기준이드('콘텐츠 맨 위');   넝쿨 분류 = 문서.요소 가져오기 기준이드('catlinks');    한다면 (분류 != 무효의) {     분류.상위 노드.자식 제거 (분류);     본문입니다..상위 노드.앞에 삽입(분류, 본문입니다.);   } } 

그거랑 어울리는 CSS가...

catlinks 박스를 이동합니다 */ #고양이 링크 {   맞다:1엠;   정상:-0.25엠;   최대폭: 50%; 이것은 상자 크기를 제한하지만 엄격하게 설정하지는 않습니다 */   흘러가다: 맞다;   여백: 0.5엠;   패딩: 0.2엠; }  catlinks 자체 포맷 */ p.고양이 링크 {   글꼴 크기의:67%;   텍스트 정렬:왼쪽;   문자 변환의:0;   문자 변환의: 없음.;   공백의:보통의;   여백: 0.2엠; } 

불행히도 범주 상자가 크면(예: 미국 대통령 및 기타 주요 인물에 대한 항목) 정보 상자를 옆으로 밀어낼 수 있습니다.이 문제를 해결하기 위해 "clear:right" 특성을 정보 상자에 추가할 수 있습니다.

위키텍스트 제어 CSS

CSS는 위키텍스트를 통해 JS를 통해 제어할 수 있습니다.예를 들어, 내용이 없는 HTML 요소 "span"은 클래스와 ID를 통해 페이지의 모든 부분에 대한 CSS를 지정하는 JS에 대한 매개 변수를 제공할 수 있습니다.예를 들어, 페이지에 클래스 FA와 idlc를 가진 "span" 요소가 포함된 경우 MediaWiki:Monobook.js는 클래스 interwiki-lc의 요소 "li"의 스타일과 제목을 지정하므로 스킨이 이 클래스 interwiki-lc를 지정하면 여백에 언어 코드 lc의 언어 간 링크의 스타일과 제목을 제어합니다(예: 쾰른 블루는 각 언어에 대해 class='external'을 지정하므로 해당 스킨에는 작동하지 않습니다.

JS외부 링크

• http://www.quirksmode.org/ – JavaScript 및 DOM 섹션 참조
• http://www.alistapart.com/
• http://www.quirksmode.org/dom/domform.html – 양식 복제(이것을 사용하여 한 번에 몇 개의 이미지를 업로드할 수 있으며 구조 복제의 좋은 시작점이기도 합니다.)

• 도움말:캐스케이드 스타일 시트
• 도움말:참조 디스플레이 사용자 정의
• mw:사용자 스타일 갤러리
• 위키백과:Wiki 프로젝트 사용자 스크립트
• mw:피부 프로젝트
• mw:도움말:환경설정, m:도움말:환경설정
• 계단식 스타일 시트(Wikipedia 기사)
• m:사용자 정의:스킨 설명
• mw:도움말:구성 설정(특히 mw:수동:$wgAllowUserJs 및 mw:수동:$wgAllowUserCss)
• 위키백과:도구/내비게이션_팝업(JavaScript 내비게이션 팝업)
• 위키백과:CSS 클래스 목록