Länkresurs link-share
Länkdelningsverktyget består av en knapp som läggs till på panelen Dela via sociala medier och den modala dialogruta som visas när verktyget aktiveras. Knappens position hanteras helt av verktyget för social delning.
Utseendet på knappen för länkdelning styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7linkshare
CSS-egenskaper för länkdelningsverktyget
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 länkdelning som är 28 x 28 pixlar och visar olika bilder för de fyra olika knapplägena:
.s7ecatalogsearchviewer .s7linkshare {
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7linkshare[state='up'] {
background-image:url(images/v2/LinkShare_dark_up.png);
}
.s7ecatalogsearchviewer .s7linkshare[state='over'] {
background-image:url(images/v2/LinkShare_dark_over.png);
}
.s7ecatalogsearchviewer .s7linkshare[state='down'] {
background-image:url(images/v2/LinkShare_dark_down.png);
}
.s7ecatalogsearchviewer .s7linkshare[state='disabled'] {
background-image:url(images/v2/LinkShare_dark_disabled.png);
}
Bakgrundsöverlägget som täcker webbsidan när dialogrutan är aktiv styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7linkdialog .s7backoverlay
CSS-egenskaper för bakgrundsövertäckningen
Exempel - om du vill ställa in en bakgrundsövertäckning som grå med 70 % opacitet:
.s7ecatalogsearchviewer .s7linkdialog .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å touchenheter. I samtliga fall hanteras placeringen och storleken på dialogrutan av komponenten. Dialogrutan styrs av följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7linkdialog .s7dialog
CSS-egenskaper för dialogrutan
Exempel - för att ställa in dialogrutan så att den använder hela webbläsarfönstret och har en vit bakgrund på pekenheter:
.s7ecatalogsearchviewer .s7touchinput .s7linkdialog .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
.s7ecatalogsearchviewer .s7linkdialog .s7dialogheader
CSS-egenskaper för dialogrutans rubrik
Ikonen och rubriktexten placeras i en extra behållare som styrs med
.s7ecatalogsearchviewer .s7linkdialog .s7dialogheader .s7dialogline
CSS-egenskaper för dialograden
Rubrikikonen styrs med följande CSS-klassväljare
.s7ecatalogsearchviewer .s7linkdialog .s7dialogheadericon
CSS-egenskaper för dialogrutans rubrikikon
Rubriken styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7linkdialog .s7dialogheadertext
CSS-egenskaper för dialogrutans rubriktext
Stängningsknappen styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7linkdialog .s7closebutton
CSS-egenskaper för stängningsknappen
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 en dialogruterubrik med utfyllnad, en ikon med storleken 22 x 12 pixlar och en rubrik med 16 punkter i fet stil. Slutligen en stängningsknapp på 28 x 28 pixlar som placeras två pixlar uppifrån och två pixlar från höger om dialogrutan:
.s7ecatalogsearchviewer .s7linkdialog .s7dialogheader {
padding: 10px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogheader .s7dialogline {
padding: 10px 10px 2px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogheadericon {
background-image: url("images/sdk/dlglink_cap.png");
height: 12px;
width: 22px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogheadertext {
font-size: 16pt;
font-weight: bold;
padding-left: 16px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7closebutton {
top:2px;
right:2px;
padding:8px;
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7closebutton[state='up'] {
background-image:url(images/sdk/close_up.png);
}
.s7ecatalogsearchviewer .s7linkdialog .s7closebutton[state='over'] {
background-image:url(images/sdk/close_over.png);
}
.s7ecatalogsearchviewer .s7linkdialog .s7closebutton[state='down'] {
background-image:url(images/sdk/close_down.png);
}
.s7ecatalogsearchviewer .s7linkdialog .s7closebutton[state='disabled'] {
background-image:url(images/sdk/close_disabled.png);
}
Dialogrutans sidfot består av en Avbryt-knapp. Sidfotsbehållaren styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7linkdialog .s7dialogfooter
CSS-egenskaper för dialogrutans sidfot
Sidfoten har en inre behållare som behåller knappen. Den styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7linkdialog .s7dialogbuttoncontainer
CSS-egenskaper för dialogruteknappbehållaren
Knappen Markera allt styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton
Knappen är bara tillgänglig på stationära datorer.
CSS-egenskaper för knappen Markera allt
state som kan användas för att tillämpa olika skal på olika knapplägen.Knappen Avbryt styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton
CSS-egenskaper för knappen Avbryt i dialogrutan
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 .s7linkdialog .s7dialogfooter .s7button
CSS-egenskaper för knappen
Knappens tips 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), där textfärgen och bakgrundsfärgen är olika för varje knappläge:
.s7ecatalogsearchviewer .s7linkdialog .s7dialogfooter {
border-top: 1px solid #909090;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogbuttoncontainer {
padding-bottom: 6px;
padding-top: 10px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogfooter .s7button {
box-shadow: 1px 1px 1px #999999;
color: #FFFFFF;
font-size: 9pt;
font-weight: bold;
line-height: 34px;
margin-right: 10px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton {
width:64px;
height:34px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton[state='up'] {
background-color:#666666;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton[state='down'] {
background-color:#555555;
color:#ffffff;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton[state='over'] {
background-color:#555555;
color:#ffffff;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton {
width:82px;
height:34px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton[state='up'] {
background-color:#333333;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton[state='down'] {
background-color:#222222;
color:#cccccc;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton[state='over'] {
background-color:#222222;
color:#cccccc;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
Huvudområdet i dialogrutan, mellan sidhuvudet och sidfoten, innehåller dialoginnehåll. 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 .s7linkdialog .s7dialogviewarea
CSS-egenskaper i dialogrutans visningsområde
Exempel - om du vill ställa in ett huvudområde i dialogrutan till 300 pixlars höjd, har en marginal på tio pixlar och använder en vit bakgrund:
.s7ecatalogsearchviewer .s7linkdialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:300px;
}
Allt formulärinnehåll (som etiketter och inmatningsfält) finns i en behållare som styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7linkdialog .s7dialogbody
CSS-egenskaper för dialogrutans brödtext
Exempel - om du vill ställa in formulärinnehåll så att det har en utfyllnad på tio pixlar:
.s7ecatalogsearchviewer .s7linkdialog .s7dialogbody {
padding: 10px;
}
Alla statiska etiketter i dialogruteformuläret styrs med
.s7ecatalogsearchviewer .s7linkdialog .s7dialoglabel
Den här klassen är inte lämplig för att styra etikettens storlek eller placering eftersom du kan använda den på texter på olika ställen i användargränssnittet.
CSS-egenskaper för dialogruteetiketten.
Dialogruteetiketter kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.
Exempel - om du vill ställa in alla etiketter till grått, fet med ett teckensnitt på nio pixlar:
.s7ecatalogsearchviewer .s7linkdialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
Storleken på textkopian som visas ovanpå länken styrs av följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7linkdialog .s7dialoginputwide
CSS-egenskaper för dialogrutans inmatningsfält
Exempel - för att ange att textkopian ska vara 430 pixlar bred och ha en utfyllnad på tio pixlar längst ned:
.s7ecatalogsearchviewer .s7linkdialog .s7dialoginputwide {
padding-bottom: 10px;
width: 430px;
}
Delningslänken kapslas i en behållare och styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7linkdialog .s7dialoginputcontainer
CSS-egenskaper för dialogrutans indatabehållare
Exempel - om du vill ange en grå kant på en pixel runt inbäddningskoden och ha nio pixlar utfyllnad:
.s7ecatalogsearchviewer .s7linkdialog .s7dialoginputcontainer {
border: 1px solid #CCCCCC;
padding: 9px;
}
Själva delningslänken styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7linkdialog .s7dialoglink
CSS-egenskaper i dialogrutan för att dela länk
Exempel - för att ange delningslänken som 450 pixlar bred:
.s7ecatalogsearchviewer .s7linkdialog .s7dialoglink {
width: 450px;
}