Deelvenster Zoekresultaten search-results-panel

Het deelvenster met zoekresultaten bestaat uit het invoervak voor zoekopdrachten bovenaan en het hoofdgebied waar informatieve berichten of zoekresultaten worden weergegeven.

CSS-eigenschappen van het hoofdviewergebied

Wanneer het deelvenster actief is, wordt de gebruikersinterface van de viewer bedekt met een halftransparante vulling. De kleur en dekking van deze vulling worden beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogviewer .s7searchpanel .s7backoverlay

Het deelvenster met zoekresultaten neemt altijd alle beschikbare viewerhoogte in beslag. U kunt de breedte echter configureren. U kunt de breedte instellen op een absolute pixelwaarde. Dit is de standaardinstelling voor middelgrote en grote onderbrekingspunten. U kunt de breedte ook instellen op 100%, zodat het deelvenster met zoekresultaten het gehele viewergebied beslaat. De breedte van het deelvenster wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace

CSS-eigenschap van de ruimte voor zoekresultaten

Voorbeeld - voor het instellen van een paneel met zoekresultaten van 250 pixels breed voor grote en middelgrote onderbrekingspunten en het gebruik van een deelvenster van volledige grootte voor kleine onderbrekingspunten:

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

De bovenkant van het paneel van onderzoeksresultaten wordt gewijd aan het vakje van de onderzoeksinput. De opvulling aan de zijkanten van het invoervak wordt bestuurd door de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer

CSS-eigenschappen van de container voor zoekgegevens

Het veld voor zoekinvoer wordt bestuurd door de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

CSS-eigenschappen van het veld voor zoekinvoer

Voorbeeld - voor het instellen van een zoekinvoerveld met een hoogte van 0 pixels en een tekstlettertype van 14 pixels:

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

De zoekknop links van het invoerveld voor zoekopdrachten in de vorm van het standaard 'uitziende glas' wordt bestuurd door de volgende CSS-klassenkiezer:

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

CSS-eigenschappen van de knop voor zoekinvoer

Voorbeeld - Een zoekknop instellen met een pictogram van 26 x 26 pixels voor 'uitziend glas'; 30 pixels voor een rand van 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;
}

Het deelvenster met zoekresultaten kan een tekstprompt weergeven wanneer de functie voor het eerst wordt aangeroepen. En het toont ook een bericht wanneer de zoekopdracht van een gebruiker geen resultaten heeft opgeleverd. In alle gevallen wordt de tekst weergegeven in het hoofdgedeelte van het deelvenster met zoekresultaten en wordt deze bestuurd door de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo

CSS-eigenschappen van de zoekinformatie

De berichttekst kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .

Voorbeeld - Een tekstdeelvenster instellen waarin een grijs lettertype van 18 pixels wordt gebruikt:

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

Zoekresultaten worden weergegeven als één kolom of één rij miniaturen voor pagina's met zoekresultaten. De afstand tussen miniaturen van zoekresultaten wordt bepaald door de volgende CSS-klassenkiezer:

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

CSS-eigenschappen van de miniatuurcellen

Voorbeeld - tien pixelspatiëring instellen:

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

De vormgeving van afzonderlijke miniaturen wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb

CSS-eigenschappen van de miniatuur

Voorbeeld - Als u miniaturen wilt instellen die 215 x 129 pixels zijn, hebt u een lichtgrijze standaardrand en een donkergrijze geselecteerde rand:

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

De vormgeving van het label van de miniatuur wordt bepaald door de volgende CSS-klassenkiezer:

 .s7ecatalogsearchviewer
.s7searchpanel .s7swatches .s7label

CSS-eigenschappen van het label

Voorbeeld - Als u labels wilt instellen met een lettertype van 12 pixels, grijs of Helvetica®:

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

Op systemen die muisinvoer gebruiken, verschijnen twee rolknopen bij de bodem van het paneel van onderzoeksresultaten aan een gebruiker scroll door de onderzoeksresultaten. De vormgeving van de schuifknoppen Omhoog en Omlaag wordt bepaald door de volgende CSS-klassekiezers:

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

Het is niet mogelijk om schuifknoppen te positioneren met de CSS-eigenschappen top, left, bottom en right. In plaats daarvan worden ze automatisch door de viewerlogica geplaatst.

CSS-eigenschappen van de knop Omhoog en Omlaag schuiven

De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .

Voorbeeld - Een schuifknop van 125 x 35 pixels instellen met een andere illustratie voor elke staat:

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