DokumentationReferenshandbok för Dynamic Media Viewer

E-postresurs email-share

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Ämnen:

Skapat för:

  • Utvecklare
  • Användare

Verktyget för e-postdelning består av en knapp som läggs till på panelen Dela via sociala medier och i den modala dialogrutan som visas när verktyget aktiveras. Knappens position hanteras helt av verktyget för social delning.

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

.s7ecatalogsearchviewer .s7emailshare

CSS-egenskaper för e-postdelningsverktyget

width
Knappens bredd.
height
Knappens höjd.
background-image
Bilden som visas för ett visst knappläge.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se även CSS-fragment.

NOTE
Den här knappen stöder attributväljaren state som kan användas för att tillämpa olika skal på olika knapplägen.

Det går att ta bort knappen från panelen Dela via CSS-egenskapen display:none i CSS-klassen.

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

Exempel - Om du vill ställa in en knapp för e-postdelning som är 28 x 28 pixlar och som visar olika bilder för de fyra olika knapplägena.

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

Bakgrundsöverlägget som täcker webbsidan när dialogrutan är aktiv styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7backoverlay

CSS-egenskaper för bakåtövertäckningen

opacitet
Opacitet för bakgrundsövertäckning.
background-color
Bakgrundsövertäckningsfärg.

Exempel - för att ställa in bakgrundsövertäckningen till grått med 70 % opacitet:

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

Som standard visas den modala dialogrutan centrerat på skärmen på stationära datorer och tar hela webbsidans område på pekenheter. I samtliga fall hanteras placeringen och storleken på dialogrutan av komponenten. Dialogrutan styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialog

CSS-egenskaper för dialogrutan

border-radius
Dialogrutans kantradie (om dialogrutan inte tar hela webbläsarfönstret).
background-color
Dialogrutans bakgrundsfärg.
width
ska antingen vara urkopplad eller inställd på 100 %, i vilket fall dialogrutan tar hela webbläsarfönstret (detta läge rekommenderas på pekenheter),
height
Ska antingen vara unset eller inställd på 100 %, vilket innebär att dialogrutan visas i hela webbläsarfönstret (det här läget rekommenderas på pekenheter).

Exempel - för att ställa in en dialogruta så att hela webbläsarfönstret används och att enheten har en vit bakgrund:

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

Dialogrutans rubrik består av en ikon, en titeltext och en stängningsknapp. Rubrikbehållaren styrs med följande CSS-klassväljare

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader

CSS-egenskaper för dialogrutans rubrik

utfyllnad
Inre utfyllnad för rubrikinnehåll.

Ikonen och rubriktexten placeras i en extra behållare som styrs med

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader .s7dialogline

CSS-egenskaper för dialograden

utfyllnad
Inre utfyllnad för rubrikikonen och titeln.

Rubrikikonen styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadericon

CSS-egenskaper för dialogrutans rubrikikon

width
Ikonens bredd.
height
Ikonhöjd.
background-image
Ikonbild.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se även CSS-fragment.

Rubriken styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadertext

CSS-egenskaper för dialogrutans rubriktext

font-weight
Teckenbredd.
font-size
Teckenhöjd.
font-family
Teckensnittsfamilj.
utfyllnad
Intern textutfyllnad.

Stängningsknappen styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7closebutton

CSS-egenskaper för stängningsknappen ​

övre
Lodrät knappposition i förhållande till rubrikbehållare.
höger
Vågrät knappposition i förhållande till rubrikbehållare.
width
Knappbredd.
height
Knapphöjd.
utfyllnad
Knappens inre utfyllnad.
background-image
Knappbild för varje läge.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se även CSS-fragment.

NOTE
Den här knappen stöder attributväljaren state som kan användas för att tillämpa olika skal på olika knapplägen.

Knappbeskrivningen Stäng och dialogrutans titel kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

