Di seguito sono riportati gli snippet CSS messi a disposizione per facilitare la personalizzazione di alcuni parametri del motore di ricerca AccelaSearch.

<aside> 💡 Di seguito il file completo con tutte le personalizzazioni possibili

custom.css

</aside>

Half-screen: Larghezza layer

/* Modificare larghezza half-screen */
#accelasearch-bar-container-container #accelasearch-bar-container.half-screen{
    --half-screen-width:75%; /* basta modificare questa percentuale, si può inserire anche un valore fisso */
    width: var(--half-screen-width);
    left: calc(100% - var(--half-screen-width)) !important;
}
#accelasearch-bar-container-container #accelasearch-bar-container.half-screen .overlay{
    width: calc(100% - var(--half-screen-width));
}

Layer: Splash screen

Questo logo compare solo se il Trigger del layer è impostato come “Show Layer on click/tap”

/* Background con logo */
/* in caso di showcase attiva va rimossa l'immagine */
#accelasearch-bar-container-container #accelasearch-bar-container.half-screen .search-bar-container .scrollbar-container.first-screen{
    background-position: center;
    background-image: url("<https://console.accelasearch.io/img/as-logo-complete.f58f0389.svg>");
    background-repeat: no-repeat;
}

Layer: Showcase Custom Block

Si può inserire dalla console un dynamic block e posizionarlo come si preferisce.

All’interno si può iniettare del js oppure personalizzare con del semplice css.

#accelasearch-bar-container-container #accelasearch-bar-container #accelasearch-dynamic-showcase-1{
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("<https://console.accelasearch.io/img/as-logo-complete.f58f0389.svg>");
  height: 120px;
  background-size: contain;
  margin-top: 40px;
}