You can change the style of the search widget to match your application. Use the following CSS classes to customize the widget.
Suggestions
Sample DOM structure:
<div class="cloudsearch_suggestion_container"> <img src="..." class="cloudsearch_suggestion_suggested_query_icon"> <span class="cloudsearch_suggestion_suggested_query">...</span> </div>
CSS Class | Notes |
---|---|
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 |
Results
Sample DOM structure:
<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 Class | Notes |
---|---|
cloudsearch_result_container | |
cloudsearch_result_icon | |
cloudsearch_result_title | |
cloudsearch_result_snippet | |
cloudsearch_result_metadata |
Facets
Sample DOM structure:
<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 Class | Notes |
---|---|
cloudsearch_facet_bucket_clickable | Indicates an element that toggles the selection of the filter |
cloudsearch_facet_bucket_selected | Present on cloudsearch_facet_bucket_container if a filter is selected |
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 |
Pagination
Sample DOM structure:
<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 Class | Notes |
---|---|
cloudsearch_pagination_container | |
cloudsearch_pagination_center | |
cloudsearch_pagination_icon | |
cloudsearch_pagination_icon_first | |
cloudsearch_pagination_icon_previous | |
cloudsearch_pagination_icon_next | |
cloudsearch_pagination_text |
Result counts
<div class="cloudsearch_result_count_container"> <span class="cloudsearch_result_count_text">...</span> </div>
CSS Class | Notes |
---|---|
cloudsearch_result_count_container | |
cloudsearch_result_count_text |
Sign-in prompt
Sample DOM structure:
<div class="cloudsearch_sign_in_container"> <div class="cloudsearch_sign_in_button">...</div> <div class="cloudsearch_sign_in_text">...</div> </div>
CSS Class | Notes |
---|---|
cloudsearch_sign_in_container | |
cloudsearch_sign_in_button | |
cloudsearch_sign_in_text |