Pannello dei risultati di ricerca

Il pannello dei risultati della ricerca è costituito dalla casella di immissione ricerca nella parte superiore e dall’area principale in cui vengono visualizzati i messaggi informativi o i risultati della ricerca.

Proprietà CSS dell’area visualizzatore principale

Quando il pannello è attivo, l’interfaccia utente del visualizzatore è coperta da un riempimento semitrasparente. Il colore e l'opacità di questo riempimento sono controllati dal seguente selettore di classe CSS:

.s7ecatalogviewer .s7searchpanel .s7backoverlay

Proprietà CSS

Descrizione

colore di sfondo

Colore della sovrapposizione.

opacità

Opacità del colore.

Il pannello dei risultati della ricerca occupa sempre l’altezza di tutti i visualizzatori disponibili. Tuttavia, puoi configurare la larghezza. È possibile impostare la larghezza su un valore in pixel assoluto, che è un’impostazione predefinita per punti di interruzione di medie e grandi dimensioni. Oppure, puoi impostare la larghezza su 100% per fare in modo che il pannello dei risultati di ricerca occupi l’intera area del visualizzatore. La larghezza del pannello è controllata dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace

Proprietà CSS dello spazio dei risultati della ricerca

width

Larghezza dello spazio dei risultati della ricerca.

Esempio: per impostare un pannello dei risultati di ricerca a 250 pixel su punti di interruzione di grandi e medie dimensioni e utilizzare un pannello a dimensione piena su un punto di interruzione di piccole dimensioni:

.s7ecatalogsearchviewer.s7size_large .s7searchpanel .s7searchresultspanel, .s7ecatalogsearchviewer.s7size_medium .s7searchpanel .s7searchresultspanel {
 width:250px;
}
.s7ecatalogsearchviewer.s7size_small .s7searchpanel .s7searchresultspanel {
 width:100%;
}

La parte superiore del pannello dei risultati della ricerca è dedicata alla casella di input della ricerca. La spaziatura ai lati della casella di input è controllata dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer

Proprietà CSS del contenitore di input di ricerca

spaziatura interna

Spaziatura intorno alla casella di input.

Il campo di input della ricerca è controllato dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

Proprietà CSS del campo di immissione ricerca

height

Altezza del campo di input della ricerca.

spaziatura sinistra

Spaziatura interna tra i limiti del campo di input e il testo di input.

border

Bordo del campo di input della ricerca.

margine

Margine del campo di immissione ricerca

font-size

Dimensione del font del testo.

Esempio: per impostare un campo di input di ricerca con altezza di 0 pixel e font di testo da 14 pixel:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput {
 padding-left:5px;
 height:30px;
 font-size:14px;
}

Il pulsante di ricerca a sinistra del campo di input di ricerca sotto forma di "vetro che si trova" per impostazione predefinita è controllato dal seguente selettore di classe CSS:

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

Proprietà CSS del pulsante di immissione ricerca

larghezza

Larghezza del pulsante di immissione ricerca.

altezza

Altezza del pulsante di immissione ricerca.

immagine di sfondo

L’URL dell’immagine a icona "vetro".

dimensione di sfondo

La dimensione dell'icona "vetro".

border

Bordo del pulsante di input di ricerca.

margine

Margine del pulsante di immissione ricerca.

Esempio: per impostare un pulsante di ricerca con l'icona "vetro" da 26 x 26 pixel; Dimensioni di 30 pixel con bordo di 1 pixel:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton {
 width:30px;
 height:30px;
 background-size:26px 26px;
 background-image: url(images/v2/Search_form_field.png);
 font-size:14px;
 border: 1px solid #696969;
}

Il pannello dei risultati della ricerca può visualizzare un messaggio di testo quando la funzione viene chiamata per la prima volta. Inoltre, mostra un messaggio quando la ricerca di un utente non ha restituito alcun risultato. In tutti i casi, il testo viene visualizzato nella parte principale del pannello dei risultati della ricerca ed è controllato dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo

Proprietà CSS delle informazioni di ricerca

color

Colore del testo.

font-family

Nome del font del testo.

font-align

Allineamento orizzontale del testo.

font-size

Dimensione del testo del font.

NOTA

Questo pannello di testo supporta state selettore di attributi, che può essere utilizzato per applicare stili diversi a messaggi di testo diversi. In particolare, state='prompt' corrisponde al prompt di testo visualizzato quando il pannello viene chiamato per la prima volta. La state='results' corrisponde al testo con informazioni sugli hit di ricerca. Infine, la state='no_results' corrisponde al testo visualizzato quando la query di ricerca non ha restituito alcun risultato.

Il testo del messaggio può essere localizzato. Vedi Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio: per impostare un pannello di testo che utilizza un font grigio da 18 pixel:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo {
 font-size: 18px;
 color: #696969;
}

I risultati della ricerca vengono rappresentati come una singola colonna o una singola riga di miniature per le pagine con hit di ricerca. La spaziatura tra le miniature dei risultati della ricerca è controllata dal seguente selettore di classe CSS:

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

Proprietà CSS delle celle miniature

margine

Dimensione del margine verticale intorno a ciascuna miniatura. La spaziatura effettiva delle miniature è uguale alla somma dei margini superiore e inferiore impostati per .s7thumbcell .

Esempio: per impostare la spaziatura tra dieci pixel:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell {
 margin: 5px;
}

L’aspetto delle singole miniature è controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb

Proprietà CSS della miniatura

larghezza

Larghezza della miniatura.

altezza

Altezza della miniatura.

border

Bordo della miniatura.

Esempio: per impostare miniature da 215 x 129 pixel, sono disponibili un bordo grigio chiaro predefinito e un bordo grigio scuro selezionato:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb {
 width: 215px;
 height: 129px;
}

L’aspetto dell’etichetta miniatura è controllato con il seguente selettore di classe CSS:

 .s7ecatalogsearchviewer
.s7searchpanel .s7swatches .s7label

Proprietà CSS dell’etichetta

color

Colore testo.

font-family

Nome del font del testo.

font-size

Dimensione del font del testo.

Esempio: per impostare etichette che utilizzano font da 12 pixel, grigio, Helvetica®:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7label {
 font-family: Helvetica,sans-serif;
 color: #4c4c4c;
 font-size: 12px;
}

Nei sistemi che utilizzano l’input del mouse, due pulsanti di scorrimento vengono visualizzati nella parte inferiore del pannello dei risultati della ricerca per consentire all’utente di scorrere i risultati della ricerca. L’aspetto dei pulsanti di scorrimento verso l’alto o verso il basso è controllato dai seguenti selettori di classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton

Non è possibile posizionare i pulsanti di scorrimento utilizzando le proprietà CSS in alto, a sinistra, in basso e a destra. Al contrario, la logica del visualizzatore li posiziona automaticamente.

Proprietà CSS dei pulsanti di scorrimento verso l’alto o verso il basso

larghezza

Larghezza del pulsante di scorrimento.

altezza

Altezza del pulsante di scorrimento.

immagine di sfondo

Immagine visualizzata per un determinato stato del pulsante.

posizione di sfondo

Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS.

Vedi anche Sprite CSS .

NOTA

Questo pulsante supporta state selettore di attributi, che può essere utilizzato per applicare skin diversi a "up", "down", "over"e "disabled" stati dei pulsanti.

Le descrizioni dei pulsanti possono essere localizzate. Vedi Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio: per impostare un pulsante di scorrimento verso l’alto di 125 x 35 pixel e con immagini diverse per ogni stato:

.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton {
 width:125px;
 height:35px;
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='up'] {
 background-image:url(images/sdk/searchpanel_scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/searchpanel_scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/searchpanel_scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/searchpanel_scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton {
 width:125px;
 height:35px;
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/searchpanel_scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/searchpanel_scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/searchpanel_scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/searchpanel_scroll_down_disabled.png);

In questa pagina