Exempel - Om du vill ställa in ett dialoghuvud med utfyllnad, en ikon med storleken 24 x 17 pixlar och en rubrik med 16 punkter i fetstil. Och slutligen, och en stängningsknapp på 28 x 28 pixlar placerade två pixlar uppifrån och två pixlar från höger om dialogrutans behållare:

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

Dialogrutans sidfot består av knapparna Avbryt och Skicka e-post. Sidfotsbehållaren styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter

CSS-egenskaper för dialogrutans sidfot ​

kant
Kant som du kan använda för att visuellt separera sidfoten från resten av dialogrutan.

Sidfoten har en inre behållare som behåller båda knapparna. Den styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbuttoncontainer

CSS-egenskaper för dialogruteknappbehållaren

utfyllnad
Inre utfyllnad mellan sidfoten och knapparna.

Knappen Avbryt styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton

CSS-egenskaper för knappen Avbryt i dialogrutan

width
Knappbredd.
height
Knapphöjd.
färg
Knapptextfärg för varje läge.
background-color
Knappbakgrundsfärg för varje läge.
NOTE
Den här knappen stöder attributväljaren state som kan användas för att tillämpa olika skal på olika knapplägen.

Knappen Skicka e-post styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton

CSS-egenskaper för dialogrutans åtgärdsknapp

width
Knappbredd.
height
Knapphöjd.
färg
Knapptextfärg för varje läge.
background-color
Knappbakgrundsfärg för varje läge.
NOTE
Den här knappen stöder attributväljaren state som kan användas för att tillämpa olika skal på olika knapplägen.

Båda knapparna har dessutom en gemensam CSS-klass som kan innehålla CSS-inställningar som är desamma för andra dialogruteknappar:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter .s7button

CSS-egenskaper för knappen

font-weight
Knappens teckensnittsbredd.
font-size
Knappens teckenstorlek.
font-family
Knappteckensnittsfamilj.
line-height
Texthöjd inuti knappen. Påverkar lodrät justering.
box-shadow
Skugga.
marginal-right
Högerknappsmarginal.

Den här knappens verktygstips kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

Exempel - om du vill ställa in en dialogruteslut med knappen Avbryt 64 x 34 och skicka e-postknappen 82 x 34, med textfärgen och bakgrundsfärgen olika för varje knappläge:

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

Huvuddialogrutan, mellan sidhuvudet och sidfoten, innehåller rullningsbart dialogruteinnehåll och rullningspanelen till höger. I samtliga fall hanterar komponenten bredden på det här området, det går inte att ange den i CSS. Huvudområdet i dialogrutan styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea

CSS-egenskaper i dialogrutans visningsområde ​

height
Höjden på området i huvuddialogrutan. Den ska bara anges när dialogrutan fungerar i skrivbordsläge. Det är inte tillämpligt när dialogrutans storlek ändras så att den upptar hela webbläsarfönstret.
background-color
Bakgrundsfärgen i huvuddialogrutan.
marginal
Yttre marginal.
NOTE
Huvuddialogrutan har stöd för den valfria attributväljaren state. Värdet är sendsuccess när e-postformuläret skickas och dialogrutan visar ett bekräftelsemeddelande. Så länge bekräftelsemeddelandet är litet kan den här attributväljaren användas för att minska dialogrutans höjd när ett sådant bekräftelsemeddelande visas.

Exempel - Om du vill ställa in att huvudområdet i dialogrutan ska vara 300 pixlar högt från början och 100 pixlar högt när bekräftelsemeddelandet visas, har du en marginal på tio pixlar och använder en vit bakgrund:

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

Allt formulärinnehåll (som etiketter och inmatningsfält) finns i en behållare som styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody

Om höjden på den här behållaren verkar vara större än huvudområdet i dialogrutan aktiveras en lodrät rullning automatiskt av komponenten.

CSS-egenskaper för dialogrutans brödtext ​

utfyllnad
Inre utfyllnad.

