검색 결과 패널

검색 결과 패널은 맨 위에 있는 검색 입력 상자와 정보 메시지 또는 검색 결과가 표시되는 기본 영역으로 구성됩니다.

기본 뷰어 영역의 CSS 속성

패널이 활성화되어 있으면 뷰어 사용자 인터페이스가 반투명 채우기로 표시됩니다. 이 채우기의 색상 및 불투명도는 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7searchpanel .s7backoverlay

검색 결과 패널은 항상 사용 가능한 모든 뷰어 높이를 차지합니다. 그러나 너비를 구성할 수 있습니다. 너비를 중간 및 큰 크기 중단점에 대한 기본 설정인 절대 픽셀 값으로 설정할 수 있습니다. 또는 너비를 100%로 설정하여 검색 결과 패널이 전체 뷰어 영역을 차지하도록 할 수 있습니다. 패널 너비는 다음 CSS 클래스 선택기에 의해 제어됩니다.

.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace

검색 결과 공간의 CSS 속성

예 - 크고 중간 크기 중단점에 250픽셀 전체 검색 결과 패널을 설정하고 작은 크기 중단점에서 전체 크기 패널을 사용하려면 다음을 수행하십시오.

.s7ecatalogsearchviewer.s7size_large .s7searchpanel .s7searchresultspanel, .s7ecatalogsearchviewer.s7size_medium .s7searchpanel .s7searchresultspanel { 
 width:250px; 
} 
.s7ecatalogsearchviewer.s7size_small .s7searchpanel .s7searchresultspanel { 
 width:100%; 
}

검색 결과 패널의 맨 위에는 검색 입력 상자가 표시됩니다. 입력 상자의 측면에 있는 패딩은 다음 CSS 클래스 선택기에 의해 제어됩니다.

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer

검색 입력 컨테이너의 CSS 속성

검색 입력 필드는 다음 CSS 클래스 선택기에 의해 제어됩니다.

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

검색 입력 필드의 CSS 속성

예 - 0픽셀 높이 및 14픽셀 텍스트 글꼴로 검색 입력 필드를 설정하려면 다음을 수행합니다.

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput { 
 padding-left:5px; 
 height:30px; 
 font-size:14px; 
}

검색 입력 필드의 왼쪽에 있는 검색 버튼은 기본적으로 "유리 보기" 형태로, 다음 CSS 클래스 선택기에서 제어합니다.

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

검색 입력 단추의 CSS 속성

예 - 26 x 26 픽셀 "유리" 아이콘이 있는 검색 단추를 설정하려면 다음을 수행합니다. 1픽셀 테두리가 있는 30픽셀 크기:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton { 
 width:30px; 
 height:30px; 
 background-size:26px 26px; 
 background-image: url(images/v2/Search_form_field.png); 
 font-size:14px; 
 border: 1px solid #696969; 
}

기능을 처음 호출하면 검색 결과 패널에 텍스트 프롬프트가 표시될 수 있습니다. 또한 검색에서 결과를 반환하지 않은 경우 사용자에게 메시지가 표시됩니다. 모든 경우 텍스트는 검색 결과 패널의 주 부분에 나타나고 다음 CSS 클래스 선택기에 의해 제어됩니다.

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo

검색 정보의 CSS 속성

메시지 텍스트를 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소 현지화를 참조하십시오.

예 - 회색 18픽셀 글꼴을 사용하는 텍스트 패널을 설정하려면 다음을 수행합니다.

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo { 
 font-size: 18px; 
 color: #696969; 
}

검색 결과는 검색 히트가 있는 페이지의 단일 열 또는 단일 축소판 행으로 렌더링됩니다. 검색 결과 축소판 간의 간격은 다음 CSS 클래스 선택기로 제어됩니다.

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

축소판 셀의 CSS 속성

예 - 10픽셀 간격을 설정하려면 다음을 수행합니다.

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell { 
 margin: 5px; 
}

개별 축소판의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb

축소판의 CSS 속성

예 - 215 x 129픽셀로 축소판을 설정하려면 밝은 회색의 기본 테두리와 어두운 회색으로 선택한 테두리를 사용합니다.

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb { 
 width: 215px; 
 height: 129px; 
}

축소판 레이블의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

 .s7ecatalogsearchviewer 
.s7searchpanel .s7swatches .s7label

레이블의 CSS 속성

예 - 12픽셀, 회색, Helvetica 글꼴을 사용하는 레이블을 설정하려면 다음을 수행합니다.

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7label { 
 font-family: Helvetica,sans-serif; 
 color: #4c4c4c; 
 font-size: 12px; 
}

마우스 입력을 사용하는 시스템에서는 검색 결과 패널 아래에 두 개의 스크롤 버튼이 나타나고 사용자가 검색 결과를 스크롤합니다. 위쪽 및 아래쪽 스크롤 단추의 모양은 다음 CSS 클래스 선택기를 사용하여 제어됩니다.

.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton 
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton

CSS 위쪽, 왼쪽, 아래쪽 및 오른쪽 속성을 사용하여 스크롤 단추를 배치할 수 없습니다. 대신 뷰어 논리에서 자동으로 위치를 지정합니다.

스크롤 위쪽 및 아래쪽 단추의 CSS 속성

단추 도구 설명은 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소 현지화를 참조하십시오.

예 - 125 x 35픽셀이고 각 상태에 대해 서로 다른 아트웍을 갖는 스크롤 업 단추를 설정하려면 다음을 수행합니다.

.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton { 
 width:125px; 
 height:35px; 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='up'] { 
 background-image:url(images/sdk/searchpanel_scroll_up_up.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='over'] { 
 background-image:url(images/sdk/searchpanel_scroll_up_over.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='down'] { 
 background-image:url(images/sdk/searchpanel_scroll_up_down.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='disabled'] { 
 background-image:url(images/sdk/searchpanel_scroll_up_disabled.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton { 
 width:125px; 
 height:35px; 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='up'] { 
 background-image:url(images/sdk/searchpanel_scroll_down_up.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='over'] { 
 background-image:url(images/sdk/searchpanel_scroll_down_over.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='down'] { 
 background-image:url(images/sdk/searchpanel_scroll_down_down.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='disabled'] { 
 background-image:url(images/sdk/searchpanel_scroll_down_disabled.png);