Sample CSS for search - Bloomreach Experience - Open Source CMS

Sample CSS for search

This sample CSS shows you high level components and suggested values for configuring the appearance of the search plugin.

Sample CSS for the search plugin

/* Autosuggest styles */
.brm-autosuggest-menu {
  position: relative;
}
.brm-autosuggest-menu > ul {
  float: left;
  width: 55%;
  margin: 0;
  list-style-type: none;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.brm-autosuggest-menu > ul.right {
  width: 42.5%;
}
.brm-autosuggest-menu > ul > li {
  padding: 4px;
}
.brm-autosuggest-menu a {
  display: block;
}
   
/* Search styles */
#page {
  min-height: 500px;
  padding: 10px;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.productgridpage {
  text-align: center;
}
.product {
  display: inline-block;
  width: 200px;
  height: 350px;
  vertical-align: top;
  margin: 5px;
  padding: 5px;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  overflow: hidden;
  text-align: center;
}
.product > img {
  display: block;
}
#brm-filters > fieldset > * {
  vertical-align: middle;
  margin: 5px;
}
.viewmore {
  display: block;
  margin: 10px auto;
  text-align: center;
}
.clear {
  clear: both;
}
Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?