Sökresultatpanel search-results-panel

Sökresultatpanelen består av sökrutan högst upp och huvudområdet där informationsmeddelanden eller sökresultat visas.

CSS-egenskaper för huvudvisningsområdet

När panelen är aktiv visas visningsprogrammets användargränssnitt med en halvgenomskinlig fyllning. Färgen och opaciteten för den här fyllningen styrs med följande CSS-klassväljare:

.s7ecatalogviewer .s7searchpanel .s7backoverlay

Sökresultatpanelen upptar alltid alla tillgängliga höjder för visningsprogrammet. Du kan dock konfigurera bredden. Du kan ange bredden till ett absolut pixelvärde, vilket är standardinställningen för mellanstora och stora brytpunkter. Du kan också ange bredden till 100 % så att sökresultatpanelen upptar hela visningsområdet. Panelbredden styrs av följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace

CSS-egenskap för sökresultatrymden

Exempel - om du vill ställa in en 250 pixelbred sökresultatpanel på stora och medelstora brytpunkter och använda en panel i full storlek på en brytpunkt i liten storlek:

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

Den övre delen av sökresultatpanelen är avsedd för sökrutan. Utfyllnaden på inmatningsrutans sidor styrs av följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer

CSS-egenskaper för sökindatabehållaren

Sökindatafältet styrs av följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

CSS-egenskaper för sökinmatningsfältet

Exempel - för att ställa in ett sökinmatningsfält med 0 pixlar i höjd och 14 pixlar i teckensnitt:

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

Sökknappen till vänster om sökinmatningsfältet i form av "lookglass" styrs som standard av följande CSS-klassväljare:

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

CSS-egenskaper för sökindataknappen

Exempel - Så här ställer du in en sökknapp med 26 x 26 pixlar "look glass"-ikon; 30 pixlar med en 1 pixelkant:

.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;
}

Sökresultatpanelen kan visa en textfråga när funktionen anropas för första gången. Dessutom visas ett meddelande när en användares sökning inte gav några resultat. I samtliga fall visas texten i huvuddelen av sökresultatpanelen och styrs av följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo

CSS-egenskaper för sökinformationen

Meddelandet kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

Exempel - Så här ställer du in en textpanel som använder ett grått 18-pixelsteckensnitt:

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

Sökresultaten återges som en enda kolumn eller som en enda rad med miniatyrbilder för sidor med sökträffar. Avståndet mellan miniatyrbilder av sökresultat styrs med följande CSS-klassväljare:

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

CSS-egenskaper för miniatyrbildscellerna

Exempel - Så här ställer du in tio pixelavstånd:

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

Utseendet på enskilda miniatyrbilder styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb

CSS-egenskaper för miniatyrbilden

Exempel - Om du vill ställa in miniatyrbilder som är 215 x 129 pixlar har du en ljusgrå standardkantlinje och en mörkgrå markerad kantlinje:

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

Utseendet på miniatyrbildetiketten styrs av följande CSS-klassväljare:

 .s7ecatalogsearchviewer
.s7searchpanel .s7swatches .s7label

CSS-egenskaper för etiketten

Exempel - Så här ställer du in etiketter med 12 pixlar, grå, Helvetica®-teckensnitt:

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

På system där musindata används visas två rullningsknappar längst ned på sökresultatpanelen för att användaren ska kunna bläddra igenom sökresultaten. Utseendet på upp- och nedrullningsknapparna styrs av följande CSS-klassväljare:

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

Det går inte att placera rullningsknappar med CSS-egenskaperna top, left, bottom och right. I stället placerar visningsprogramlogiken dem automatiskt.

CSS-egenskaper för rullningsknapparna uppåt och nedåt

Knappens tips kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

Exempel - Så här ställer du in en rullningsknapp som är 125 x 35 pixlar och har olika teckningar för varje läge:

.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);