Styling your controls

Our controls should automatically pick your site’s stylin, however, you can extend any of the predefined css identifiers to further customize the visualization and styles of your controls.

Search Input CSS

#grindSearchForm {
 text-align: center;
 }

#grindSearchForm > input {
 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 width: 50%;
 padding: 5px;
 }

#grindSearchForm > button {
 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 padding: 7px;
 }

Search Results CSS

.grindSearch-singleResult {
 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 margin: 20px 0;
 }

.grindSearch-singleResult > .grindSearch-displayLink {
 color: green;
 font-size: 15px;
 }

.grindSearch-singleResult > .grindSearch-snippet {
 font-size: 15px;
 }

#grindSearchPaginator {
 text-align: center;
 }

.pageCursor {
 text-decoration: none;
 padding: 0 10px;
 }