Exempel - om du vill ställa in formulärinnehåll så att det har en utfyllnad på tio pixlar:

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

Dialogruteformuläret fylls i rad för rad, där varje rad innehåller en del av formulärinnehållet (som en etikett och ett textinmatningsfält). En formulärrad styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

CSS-egenskaper för dialograden

utfyllnad
Utfyllnad för inre linje.

Exempel - om du vill ställa in ett dialogruteformulär så att det får tio pixlar för varje rad:

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

Alla statiska etiketter i dialogrutan styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoglabel

Den här klassen är inte lämplig för att styra etikettens storlek eller placering eftersom du kan använda den på text på olika ställen i användargränssnittet.

CSS-egenskaper för dialogruteetiketten. ​

font-weight
Etikettens teckensnittsbredd.
font-size
Teckensnittsstorlek för etikett.
font-family
Etikettteckensnittsfamilj.
färg
Textfärg för etikett.

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

Exempel - om du vill ställa in alla etiketter till grått, fetstil med ett teckensnitt på nio pixlar:

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

Alla statiska etiketter som visas till vänster om formulärinmatningsfälten styrs med:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel

CSS-egenskaper för dialogrutans indataetikett

width
Bredden på den statiska etiketten.
textjustering
Vågrät textjustering.
marginal
Statisk etikettmarginal.
utfyllnad
Statisk etikettutfyllnad.

Exempel - om du vill ställa in etiketter för inmatningsfält så att de är 50 pixlar breda, högerjusterade, har tio pixlar utfyllnad och en marginal på tio pixlar till höger:

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

Varje formulärindatafält placeras i behållaren så att du kan använda en anpassad kantlinje runt indatafältet. Den styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer

CSS-egenskaper för dialogrutans indatabehållare

kant
Kantlinje runt inmatningsfältbehållaren.
utfyllnad
Inre utfyllnad.
NOTE
Indatafältbehållaren stöder den valfria attributväljaren state. Värdet är verifyerror när användaren gör ett misstag i indataformatet och det inte går att utföra intern validering. Den här attributväljaren kan användas för att markera felaktiga användarindata i formuläret.

De flesta indatafält som sprids från etiketten till vänster upp till höger i dialogrutans brödtext (som inkluderar fältet Från och fältet Meddelande) styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide

CSS-egenskaper för dialogrutans inmatningsfält

width
Bredd på indatafält.

Fältet Till är smalare eftersom det tilldelar utrymme för knappen Ta bort e-post till höger. Den styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort

CSS-egenskaper för dialogrutans korta inmatningsfält

width
Bredd på indatafält.

Exempel - Att ställa in ett formulär så att det har en grå kant på en pixel med nio pixlar utfyllnad runt alla inmatningsfält. Att ha samma kantlinje i röd färg för fält som inte godkänns vid validering. Och slutligen, om du vill ha 250 pixlar bred till-fält och resten av inmatningsfälten 300 pixlar bred:

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

Indatafältet för e-postmeddelanden styrs också med:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage

Med den här klassen kan du ange specifika egenskaper för det underliggande TEXTAREA-elementet.

CSS-egenskaper för dialogrutemeddelandet

height
Meddelandets höjd.
automatisk radbrytning
Radbrytningsformat.

Exempel - om du vill konfigurera ett e-postmeddelande så att det är 50 pixlar högt och använder break-word ordomslutning:

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

Med knappen Lägg till en annan e-postadress kan en användare lägga till fler än en adress i e-postformuläret. Den styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton

CSS-egenskaper i dialogrutan lägger till e-postadressknapp

