비디오가 종료되고 특정 비디오와 연결된 모든 대화형 색상 견본을 표시할 때 [액션 호출] 패널이 나타납니다.
패널은 비디오 제목을 표시하는 헤더 영역, 오른쪽 위 모서리의 재생 단추, 스크롤 가능한 그리드로 표시되는 실제 대화형 색상 견본으로 구성됩니다. callToActionRemap 구성 속성을 사용하여 패널을 비활성화할 수 있습니다.
작업 패널에 대한 호출은 항상 사용 가능한 전체 뷰어 영역을 사용합니다.
다음 CSS 클래스 선택기는 작업 패널 호출에서 배경색의 모양을 제어합니다.
.s7interactivevideoviewer .s7calltoaction
배경색 |
작업 패널 호출 배경색입니다. |
어두운 회색 배경을 사용하여 작업 패널에 대한 호출을 설정하려면 다음을 수행하십시오.
.s7interactivevideoviewer .s7calltoaction {
background-color: #222222;
}
다음 CSS 클래스 선택기는 작업 패널 호출에서 헤더의 모양을 제어합니다.
.s7interactivevideoviewer .s7calltoaction .s7header
배경색 |
헤더의 배경색입니다. |
height |
헤더의 높이입니다. |
테두리 하단 |
헤더의 아래쪽 테두리. |
70픽셀이고, 어두운 회색 배경이 있고, 하단을 따라 약간 더 밝은 회색의 2픽셀 테두리가 있는 헤더를 설정하려면 다음을 수행하십시오.
.s7interactivevideoviewer .s7calltoaction .s7header {
height: 70px;
border-bottom: 2px solid #444444;
background-color: #222222;
}
다음 CSS 클래스 선택기는 작업 패널 호출에서 헤더 제목의 모양을 제어합니다.
.s7interactivevideoviewer .s7calltoaction .s7header .s7title
color |
배너 내의 텍스트 색입니다. |
font-size |
글꼴 크기입니다. |
라인 높이 |
선 높이. |
font-family |
글꼴 패밀리. |
text-align |
배너의 텍스트 정렬. |
왼쪽 패딩 |
왼쪽 패딩. |
오른쪽 패딩 |
재생 단추에 사용할 공간을 허용하는 오른쪽 패딩. |
70픽셀 선 높이, 25픽셀 글꼴 크기, 흰색 색상 및 왼쪽 정렬로 비디오 제목을 설정하려면 다음을 수행하십시오.
.s7interactivevideoviewer .s7calltoaction .s7header .s7title {
line-height: 70px;
font-size: 25px;
color: #ffffff;
text-align: left;
}
다음 CSS 클래스 선택기는 작업 호출 패널에서 닫기 버튼의 모양을 제어합니다.
.s7interactivevideoviewer .s7calltoaction .s7closebutton
최상위 |
패딩을 포함하여 헤더 상단에서 위치를 지정합니다. |
오른쪽 |
패딩을 포함하여 헤더의 오른쪽에서 위치를 지정합니다. |
width |
단추 너비. |
높이 |
단추 높이. |
배경 이미지 |
지정된 단추 상태에 대해 표시되는 이미지입니다. |
배경 위치 |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다. CSS Sprite 를 참조하십시오. |
이 버튼은 state
속성 선택기를 지원하며, 이 선택기를 사용하여 다른 스킨을 다른 단추 상태에 적용할 수 있습니다.
28 x 28픽셀인 재생 단추를 설정하려면 다음을 수행하십시오. 버튼은 헤더의 위쪽 및 오른쪽 가장자리로부터 20픽셀을 배치해야 합니다. 또한, 서로 다른 네 가지 단추 상태 각각에 대해 다른 이미지를 표시해야 합니다. 구성 요소의 스프라이트 이미지에서 아트웍을 가져옵니다.
.s7interactivevideoviewer .s7calltoaction .s7closebutton {
top: 20px;
right: 20px;
background-size: 336px;
width: 28px;
height: 28px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state] {
background-image: url(images/v2/PlayPauseButton_sprite.png);
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='up'] {
background-position: -28px -1260px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='over'] {
background-position: -0px -1260px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='down'] {
background-position: -28px -1232px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='disabled'] {
background-position: -0px -1232px;
}
다음 CSS 클래스 선택기는 작업 패널에 대한 호출에서 축소판 표 보기의 모양을 제어합니다.
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview
배경색 |
축소판 영역의 배경색입니다. |
어두운 회색 배경을 사용하여 축소판 영역을 설정하려면 다음을 수행하십시오.
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview {
background-color: #222222;
}
다음 CSS 클래스 선택기는 [액션 호출] 패널에서 thumb 셀의 모양을 제어합니다.
.s7interactivevideoviewer .s7calltoaction .s7thumbcell
margin |
각 축소판 주위의 가로 및 세로 여백의 크기입니다. 실제 가로 축소판 간격은 .s7thumbcell 에 대해 설정된 왼쪽 및 오른쪽 여백 집합의 합계와 같습니다. 세로 간격에도 동일한 규칙이 적용됩니다. |
24픽셀의 가로 간격과 18픽셀의 세로 간격을 설정하려면 다음을 수행합니다.
.s7interactivevideoviewer .s7calltoaction .s7thumbcell {
margin-top: 9px;
margin-bottom: 9px;
margin-left: 12px;
margin-right: 12px;
}
다음 CSS 클래스 선택기는 작업 패널 호출에서 축소판의 모양을 제어합니다.
.s7interactivevideoviewer .s7calltoaction .s7thumb
너비 |
축소판의 폭입니다. |
높이 |
축소판의 높이입니다. |
경계 |
축소판의 테두리입니다. |
섬네일은 state
속성 선택기를 지원합니다. 이 선택기는 다른 스킨(thumbnail states)을 적용하는 데 사용할 수 있습니다. 특히 state="selected"
은 현재 선택한 이미지의 축소판에 해당합니다. state="default"
은 나머지 축소판에 해당합니다. 마우스 가리키기에 state="over"
가 사용됩니다.
94 x 100픽셀인 축소판을 설정하려면 다음을 수행합니다.
.s7interactivevideoviewer .s7calltoaction .s7thumb {
width:94px;
height:100px;
}
다음 CSS 클래스 선택기는 작업 패널 호출에서 축소판 레이블의 모양을 제어합니다.
.s7interactivevideoviewer .s7calltoaction .s7label
색상 |
레이블의 텍스트 색입니다. |
text-align |
레이블의 가로 정렬. |
font-family |
글꼴 이름. |
font-size |
글꼴 패밀리. |
흰색 색상을 사용하는 레이블을 설정하려면 가운데 맞춤을 15픽셀로 하고 Arial® 글꼴을 사용합니다.
.s7interactivevideoviewer .s7calltoaction .s7label {
text-align: center;
color: #ffffff;
font-family: Arial,Helvetica,sans-serif;
font-size: 15px;
}
보기에 세로로 맞출 수 있는 것보다 더 많은 축소판이 있는 경우 축소판은 오른쪽의 세로 스크롤 막대를 렌더링합니다. 기본적으로 [액션] 패널에 대한 호출은 엄지와 스크롤 단추 없이 작은 세로 막대를 렌더링합니다. 그러나 뷰어 CSS를 변경하여 막대를 사용자 지정할 수 있습니다.
다음 CSS 클래스 선택기는 작업 패널 호출에서 스크롤 막대 영역의 모양을 제어합니다.
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar
너비 |
스크롤 막대의 폭입니다. |
최상위 |
축소판 영역의 맨 위에서 수직 스크롤 막대 오프셋입니다. |
하단 |
축소판 영역의 아래쪽에서 수직 스크롤 막대 오프셋입니다. |
오른쪽 |
축소판 영역의 오른쪽 모서리에서 가로 스크롤바가 오프셋됩니다. |
축소판 영역의 위쪽, 오른쪽 또는 아래쪽의 여백이 없는 22픽셀인 스크롤 막대를 설정하려면 다음을 수행하십시오.
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar {
top:0px;
bottom:0px;
right:0px;
width:22px;
}
스크롤 막대 트랙은 위쪽 및 아래쪽 스크롤 막대 단추 사이의 영역입니다. 구성 요소는 트랙의 위치와 높이를 자동으로 설정합니다.
다음 CSS 클래스 선택기는 작업 호출 패널에서 스크롤 막대 트랙의 모양을 제어합니다.
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack
너비 |
스크롤 트랙 막대의 폭입니다. |
배경색 |
트랙 막대의 배경색입니다. |
가로 22픽셀이고 회색 색상을 갖는 스크롤 막대 트랙을 설정하려면 다음을 수행합니다.
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
width:22px;
background-color:#222222;
}
스크롤 막대 엄지는 스크롤 트랙 영역 내에서 세로로 이동합니다. 세로 위치는 구성 요소 논리에 의해 완전히 제어됩니다. 그러나 엄지 높이 는 콘텐츠의 양에 따라 동적으로 변경되지 않습니다.
다음 CSS 클래스 선택기는 엄지 높이 및 기타 종횡비의 모양을 제어합니다.
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb
너비 |
엄지 폭. |
높이 |
엄지 높이. |
패딩 탑 |
트랙 위쪽 사이의 수직 안쪽 여백입니다. |
패딩 하단 |
트랙 아래쪽 사이의 수직 안쪽 여백을 나타냅니다. |
테두리 반경 |
테두리의 반경. |
배경색 |
엄지 색. |
배경 이미지 |
주어진 엄지 영역 상태에 대해 표시되는 이미지입니다. |
배경 위치 |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다. CSS Sprite 를 참조하십시오. |
Thumb은 state
속성 선택기를 지원합니다. 이 선택기는 다음과 같은 다른 thumb 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다. "up"
, "down"
, "over"
및 "disabled"
.
6 x 167 픽셀인 스크롤 막대 엄지를 설정하려면 세 픽셀 라운드 모서리와 회색 색상을 사용합니다.
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state] {
width:6px;
height:167px;
background-color:#666666;
background-image:none;
border-radius:3px 3px 3px 3px;
}
다음 CSS 클래스 선택기는 위쪽 및 아래쪽 스크롤 단추의 모양을 제어합니다.
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton
CSS 위쪽, 왼쪽, 아래쪽 또는 오른쪽 속성을 사용하여 스크롤 단추를 배치할 수 없습니다. 뷰어 논리는 자동으로 위치를 지정합니다. 대화형 비디오 뷰어의 작업 패널에 대한 호출은 스크롤 막대에서 이러한 단추를 사용하지 않으므로 기본 CSS에서 해당 크기가 0픽셀로 설정됩니다.
너비 |
단추 너비. |
높이 |
단추 높이입니다. |
배경 이미지 |
지정된 단추 상태에 대해 표시되는 이미지입니다. |
배경 위치 |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다. CSS Sprite 를 참조하십시오. |
이러한 버튼은 state
속성 선택기를 지원하며, 이 선택기를 사용하여 다음과 같은 다른 thumb 상태에 다른 스킨을 적용할 수 있습니다. "up"
, "down"
, "over"
및 "disabled"
.
단추 도구 설명은 현지화할 수 있습니다. 사용자 인터페이스 요소의 로컬라이제이션을 참조하십시오.
스크롤 단추의 크기를 0으로 설정하고 이를 숨겨서 스크롤 단추를 비활성화합니다.
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
visibility: hidden;
width: 0px;
height: 0px;
}
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
visibility: hidden;
width: 0px;
height: 0px;
}