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
|
