인쇄 도구는 도구가 활성화될 때 표시되는 모달 대화 상자와 컨트롤 모음에 추가된 단추로 구성됩니다.
인쇄 단추의 모양은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7print
인쇄 단추의 CSS 속성
여백 상단 |
컨트롤 막대의 상단으로부터 오프셋입니다. |
왼쪽 여백 |
왼쪽의 다음 단추까지의 거리 또는 이 단추가 행의 첫 번째 단추인 경우 컨트롤 막대의 왼쪽에 있는 거리. |
width |
단추의 폭입니다. |
height |
단추의 높이입니다. |
배경 이미지 |
지정된 단추 상태에 대해 표시되는 이미지입니다. |
배경 위치 |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다. 참조 - CSS Sprite . |
이 버튼은 state
속성 선택기. 다른 스킨을 다른 단추 상태에 적용하는 데 사용할 수 있습니다.
단추 도구 팁은 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 로컬라이제이션 추가 정보.
예 - 28 x 28픽셀인 인쇄 단추를 설정하고 네 개의 서로 다른 단추 상태에 대해 다른 이미지를 표시합니다.
.s7ecatalogsearchviewer .s7print {
margin-top: 4px;
margin-left: 10px;
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7print[state='up'] {
background-image:url(images/v2/Print_dark_up.png);
}
.s7ecatalogsearchviewer .s7print[state='over'] {
background-image:url(images/v2/Print_dark_over.png);
}
.s7ecatalogsearchviewer .s7print[state='down'] {
background-image:url(images/v2/Print_dark_down.png);
}
.s7ecatalogsearchviewer .s7print[state='disabled'] {
background-image:url(images/v2/Print_dark_disabled.png);
}
대화 상자가 활성 상태일 때 웹 페이지를 덮는 배경 오버레이는 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7backoverlay
후면 오버레이의 CSS 속성
불투명도 |
배경 오버레이 불투명도. |
배경색 |
배경 오버레이 색상. |
예 - 70% 불투명도를 사용하여 회색 오버레이를 설정하려면 다음을 수행합니다.
.s7ecatalogsearchviewer .s7printdialog .s7backoverlay {
opacity:0.7;
background-color:#222222;
}
기본적으로 모달 대화 상자가 데스크탑 시스템의 화면 중앙에 표시됩니다. 대화 상자의 위치 지정 및 크기 조절은 구성 요소에서 관리합니다. 대화 상자는 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7kprintdialog .s7dialog
대화 상자의 CSS 속성
테두리 반경 |
대화 상자 테두리 반경. |
배경색 |
대화 상자 배경색; |
예 - 회색 배경을 갖도록 대화 상자를 설정하려면 다음을 수행합니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialog {
background-color: #dddddd;
}
대화 상자 헤더는 아이콘, 제목 텍스트 및 닫기 단추로 구성됩니다. 헤더 컨테이너는 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogheader
대화 상자 헤더의 CSS 속성
패딩 |
헤더 컨텐츠에 대한 내부 패딩. |
아이콘 및 제목 텍스트는 다음과 같이 제어되는 추가 컨테이너에 래핑됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline
대화 상자의 CSS 속성
패딩 |
헤더 아이콘 및 제목에 대한 내부 패딩. |
헤더 아이콘은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon
대화 상자 헤더 아이콘의 CSS 속성
너비 |
아이콘 너비. |
높이 |
아이콘 높이. |
배경 이미지 |
아이콘 이미지. |
배경 위치 |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다. 참조 - CSS Sprite . |
헤더 제목은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext
대화 상자 헤더 텍스트의 CSS 속성
font-weight |
글꼴 가중치입니다. |
font-size |
글꼴 높이. |
font-family |
글꼴 패밀리. |
패딩 |
내부 텍스트 패딩. |
닫기 단추는 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7closebutton
닫기 단추의 CSS 속성
최상위 |
헤더 컨테이너에 대한 세로 단추 위치입니다. |
오른쪽 |
헤더 컨테이너에 대한 가로 단추 위치입니다. |
너비 |
단추 너비. |
높이 |
단추 높이. |
패딩 |
단추의 내부 패딩. |
배경 이미지 |
각 상태에 대한 단추 이미지입니다. |
배경 위치 |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다. 참조 - CSS Sprite . |
이 버튼은 state
속성 선택기. 다른 스킨을 다른 단추 상태에 적용하는 데 사용할 수 있습니다.
닫기 단추 도구 팁과 대화 상자 제목을 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 로컬라이제이션 추가 정보.
예 - 패딩, 22 x 22픽셀 아이콘 및 굵은 16포인트 제목을 사용하여 대화 상자 헤더를 설정하려면 다음을 수행하십시오. 마지막으로, 28x28픽셀 닫기 단추가 위쪽에서 2개의 픽셀과 대화 상자 컨테이너 오른쪽에서 2개의 픽셀을 배치했습니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogheader {
padding: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline {
padding: 10px 10px 2px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon {
background-image: url("images/sdk/dlgprint_cap.png");
height: 22px;
width: 22px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext {
font-size: 16pt;
font-weight: bold;
padding-left: 16px;
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton {
top:2px;
right:2px;
padding:8px;
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='up'] {
background-image:url(images/sdk/close_up.png);
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='over'] {
background-image:url(images/sdk/close_over.png);
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='down'] {
background-image:url(images/sdk/close_down.png);
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='disabled'] {
background-image:url(images/sdk/close_disabled.png);
}
대화 상자 바닥글은 취소 및 인쇄로 보내기 단추로 구성됩니다. 바닥글 컨테이너는 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter
대화 상자 바닥글의 CSS 속성
경계 |
대화 상자의 나머지 부분과 바닥글을 시각적으로 구분하는 데 사용할 수 있는 테두리입니다. |
바닥글에는 두 단추를 모두 유지하는 내부 컨테이너가 있습니다. 이 컨트롤은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer
대화 상자 단추 컨테이너의 CSS 속성
패딩 |
바닥글과 단추 사이의 내부 패딩. |
취소 단추는 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton
대화 상자의 CSS 속성 취소 단추
너비 |
단추 너비. |
높이 |
단추 높이. |
color |
각 상태에 대한 단추 텍스트 색입니다. |
배경색 |
각 상태에 대한 단추 배경색입니다. |
이 버튼은 state
속성 선택기. 다른 스킨을 다른 단추 상태에 적용하는 데 사용할 수 있습니다.
인쇄로 보내기 단추는 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton
대화 상자 작업 단추의 CSS 속성
너비 |
단추 너비. |
높이 |
단추 높이. |
색상 |
각 상태에 대한 단추 텍스트 색입니다. |
배경색 |
각 상태에 대한 단추 배경색입니다. |
이 버튼은 state
속성 선택기. 다른 스킨을 다른 단추 상태에 적용하는 데 사용할 수 있습니다.
또한 두 단추 모두 다른 대화 상자 단추와 동일한 CSS 설정을 포함할 수 있는 일반적인 CSS 클래스를 공유합니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button
단추의 CSS 속성
font-weight |
단추 글꼴 가중치입니다. |
font-size |
단추 글꼴 크기입니다. |
font-family |
단추 글꼴 모음입니다. |
라인 높이 |
단추 내부의 텍스트 높이. 세로 정렬에 영향을 줍니다. |
상자 그림자 |
그림자. |
순익 |
오른쪽 단추 여백. |
단추 도구 설명은 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 로컬라이제이션 추가 정보.
예 - 64 x 34 취소 단추와 96 x 34 인쇄로 보내기 단추가 있는 대화 상자 바닥글을 설정하려면 각 단추 상태에 대해 텍스트 색상 및 배경색을 다르게 지정합니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter {
border-top: 1px solid #909090;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer {
padding-bottom: 6px;
padding-top: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button {
box-shadow: 1px 1px 1px #999999;
color: #FFFFFF;
font-size: 9pt;
font-weight: bold;
line-height: 34px;
margin-right: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton {
width:64px;
height:34px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='up'] {
background-color:#666666;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='down'] {
background-color:#555555;
color:#ffffff;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='over'] {
background-color:#555555;
color:#ffffff;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton {
width:96px;
height:34px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='up'] {
background-color:#333333;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='down'] {
background-color:#222222;
color:#cccccc;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='over'] {
background-color:#222222;
color:#cccccc;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
머리글과 바닥글 사이에 있는 기본 대화 상자 영역에는 대화 상자 컨텐츠가 있습니다. 모든 경우 구성 요소는 이 영역의 너비를 관리하므로 CSS로 설정할 수 없습니다. 기본 대화 상자 영역은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea
대화 상자의 CSS 속성 보기 영역
높이 |
주 대화상자 영역의 높이입니다. |
배경색 |
기본 대화 상자 영역의 배경색입니다. |
margin |
외부 여백. |
예 - 자동으로 계산된 높이를 갖도록 기본 대화 상자 영역을 설정하려면 10개의 픽셀 여백을 사용하고 흰색 배경을 사용합니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:auto;
}
모든 양식 컨텐츠(예: 레이블 및 입력 필드)는 다음 CSS 클래스 선택기를 사용하여 제어되는 컨테이너 내에 있습니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogbody
대화 상자 본문의 CSS 속성
패딩 |
내부 패딩. |
예 - 양식 컨텐츠에 10픽셀 패딩을 포함하도록 설정하려면 다음을 수행합니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogbody {
padding: 10px;
}
대화 상자 양식은 라인별로 채워져 있으며 각 줄에는 양식 컨텐츠의 일부(레이블 및 텍스트 입력 필드 등)가 포함되어 있습니다. 단일 양식 선은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline
대화 상자 줄의 CSS 속성
패딩 |
내부 라인 패딩. |
예 - 각 행에 10픽셀 패딩이 있도록 대화 상자 양식을 설정하려면 다음을 수행합니다.
.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline {
padding: 10px;
}
대화 상자 콘텐츠의 블록 크기는 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide
대화 상자 입력 너비의 CSS 속성
너비 |
블록 너비. |
패딩 |
내부 라인 패딩. |
예 - 컨텐츠 블록을 너비가 430픽셀이고 하단에서 패딩이 10픽셀로 설정하려면 다음을 수행합니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide {
padding-bottom: 10px;
width: 430px;
}
대화 상자 양식의 모든 정적 레이블은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel
이 클래스는 양식 사용자 인터페이스의 여러 위치에서 텍스트에 적용할 수 있으므로 레이블 크기 또는 위치를 제어하는 데 적합하지 않습니다.
대화 상자 레이블의 CSS 속성입니다.
font-weight |
레이블 글꼴 가중치입니다. |
font-size |
레이블 글꼴 크기입니다. |
font-family |
글꼴 패밀리에 레이블을 지정합니다. |
색상 |
텍스트 색상을 레이블 지정합니다. |
대화 상자 레이블은 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 로컬라이제이션 추가 정보.
예 - 9픽셀 글꼴로 회색, 굵게 모든 레이블을 설정하려면 다음을 수행합니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
입력 컨트롤은 컨테이너에 래핑되고 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer
대화 상자 입력 컨테이너의 CSS 속성
왼쪽 패딩 |
내부 패딩. |
예 - 대화 상자의 왼쪽 가장자리에서 30픽셀 패딩을 설정합니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer {
padding-left: 30px;
}
라디오 단추 및 해당 캡션 텍스트는 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogoption
대화 상자 옵션의 CSS 속성
너비 |
캡션이 있는 라디오 단추의 총 폭입니다. |
색상 |
캡션 텍스트 색상. |
라디오 단추와 해당 캡션 사이의 간격은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogoptioninput
대화 상자 옵션 입력의 CSS 속성
순익 |
라디오 단추와 해당 캡션 사이의 간격. |
인쇄 범위 선택을 위한 숫자 선택기는 다음 CSS 클래스 선택기로 제어됩니다
.s7ecatalogsearchviewer .s7printdialog .s7dialogrange
대화 상자의 CSS 속성 인쇄 범위
너비 |
숫자 선택기의 폭입니다. |
여백 |
숫자 선택기 주변 간격. |
예 - 모든 라디오 단추를 검정 텍스트, 10픽셀 간격 및 42픽셀 너비 숫자 선택기를 사용하여 150픽셀 너비로 설정하려면 다음을 수행합니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogoption {
color: #000000;
width: 150px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogoption input {
margin-right: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogrange {
margin-left: 10px;
margin-right: 10px;
width: 42px;
}
페이지 범위 선택과 인쇄 레이아웃 섹션 간의 가로 구분선은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer
.s7printdialog .s7horizontaldivider
수평 분할기의 CSS 속성
경계 |
구분선 주위에 테두리가 있습니다. |
패딩 |
내부 패딩. |
너비 |
구분선 폭. |
여백 |
외부 여백 |
예 - 양면에 10픽셀 수직 패딩과 맨 위에 10픽셀 여백이 있는 430픽셀 너비 회색 구분선을 설정하려면 다음을 수행합니다.
.s7ecatalogsearchviewer .s7printdialog .s7horizontaldivider {
border-top: 1px solid #aaaaaa;
margin-top: 10px;
padding-bottom: 10px;
padding-top: 10px;
width: 430px;
}