E-mailshare email-share

Het gereedschap E-mail delen bestaat uit een knop die wordt toegevoegd aan het deelvenster Sociaal delen en het modale dialoogvenster dat wordt weergegeven wanneer het gereedschap wordt geactiveerd. De positie van de knop wordt volledig beheerd met het gereedschap Sociaal delen.

De vormgeving van de knop E-mail delen wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emailshare

CSS-eigenschappen van het gereedschap voor het delen van e-mail

width
Breedte van de knop.
height
Hoogte van de knop.
achtergrondafbeelding
De afbeelding die voor een bepaalde knopstatus wordt weergegeven.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie ook CSS-sprites.

NOTE
Deze knop ondersteunt de state kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.

Het is mogelijk de knop uit het deelvenster Sociaal delen te verwijderen door de instelling display:none CSS-eigenschap in de CSS-klasse.

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

Voorbeeld - Een knop voor e-maildelen instellen van 28 x 28 pixels en een andere afbeelding voor elk van de vier verschillende knopstatussen.

.s7ecatalogsearchviewer .s7emailshare {
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7emailshare[state='up'] {
background-image:url(images/v2/EmailShare_dark_up.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='over'] {
background-image:url(images/v2/EmailShare_dark_over.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='down'] {
background-image:url(images/v2/EmailShare_dark_down.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='disabled'] {
background-image:url(images/v2/EmailShare_dark_disabled.png);
}

De achtergrondoverlay die de webpagina bedekt wanneer het dialoogvenster actief is, wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7backoverlay

CSS-eigenschappen van de backoverlay

dekking
Dekking van achtergrondbedekking.
background-color
Kleur van achtergrondbedekking.

Voorbeeld - als u een achtergrondbedekking wilt instellen die grijs is met een dekking van 70%:

.s7ecatalogsearchviewer .s7emaildialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

Standaard wordt het modale dialoogvenster gecentreerd weergegeven op het scherm op desktopsystemen en wordt het hele webpaginagebied op aanraakapparaten weergegeven. In alle gevallen, wordt het plaatsen en het rangschikken van de dialoogdoos beheerd door de component. Het dialoogvenster wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialog

CSS-eigenschappen van het dialoogvenster

border-radius
Straal van de rand van het dialoogvenster (als het dialoogvenster niet het volledige browservenster overneemt);
background-color
Achtergrondkleur van dialoogvenster;
width
De instelling moet ongedaan worden gemaakt of op 100% worden ingesteld. In dat geval wordt in het dialoogvenster het hele browservenster weergegeven (deze modus heeft de voorkeur op aanraakapparaten).
height
De instelling moet ongedaan worden gemaakt of op 100% worden ingesteld. In dat geval wordt in het dialoogvenster het hele browservenster weergegeven (deze modus heeft de voorkeur op aanraakapparaten).

Voorbeeld - als u een dialoogvenster wilt instellen waarin het volledige browservenster wordt gebruikt en dat een witte achtergrond heeft op aanraakapparaten:

.s7ecatalogsearchviewer .s7touchinput .s7emaildialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

De koptekst van het dialoogvenster bestaat uit een pictogram, een titeltekst en een knop Sluiten. De koptekstcontainer wordt bestuurd met de volgende CSS-klassenkiezer

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader

CSS-eigenschappen van de koptekst van het dialoogvenster

opvullen
Opvulling binnen voor koptekstinhoud.

Het pictogram en de titeltekst worden verpakt in een extra container die wordt bestuurd met

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader .s7dialogline

CSS-eigenschappen van de dialoogregel

opvullen
Opvulling binnen voor koptekstpictogram en titel.

Koptekstpictogram wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadericon

CSS-eigenschappen van het pictogram van de koptekst in het dialoogvenster

width
Pictogrambreedte.
height
Hoogte pictogram.
achtergrondafbeelding
Pictogramafbeelding.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie ook CSS-sprites.

De titel van de koptekst wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadertext

CSS-eigenschappen van de koptekst van het dialoogvenster

font-weight
Fontgewicht.
tekengrootte
Hoogte lettertype.
font-family
Fontfamilie.
opvullen
Opvulling van interne tekst.

Knop Sluiten wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7closebutton

CSS-eigenschappen van de knop close ​

top
Verticale knoppositie ten opzichte van koptekstcontainer.
right
Horizontale knoppositie ten opzichte van koptekstcontainer.
width
Knopbreedte.
height
Hoogte van knop.
opvullen
Opvulling binnen van knop.
achtergrondafbeelding
Knopafbeelding voor elk frame.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie ook CSS-sprites.

NOTE
Deze knop ondersteunt de state kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.

De knopinfo Sluiten en de titel van het dialoogvenster kunnen worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .

Voorbeeld - Aan opstellingsheader met opvulling, pictogram 24 x 17 pixel, en gewaagde 16 punttitel. En ten slotte, en een dicht dicht knoop van 28 x 28 pixel plaatste twee pixel van de bovenkant en twee pixel van het recht van de container van de dialoogdoos:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader {
 padding: 10px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader .s7dialogline {
 padding: 10px 10px 2px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadericon {
    background-image: url("images/sdk/dlgemail_cap.png");
    height: 17px;
    width: 24px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadertext {
    font-size: 16pt;
    font-weight: bold;
    padding-left: 16px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton {
 top:2px;
 right:2px;
 padding:8px;
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='up'] {
 background-image:url(images/sdk/close_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='over'] {
 background-image:url(images/sdk/close_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='down'] {
 background-image:url(images/sdk/close_down.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='disabled'] {
 background-image:url(images/sdk/close_disabled.png);
}

Dialoogvoettekst bestaat uit de knoppen Annuleren en E-mail verzenden. De voettekstcontainer wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter

CSS-eigenschappen van de voettekst van het dialoogvenster ​

border
Rand die u kunt gebruiken om de voettekst visueel te scheiden van de rest van het dialoogvenster.

De voettekst heeft een binnencontainer die beide knoppen bevat. De klasse wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbuttoncontainer

CSS-eigenschappen van de knopcontainer van het dialoogvenster

opvullen
Opvulling binnen tussen de voettekst en de knoppen.

De knop Annuleren wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton

CSS-eigenschappen van de knop cancel van het dialoogvenster

width
Knopbreedte.
height
Hoogte van knop.
kleur
De tekstkleur van de knoop voor elke staat.
background-color
Achtergrondkleur van knop voor elk frame.
NOTE
Deze knop ondersteunt de state kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.

De knop E-mail verzenden wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton

CSS-eigenschappen van de actieknop van het dialoogvenster

width
Knopbreedte.
height
Hoogte van knop.
kleur
De tekstkleur van de knoop voor elke staat.
background-color
Achtergrondkleur van knop voor elk frame.
NOTE
Deze knop ondersteunt de state kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.

Bovendien delen beide knoppen dezelfde algemene CSS-klasse die CSS-instellingen kan bevatten die hetzelfde zijn voor andere knoppen in dialoogvensters:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter .s7button

CSS-eigenschappen van de knop

font-weight
Dikte van lettertype knop.
tekengrootte
Tekengrootte van knop.
font-family
Lettertypefamilie knop.
regelhoogte
Teksthoogte in de knop. Heeft invloed op de verticale uitlijning.
box-shadow
Slagschaduw.
marge-rechts
Marge rechterknop.

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

Voorbeeld - om een dialoogvakje footer met 64x 34Cancel knoop en een 82x 34send e-mailknoop te plaatsen, met de tekstkleur en achtergrondkleur verschillend voor elke knoopstaat:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}

Het hoofddialoogvenster tussen de kop- en voettekst bevat schuifbare inhoud in het dialoogvenster en het schuifvenster aan de rechterkant. In alle gevallen beheert de component de breedte van dit gebied. Het is niet mogelijk om dit in CSS in te stellen. Het hoofddialoogvenster wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea

CSS-eigenschappen van het weergavegebied van het dialoogvenster ​

height
De hoogte van het gebied van het hoofddialoogvenster. Deze mag alleen worden opgegeven wanneer het dialoogvenster in de bureaubladmodus werkt. Deze optie is niet van toepassing wanneer de grootte van het dialoogvenster zodanig is dat het volledige browservenster wordt ingenomen.
background-color
De achtergrondkleur van het gebied van het hoofddialoogvenster.
marge
Buitenmarge.
NOTE
Het hoofdgedeelte van het dialoogvenster ondersteunt het optionele state kenmerkkiezer. Deze is ingesteld op sendsuccess wanneer het e-mailformulier wordt verzonden en in het dialoogvenster een bevestigingsbericht wordt weergegeven. Zolang het bevestigingsbericht klein is, kan deze kenmerkenkiezer worden gebruikt om de hoogte van het dialoogvenster te verminderen wanneer een dergelijk bevestigingsbericht wordt weergegeven.

Voorbeeld: als u het hoofddialoogvenster wilt instellen op een hoogte van 300 pixels in eerste instantie en een hoogte van 100 pixels in het bevestigingsbericht, hebt u een marge van 10 pixels en gebruikt u een witte achtergrond:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea[state='sendsuccess'] {
 height:100px;
}

Alle formulierinhoud (zoals labels en invoervelden) bevindt zich in een container die wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody

Als de hoogte van deze container groter lijkt te zijn dan het gebied van het hoofddialoogvenster, wordt automatisch een verticaal schuiven ingeschakeld door de component.

CSS-eigenschappen van de hoofdtekst van het dialoogvenster ​

opvullen
Opvulling binnen.

Voorbeeld - als u formulierinhoud wilt instellen met tien pixelopvulling:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody {
    padding: 10px;
}

Het formulier in het dialoogvenster wordt regel voor regel ingevuld, waarbij elke regel een deel van de formulierinhoud bevat (zoals een label en een tekstinvoerveld). Eén formulierregel wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

CSS-eigenschappen van de regel met dialoogvensters

opvullen
Opvulling binnenlijn.

Voorbeeld - als u een dialoogvenster wilt instellen met tien pixelopvulling voor elke regel:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline {
    padding: 10px;
}

Alle statische labels in het dialoogvenster worden beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoglabel

Deze klasse is niet geschikt voor het beheren van de grootte of positie van labels, omdat u deze kunt toepassen op tekst in verschillende locaties van de gebruikersinterface van het formulier.

CSS-eigenschappen van het label van het dialoogvenster. ​

font-weight
Breedte van lettertype label.
tekengrootte
Tekengrootte label.
font-family
Lettertypefamilie label.
kleur
Labeltekstkleur.

Labels in dialoogvensters kunnen worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .

Voorbeeld - als u alle labels wilt instellen op grijs, vet en met een lettertype van negen pixels:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

Alle statische labels die links van de formulierinvoervelden worden weergegeven, worden beheerd met:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel

CSS-eigenschappen van het invoerlabel van het dialoogvenster

width
De breedte van het statische label.
text-align
De horizontale tekstuitlijning.
marge
Statische labelmarge.
opvullen
Statische opvulling van label.

Voorbeeld - als u invoerveldlabels wilt instellen op een breedte van 50 pixels, rechts uitgelijnd, hebt u tien pixels opvulling en een marge van tien pixels rechts:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel {
    margin-right: 10px;
    padding: 10px;
    text-align: right;
    width: 50px;
}

Elk formulierinvoerveld wordt in de container geplaatst, zodat u een aangepaste rand rond het invoerveld kunt toepassen. De klasse wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer

CSS-eigenschappen van de invoercontainer van het dialoogvenster

border
Rand rondom de container van het invoerveld.
opvullen
Opvulling binnen.
NOTE
Invoerveldcontainer ondersteunt optioneel state kenmerkkiezer. Deze is ingesteld op verifyerror als de gebruiker een fout maakt in de indeling van de invoergegevens en inlinevalidatie mislukt. Met deze kenmerkenkiezer kunt u onjuiste gebruikersinvoer in het formulier markeren.

De meeste invoervelden die zich uitstrekken van het label links tot aan de rechterrand van de hoofdtekst van het dialoogvenster (waaronder het veld Van en het veld Bericht), worden bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide

CSS-eigenschappen van het invoerveld van het dialoogvenster

width
Breedte van invoerveld.

Het veld Aan is smaller omdat er ruimte wordt toegewezen voor de knop E-mail verwijderen aan de rechterkant. De klasse wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort

CSS-eigenschappen van het korte veld voor invoer in het dialoogvenster

width
Breedte van invoerveld.

Voorbeeld - Een formulier zo instellen dat het een grijze rand van één pixel heeft met negen pixels opvulling rond alle invoervelden. Dezelfde rand in rode kleur gebruiken voor velden waarvoor de validatie is mislukt. En tot slot, om 250 pixel breed te hebben aan gebied, en de rest inputgebieden 300 pixel breed:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 9px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer[state="verifyerror"] {
    border: 1px solid #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort {
    width: 250px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide {
    width: 300px;
}

Het invoerveld voor e-mailberichten wordt ook beheerd met:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage

Met deze klasse kunt u specifieke eigenschappen instellen voor de onderliggende TEXTAREA element.

CSS-eigenschappen van het bericht in het dialoogvenster

height
Berichthoogte.
tekstomloop
Tekstomloopstijl.

Voorbeeld - als u een e-mailbericht wilt instellen op 50 pixels hoog en gebruiken break-word tekstterugloop:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage {
    height: 50px;
    word-wrap: break-word;
}

Met de knop Een ander e-mailadres toevoegen kan een gebruiker meer dan één adres toevoegen in een e-mailformulier. De klasse wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton

CSS-eigenschappen van het dialoogvenster toevoegen, knop E-mailadres

height
Hoogte van knop.
kleur
De tekstkleur van de knoop voor elke staat.
achtergrondafbeelding
Knopafbeelding voor elk frame.
background-position
De afbeeldingspositie van de knop binnen het knopgebied.
font-weight
Dikte van lettertype knop.
tekengrootte
Tekengrootte van knop.
font-family
Lettertypefamilie knop.
regelhoogte
Teksthoogte in de knop. Heeft invloed op de verticale uitlijning.
text-align
Horizontale tekstuitlijning.
opvullen
Opvulling binnen.
NOTE
Deze knop ondersteunt de state kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.

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

Voorbeeld: als u de knop Een ander e-mailadres toevoegen wilt instellen op 25 pixels hoog, gebruikt u 12-punts vet lettertype met de juiste uitlijning en een andere tekstkleur en afbeelding voor elke status:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton {
 text-align:right;
 font-size:12pt;
 font-weight:bold;
 background-position:left center;
 line-height:25px;
 padding-left:30px;
 height:25px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='up'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='down'] {
 color:#000000;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='over'] {
 color:#000000;
 text-decoration:underline;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='disabled'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}

Met de knop Verwijderen kan een gebruiker extra adressen uit het e-mailformulier verwijderen. De klasse wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton

CSS-eigenschappen van het dialoogvenster verwijderen de knop E-mail

width
Knopbreedte.
height
Hoogte van knop.
achtergrondafbeelding
Knopafbeelding voor elk frame.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie ook CSS-sprites.

NOTE
Deze knop ondersteunt de state kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.

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

Voorbeeld - als u een verwijderknop wilt instellen op 25 x 25 pixels en voor elke status een andere afbeelding wilt gebruiken:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton {
 width:25px;
 height:25px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] {
 background-image:url(images/sdk/dlgremove_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='disabled'] {
 background-image:url(images/sdk/dlgremove_up.png);
}

De inhoud die wordt gedeeld, wordt onder in de hoofdtekst van het dialoogvenster weergegeven en bevat een miniatuur, titel, oorsprong-URL en beschrijving. De container wordt verpakt in een container die wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent

CSS-eigenschappen van de inhoud van het dialoogvenster ​

border
Containerrand.
opvullen
Opvulling binnen.

Voorbeeld - als u een container onder een container wilt instellen met een gestippelde rand van één pixel en geen opvulling:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent {
    border: 1px dotted #A0A0A0;
    padding: 0;
}

De miniatuurafbeelding wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail

De background-image wordt ingesteld door de componentlogica.

CSS-eigenschappen van de miniatuurafbeelding van het dialoogvenster

width
Breedte miniatuur.
height
Hoogte miniatuur.
vertical-align
Miniatuur van verticale uitlijning.
opvullen
Opvulling binnen.

Voorbeeld - als u een miniatuur wilt instellen op 90 x 60 pixels en de miniatuur aan de bovenzijde uitgelijnd met tien pixels aan de opvulling:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail {
    height: 60px;
    padding: 10px;
    vertical-align: top;
    width: 90px;
}

De titel, oorsprong en beschrijving van de inhoud worden verder gegroepeerd in een deelvenster rechts van de miniatuur van de inhoud. De klasse wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel

CSS-eigenschappen van het informatievenster van het dialoogvenster

width
Breedte deelvenster.

Voorbeeld: als u een deelvenster met inhoudsgegevens wilt instellen op een breedte van 300 pixels:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel {
    width: 300px;
}

De titel van de inhoud wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle

CSS-eigenschappen van de titel van het dialoogvenster

marge
Buitenmarge.
font-weight
Fontgewicht.
tekengrootte
Tekengrootte.
font-family
Fontfamilie.

Voorbeeld - als u een titel voor inhoud wilt instellen voor het gebruik van een vet lettertype met een marge van 10 pixels:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle {
    font-weight: bold;
    margin: 10px;
}

De oorsprong van de inhoud wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin

CSS-eigenschappen van oorsprong van inhoud in het dialoogvenster ​

marge
Buitenmarge.
font-weight
Fontgewicht.
tekengrootte
Tekengrootte.
font-family
Fontfamilie.

Voorbeeld - als u de oorsprong van de inhoud wilt instellen op een marge van 10 pixels:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin {
    margin: 10px;
}

De beschrijving van de inhoud wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription

CSS-eigenschappen van de inhoudsbeschrijving van het dialoogvenster

marge
Buitenmarge.
font-weight
Fontgewicht.
tekengrootte
Tekengrootte.
font-family
Fontfamilie.

Voorbeeld - als u een inhoudsbeschrijving wilt instellen met een marge van 10 pixels en een 9-punts lettertype wilt gebruiken:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription {
    font-size: 9pt;
    margin: 10px;
}

Wanneer een gebruiker onjuiste invoergegevens invoert en inlinevalidering mislukt, wordt een bericht weergegeven boven aan de hoofdtekst van het dialoogvenster. Dit bericht wordt ook weergegeven wanneer het dialoogvenster een foutbericht of een bevestigingsbericht moet weergeven wanneer het formulier wordt verzonden. De klasse wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage

CSS-eigenschappen van het foutbericht van het dialoogvenster

achtergrondafbeelding
Foutpictogram. Standaard is een uitroepteken.
background-position
Foutpictogrampositie binnen het berichtgebied.
kleur
Tekstkleur van bericht.
font-weight
Fontgewicht.
tekengrootte
Tekengrootte.
font-family
Fontfamilie.
regelhoogte
Teksthoogte in het bericht. Heeft invloed op de verticale uitlijning.
opvullen
Opvulling binnen.
NOTE
Dit bericht ondersteunt de state kenmerkkiezer met de volgende mogelijke waarden: verifyerror, senderror, en sendsuccess. De waarde verifyerror wordt ingesteld wanneer een bericht wordt weergegeven als gevolg van een fout bij de inline-invoervalidatie. De waarde senderror wordt ingesteld wanneer een e-mailservice op de achtergrond een fout meldt. De waarde sendsuccess wordt ingesteld wanneer e-mail is verzonden. Op deze manier kunt u het bericht anders opmaken afhankelijk van de status van het dialoogvenster.

De knopinfo kan worden gelokaliseerd.

Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .

Voorbeeld - Als u een bericht wilt instellen dat een lettertype van tien punten vet wordt gebruikt, hebt u een regelhoogte van 25 pixels en een opvulling van 20 pixels aan de linkerkant. En ten slotte, gebruik een pictogram van het uitroepteken, rode tekst als er een fout is, en geen pictogram en groene tekst als er succes is:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] {
    background-image: none;
    color: #00B200;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage {
    background-position: left center;
    font-size: 10pt;
    font-weight: bold;
    line-height: 25px;
    padding-left: 20px;
}

Als verticaal schuiven nodig is, wordt de schuifbalk weergegeven in het deelvenster aan de rechterrand van het dialoogvenster, dat wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogscrollpanel

CSS-eigenschappen van het schuifvenster van het dialoogvenster

width
Breedte van deelvenster Schuiven.

Voorbeeld: als u een schuifvenster wilt instellen op een breedte van 44 pixels:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogscrollpanel {
    width: 44px;
}

De vormgeving van het gebied van de schuifbalk wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar

CSS-eigenschappen van de schuifbalk

width
De breedte van de schuifbalk.
top
De verticale verschuiving van de schuifbalk vanaf de bovenkant van het schuifvenster.
bottom
De verticale verschuiving van de schuifbalk vanaf de onderkant van het schuifvenster.
right
De verschuiving van de horizontale schuifbalk ten opzichte van de rechterrand van het schuifvenster.

Voorbeeld - als u een schuifbalk wilt instellen die 28 pixels breed is, een marge van 8 pixels vanaf de bovenkant, de rechterkant en de onderkant van het schuifvenster:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar {
    bottom: 8px;
    right: 8px;
    top: 8px;
    width: 28px;
}

Schuifbalktrack is het gebied tussen de bovenste en onderste schuifknop. De component stelt automatisch de positie en de hoogte van het spoor in. De track wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack

CSS-eigenschappen van de schuiftrack

width
De spoorbreedte.
background-color
De achtergrondkleur van de track.

Voorbeeld - voor het instellen van een schuifbalkvak met een breedte van 28 pixels en een grijze achtergrond:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}

De schuifbalkduim beweegt verticaal binnen een schuiftrackgebied. De verticale positie wordt volledig bepaald door de componentlogica, maar de hoogte van het blokje verandert niet dynamisch afhankelijk van de hoeveelheid inhoud. U kunt de duimhoogte en andere aspecten met de volgende CSS klassenselecteur vormen:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb

CSS-eigenschappen van het blokje van de schuifbalk

width
De breedte van het blokje.
height
De hoogte van de duim.
opvullen boven
De verticale opvulling tussen de bovenkant van de track.
opvullen-onder
De verticale opvulling tussen de onderkant van de track.
achtergrondafbeelding
De afbeelding die voor een bepaalde duimstatus wordt weergegeven.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie ook CSS-sprites.

NOTE
Miniatuur ondersteunt de state kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende blokstatussen: up, down, over, en disabled.

Voorbeeld: als u een schuifbalkblokje van 28 x 45 pixels wilt instellen, hebt u een marge van 10 pixels boven en onder aan de schuifbalk en hebt u voor elke staat een andere illustratie:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="disabled"] {
 background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}

De vormgeving van de bovenste en onderste schuifknoppen wordt bepaald door de volgende CSS-klassekiezers:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton

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

CSS-eigenschappen van de schuifknoppen boven en onder

width
De knopbreedte.
height
De knophoogte.
achtergrondafbeelding
De afbeelding die voor een bepaalde knopstatus wordt weergegeven.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie ook CSS-sprites.

NOTE
Deze knoppen ondersteunen de state kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden: up, down, over, en disabled.

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

Voorbeeld - voor het instellen van schuifknoppen met een resolutie van 28 x 32 pixels en voor elke status een andere illustratie:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_down_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8