Adjust colors
Adjust the colors using CSS styles. In this example, the autocomplete widget uses a red color scheme.
<script>
function LBInitAutocomplete() {
AutoComplete({
Layout: 'heromobile',
TrackerId: '179075-204259',
Locale: 'en',
Translations: {
en: {
types: {
item: {
name: "Products",
heroName: "Top product"
},
query: {
name: "Searches"
},
category: {
name: "Categories"
}
}
}
},
Types: [
{
type: 'product',
size: 7
},
{
type: 'query'
},
{
type: 'category'
}
]
}, '#q')
}
</script>
<script src="https://cdn.luigisbox.com/autocomplete.js" async onload="LBInitAutocomplete()"></script>
<style>
body > .luigi-ac {
.luigi-ac-hero-color {
background: red !important;
}
.luigi-ac-others {
background: #e3b6b6 !important;
}
.luigi-ac-header {
color: red !important;
}
.luigi-ac-highlight {
background-color: #ec8484 !important;
}
.luigi-ac-item:hover, .luigi-ac-item.active, .luigi-ac-other:hover, .luigi-ac-active {
background: #ffeaea !important;
}
}
</style>