애플리케이션에 맞게 검색 위젯의 스타일을 변경할 수 있습니다. 사용 다음 CSS 클래스를 사용하여 위젯을 맞춤설정할 수 있습니다.
추천
샘플 DOM 구조:
<div class="cloudsearch_suggestion_container">
<img src="..." class="cloudsearch_suggestion_suggested_query_icon">
<span class="cloudsearch_suggestion_suggested_query">...</span>
</div>
CSS 클래스 | 참고 |
---|---|
cloudsearch_suggestion_overlay |
|
cloudsearch_suggestion_container |
|
cloudsearch_suggestion_suggested_query |
|
cloudsearch_suggestion_suggested_query_icon |
|
cloudsearch_suggestion_suggested_people_name |
|
cloudsearch_suggestion_suggested_people_profile_image |
결과
샘플 DOM 구조:
<div class="cloudsearch_result_container">
<span class="cloudsearch_result_icon"></span>
<div class="cloudsearch_result_title">
<a href="...">...</a>
</div>
<div class="cloudsearch_result_metadata">...</div>
<div class="cloudsearch_result_snippet">...</div>
</div>
CSS 클래스 | 참고 |
---|---|
cloudsearch_result_container |
|
cloudsearch_result_icon |
|
cloudsearch_result_title |
|
cloudsearch_result_snippet |
|
cloudsearch_result_metadata |
패싯
샘플 DOM 구조:
<div class="cloudsearch_facet_result_container">
<div class="cloudsearch_facet_operator_container">
<span class="cloudsearch_facet_result_operator_name">...</span>
</div>
<div class="cloudsearch_facet_bucket_container">
<input type="checkbox" value="value"
class="cloudsearch_facet_bucket_checkbox cloudsearch_facet_bucket_clickable">
<span class="cloudsearch_facet_bucket_value">...</span>
<span class="cloudsearch_facet_bucket_percentage">...</span>
</div>
</div>
CSS 클래스 | 참고 |
---|---|
cloudsearch_facet_bucket_clickable |
필터 선택을 전환하는 요소를 나타냅니다. |
cloudsearch_facet_bucket_selected |
필터가 선택된 경우 cloudsearch_facet_bucket_container에 표시됩니다. |
cloudsearch_facet_bucket_container |
|
cloudsearch_facet_result_container |
|
cloudsearch_facet_operator_container |
|
cloudsearch_facet_result_operator_name |
|
cloudsearch_facet_bucket_value |
|
cloudsearch_facet_bucket_percentage |
페이지로 나누기
샘플 DOM 구조:
<div class="cloudsearch_pagination_container">
<div class="cloudsearch_pagination_center">
<span class="cloudsearch_pagination_icon cloudsearch_pagination_icon_previous">
</span>
<span class="cloudsearch_pagination_text">...</span>
<span class="cloudsearch_pagination_icon cloudsearch_pagination_icon_next">
</span>
</div>
</div>
CSS 클래스 | 참고 |
---|---|
cloudsearch_pagination_container |
|
cloudsearch_pagination_center |
|
cloudsearch_pagination_icon |
|
cloudsearch_pagination_icon_first |
|
cloudsearch_pagination_icon_previous |
|
cloudsearch_pagination_icon_next |
|
cloudsearch_pagination_text |
결과 수
<div class="cloudsearch_result_count_container">
<span class="cloudsearch_result_count_text">...</span>
</div>
CSS 클래스 | 참고 |
---|---|
cloudsearch_result_count_container |
|
cloudsearch_result_count_text |
로그인 메시지
샘플 DOM 구조:
<div class="cloudsearch_sign_in_container">
<div class="cloudsearch_sign_in_button">...</div>
<div class="cloudsearch_sign_in_text">...</div>
</div>
CSS 클래스 | 참고 |
---|---|
cloudsearch_sign_in_container |
|
cloudsearch_sign_in_button |
|
cloudsearch_sign_in_text |