FANDOM


이 문서에서는 CSS를 통해 간편 정보상자의 스타일을 수정하는 방법에 대해 다룹니다.

따로 스타일이 설정되어 있지 않을 경우 간편 정보상자는 기본 스타일을 사용합니다. 기본 스타일의 색상은 테마 디자이너에서 설정된 색상을 참고해 설정됩니다.

정보상자 테마편집

정보상자 테마는 CSS를 이용해 만들 수 있습니다.

infobox 태그에 theme 속성이나 theme-source 속성을 적용함으로써 해당 테마를 정보상자에 적용할 수 있습니다.

  • theme 속성: 해당 정보상자가 해당 테마를 사용하도록 합니다.
  • theme-source 속성: 해당 정보상자가 문서에서 입력된 값에 따라 테마를 사용하도록 합니다.
 

theme 속성편집

예를 들어 infobox 태그에 theme="delta" 속성을 추가하면 HTML 결과물에 pi-theme-delta 클래스가 추가됩니다.

틀 코드
<infobox theme="delta">
  ...
</infobox>
적용될 CSS
.portable-infobox.pi-theme-delta {
   ...
}
 

theme-source 속성편집

infobox 태그에 theme-source="location" 속성을 추가하면, location에 입력된 값을 테마 이름으로 사용합니다.

틀 코드
<infobox theme-source="location">
   ...
</infobox>
문서 코드
{{틀
 |location = africa
}}
적용될 CSS
.portable-infobox.pi-theme-africa {
   ...
}
 

추가 정보편집

  • theme 속성과 theme-source 속성을 함께 사용할 수도 있습니다. 이렇게 할 경우 theme-source 테마가 설정돼 있지 않을 때는 theme 테마를 사용하고, 설정돼 있을 때는 theme-source 테마를 사용합니다.
  • 테마 속성 값에 있는 띄어쓰기는 자동으로 하이픈(-)으로 교체됩니다. 즉, 한 정보상자에는 한 클래스만 적용할 수 있습니다.
  • 따로 테마가 설정되어 있지 않은 경우 .pi-theme-wikia 클래스가 적용됩니다.

주요 클래스편집

다음은 정보상자의 각 요소에 적용되는 클래스 목록입니다.

제목
.pi-title
헤더
.pi-header
내비게이션
.pi-navigation
그룹
.pi-group
데이터
.pi-data
데이터 값
.pi-data-value
데이터 라벨
.pi-data-label
그림
.pi-image
그림 탭
.pi-image-collection-tabs

보조 클래스편집

다음은 정보상자의 전체적인 스타일을 수정할 때 사용되는 클래스 목록입니다.

.pi-background
정보상자 배경
.pi-secondary-background
헤더·내비게이션 배경
.pi-font
데이터 값 폰트
.pi-secondary-font
헤더·라벨·내비게이션 폰트
.pi-item-spacing
정보상자 요소 패딩(Padding)
.pi-border-color
정보상자 요소 테두리 색상

위 목록은 전체 사용할 수 있는 클래스의 일부분에 불과합니다. 이곳에 더 많은 클래스가 정리되어 있습니다.

코드 예시편집

정보상자 너비 수정

.portable-infobox {
   width: 300px;
}

정보상자 배경 색상 수정

.portable-infobox.pi-background {
   background-color: #ff0000;
}

헤더·내비게이션 배경 색상 수정

.portable-infobox .pi-secondary-background {
   background-color: #00ff00;
}

요소 테두리 색상 수정

.portable-infobox .pi-border-color {
   border-color: #00ff00;
}

요소 패딩 수정

.portable-infobox .pi-item-spacing {
   padding: 10px 20px;
}

데이터 값 폰트 크기 수정

.portable-infobox .pi-font {
   font-size: 16px;
}

헤더·라벨·내비게이션 값 폰트 크기 수정

.portable-infobox .pi-secondary-font {
   font-size: 18px;
}

정보상자 제목 폰트 크기 수정

.portable-infobox .pi-title {
   font-size: 24px;
}

라벨 칸 너비 수정

.portable-infobox .pi-data-label {
   flex-basis: 165px;
}

"oblivion" 테마에서 그림 설명 폰트 크기 수정

.portable-infobox.pi-theme-oblivion .pi-caption {
   font-size: 16px;
}

그림 탭 배경 색상 수정

.pi-image-collection-tabs li {
  background-color: green;
}
Community content is available under CC-BY-SA unless otherwise noted.