Sample CSS for autosuggest - Bloomreach Experience - Open Source CMS

Sample CSS for autosuggest

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

Example CSS for the autosuggest component

.brm-autosuggest-menu {
  background: none repeat scroll 0 0 #FFFFFF;
  border: 1px solid #00A5DD;
  position: absolute;
  width: 35%;
  z-index: 2003;
}
.brm-autosuggest-menu > ul {
  background-color: white;
  float: left;
  list-style-type: none;
  margin-left: 0px;
  width: 55%;
}
.brm-autosuggest-menu > ul.right {
  border: 1px solid #CCCCCC;
  font-style: italic;
  -webkit-box-shadow: 0 3px 4px #CCCCCC;
  -moz-box-shadow: 0 3px 4px #CCCCCC;
  -o-box-shadow: 0 3px 4px #CCCCCC;
  box-shadow: 0 3px 4px #CCCCCC;
  margin-bottom: 7px;
  margin-top: 1px;
  width: 44.5%;
}
.brm-autosuggest-menu > ul > li {
  border-bottom: 1px solid #EEEEEE;
  font-size: 0.8em;
  padding: 9px 7px;
  position: relative;
}
.brm-autosuggest-menu > ul.right > li {
  padding: 9px 7px 9px 19px;
}
.brm-autosuggest-menu > ul.right > li:first-child {
  padding: 9px 7px;
}
.brm-autosuggest-menu a {
  display: block;
  color: #227563;
  text-decoration: none;
}
.brm-autosuggest-menu ul.product-suggestions {
  float: left;
  font-style: italic;
  margin-bottom: 2px;
  margin-top: 1px;
  width: 100%;
}
.brm-autosuggest-menu ul.product-suggestions a {
  color: #227563;
  text-decoration: none;
}
.brm-autosuggest-menu ul.product-suggestions > li{
  float: left;
  width: 30%;
  height: 205px;
  margin: 0 1%;
  position: relative;
  margin-bottom: 10px;
  padding: 9px 7px 9px 19px;
}
.brm-autosuggest-menu ul.product-suggestions > li img{
  float: left;
  margin: auto;
  display: block;
  width: 100%;
  max-height: 100px;
}
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?