height
Knapphöjd.
färg
Knapptextfärg för varje läge.
background-image
Knappbild för varje läge.
background-position
Knappbildens placering inuti knappområdet.
font-weight
Knappens teckensnittsbredd.
font-size
Knappens teckenstorlek.
font-family
Knappteckensnittsfamilj.
line-height
Texthöjd inuti knappen. Påverkar lodrät justering.
textjustering
Vågrät textjustering.
utfyllnad
Inre utfyllnad.
NOTE
Den här knappen stöder attributväljaren state som kan användas för att tillämpa olika skal på olika knapplägen.

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

Exempel - Om du vill ställa in knappen "Lägg till en annan e-postadress" så att den är 25 pixlar hög använder du 12 punkters fet stil med högerjustering och en annan textfärg och bild för varje läge:

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

Med knappen Ta bort kan en användare ta bort extra adresser från e-postformuläret. Den styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton

CSS-egenskaper i dialogrutan Ta bort e-postknapp

width
Knappbredd.
height
Knapphöjd.
background-image
Knappbild för varje läge.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se även CSS-fragment.

NOTE
Den här knappen stöder attributväljaren state som kan användas för att tillämpa olika skal på olika knapplägen.

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

Exempel - om du vill ställa in en Ta bort-knapp på 25 x 25 pixlar och använda en annan bild för varje läge:

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

Innehållet som delas visas längst ned i dialogrutan och innehåller en miniatyrbild, rubrik, ursprungs-URL och beskrivning. Den placeras i en behållare som styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent

CSS-egenskaper för dialogrutans innehåll ​

kant
Behållarkanten.
utfyllnad
Inre utfyllnad.

Exempel - om du vill ställa in en behållare längst ned så att den har en prickad kant på en pixel och ingen utfyllnad:

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

Miniatyrbilder styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail

Egenskapen background-image anges av komponentlogiken.

CSS-egenskaper för dialogrutans miniatyrbild

width
Bredd på miniatyrbild.
height
Höjd på miniatyrbild.
lodrät justering
Miniatyrbild för lodrät justering.
utfyllnad
Inre utfyllnad.

Exempel - om du vill ställa in en miniatyrbild som är 90 x 60 pixlar och en överkant som är justerad med tio pixlar utfyllnad:

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

Innehållsrubrik, ursprung och beskrivning grupperas ytterligare i en panel till höger om miniatyrbilden. Den styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel

CSS-egenskaper för informationspanelen i dialogrutan

width
Panelbredd.

Exempel - om du vill ställa in en innehållspanel som är 300 pixlar bred:

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

Innehållstiteln styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle

CSS-egenskaper för dialogrutans rubrik

marginal
Yttre marginal.
font-weight
Teckenbredd.
font-size
Teckenstorlek.
font-family
Teckensnittsfamilj.

Exempel - om du vill ställa in en innehållstitel så att den använder fet stil och har en marginal på tio pixlar:

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

Innehållets ursprung styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin

CSS-egenskaper för dialogrutans innehållsursprung ​

marginal
Yttre marginal.
font-weight
Teckenbredd.
font-size
Teckenstorlek.
font-family
Teckensnittsfamilj.

Exempel - om du vill ställa in innehållets utgångspunkt så att den har en marginal på tio pixlar:

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

Innehållsbeskrivningen styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription

CSS-egenskaper för dialogrutans innehållsbeskrivning

marginal
Yttre marginal.
font-weight
Teckenbredd.
font-size
Teckenstorlek.
font-family
Teckensnittsfamilj.

Exempel - om du vill ställa in en innehållsbeskrivning så att den har en marginal på tio pixlar och ett teckensnitt med nio punkter:

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

När en användare anger felaktiga indata och den infogade valideringen misslyckas visas ett meddelande högst upp i dialogrutan. Det här meddelandet visas även när dialogrutan måste återge ett fel eller ett bekräftelsemeddelande när formuläret skickas. Den styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage

CSS-egenskaper i dialogrutans felmeddelande

background-image
Felikon. Standard är ett utropstecken.
background-position
Felikonens position i meddelandeområdet.
färg
Textfärg för meddelande.
font-weight
Teckenbredd.
font-size
Teckenstorlek.
font-family
Teckensnittsfamilj.
line-height
Texthöjd inuti meddelandet. Påverkar lodrät justering.
utfyllnad
Inre utfyllnad.
NOTE
Det här meddelandet stöder attributväljaren state med följande möjliga värden: verifyerror, senderror och sendsuccess. Värdet verifyerror anges när ett meddelande visas på grund av ett internt indatavalideringsfel. Värdet senderror anges när en e-posttjänst för serverdel rapporterar ett fel. Värdet sendsuccess anges när e-post har skickats. På det här sättet kan du formatera meddelandet på olika sätt beroende på hur dialogrutan ser ut.

Knappens funktionsbeskrivning kan lokaliseras.

Mer information finns i Lokalisering av användargränssnittselement.

Exempel - Om du vill ange att ett meddelande ska använda ett teckensnitt med tio punkters fet stil har du en radhöjd på 25 pixlar och en utfyllnad på 20 pixlar till vänster. Och slutligen, använd en utropsteckenikon, röd text om det finns ett fel och ingen ikon och grön text om det lyckas:

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

Om lodrät rullning behövs återges rullningslisten i panelen nära den högra kanten av dialogrutan, som styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogscrollpanel

CSS-egenskaper för dialogrutans rullningspanel

width
Bredd på rullningspanelen.

Exempel - för att ställa in en rullningspanel till 44 pixlar bred:

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

Utseendet på rullningslistområdet styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar

CSS-egenskaper för rullningslisten

width
Bredden på rullningslisten.
övre
Den lodräta rullningslistens förskjutning från rullningspanelens överkant.
nederkant
Den lodräta rullningslistens förskjutning från rullningspanelens nederkant.
höger
Den vågräta rullningslistens förskjutning från rullningspanelens högra kant.

Exempel - för att ställa in en rullningslist som är 28 pixlar bred, en åtta pixelmarginaler uppifrån, till höger och nedåt på rullningspanelen:

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

Rullningslistens spår är området mellan den övre och den nedre rullningsknappen. Komponenten ställer automatiskt in spårets position och höjd. Spåret styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack

CSS-egenskaper för rullningsspåret

width
Spårbredden.
background-color
Bakgrundsfärg för spår.

Exempel - för att ställa in ett rullningslistspår som är 28 pixlar brett och har en grå bakgrund:

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

Rullningslistens reglage rör sig lodrätt inom ett rullningsspårsområde. Dess lodräta position styrs helt av komponentlogiken, men tumhöjden ändras inte dynamiskt beroende på mängden innehåll. Du kan konfigurera tumhöjden och andra aspekter med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb

CSS-egenskaper för rullningslistens reglage

width
Miniatyrbredden.
height
Tumthöjden.
-utfyllnadspunkt
Den lodräta utfyllnaden mellan spårets överkant.
utfyllnad-nederkant
Den lodräta utfyllnaden mellan spårets nederkant.
background-image
Bilden som visas för ett givet tumläge.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se även CSS-fragment.

NOTE
Tummen stöder attributväljaren state, som kan användas för att tillämpa olika skal på olika tumlägen: up, down, over och disabled.

Exempel - för att ställa in rullningslistens reglage som är 28 x 45 pixlar, har en marginal på tio pixlar över och under och har olika teckningar för varje läge:

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

Utseendet på de övre och nedre rullningsknapparna styrs av följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .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 den övre och undre rullningsknappen

width
Knappens bredd.
height
Knappens höjd.
background-image
Bilden som visas för ett visst knappläge.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se även CSS-fragment.

NOTE
Dessa knappar har stöd för attributväljaren state, som kan användas för att tillämpa olika skal på olika knapplägen: up, down, over och disabled.

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

Exempel - för att ställa in rullningsknappar som är 28 x 32 pixlar och har olika teckningar för varje läge:

.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