Call to action call-to-action

Panelen Call to action visas när videon avslutas och alla interaktiva färgrutor som är kopplade till videon visas.

Panelen består av ett rubrikområde som visar videotiteln, en knapp för att spela upp i det övre högra hörnet och faktiska interaktiva färgrutor som visas som ett rullningsbart rutnät. Du kan inaktivera panelen med konfigurationsattributet callToActionRecap.

På call to action-panelen visas alltid hela det tillgängliga visningsprogramområdet.

Följande CSS-klassväljare styr utseendet på bakgrundsfärgen i panelen call to action:

.s7interactivevideoviewer .s7calltoaction

CSS-egenskaper för bakgrundsfärgen i panelen call to action css-properties-of-the-background-color-of-the-call-to-action-panel

Exempel example

Så här ställer du in en call to action-panel med mörkgrå bakgrund:

.s7interactivevideoviewer .s7calltoaction {
    background-color: #222222;
}

Följande CSS-klassväljare styr utseendet på sidhuvudet på panelen call to action:

.s7interactivevideoviewer .s7calltoaction .s7header

CSS-egenskaper för call to action-panelrubriken css-properties-of-the-call-to-action-panel-header

Exempel example-1

Så här ställer du in en rubrik som är 70 pixlar hög, med en mörkgrå bakgrund och en något ljusare grå kant på två pixlar längs nederkanten:

.s7interactivevideoviewer .s7calltoaction .s7header {
    height: 70px;
    border-bottom: 2px solid #444444;
    background-color: #222222;
}

Följande CSS-klassväljare styr utseendet på rubriktiteln i panelen call to action:

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

CSS-egenskaper för rubriktiteln i panelen call to action: css-properties-of-the-header-title-in-the-call-to-action-panel

Exempel example-2

Så här ställer du in en videotitel med en radhöjd på 70 pixlar, en teckensnittsstorlek på 25 pixlar, vit färg och vänsterjusterad:

.s7interactivevideoviewer .s7calltoaction .s7header .s7title {
    line-height: 70px;
    font-size: 25px;
    color: #ffffff;
    text-align: left;
}

Följande CSS-klassväljare styr utseendet på stängningsknappen i panelen call to action:

.s7interactivevideoviewer .s7calltoaction .s7closebutton

CSS-egenskaper för stängningsknappen på panelen call to action: css-properties-of-the-close-button-in-the-call-to-action-panel

Exempel example-3

Så här ställer du in en uppspelningsknapp som är 28 x 28 pixlar. Knappen måste placeras 20 pixlar från sidhuvudets övre och högra kant. Och den måste visa olika bilder för vart och ett av de fyra olika knapplägena. Bilden hämtas från komponentens sprite-bild:

.s7interactivevideoviewer .s7calltoaction .s7closebutton {
 top: 20px;
 right: 20px;
 background-size: 336px;
 width: 28px;
 height: 28px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state] {
 background-image: url(images/v2/PlayPauseButton_sprite.png);
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='up'] {
 background-position: -28px -1260px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='over'] {
 background-position: -0px -1260px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='down'] {
 background-position: -28px -1232px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='disabled'] {
 background-position: -0px -1232px;
}

Följande CSS-klassväljare styr utseendet på miniatyrrutnätsvyn i panelen call to action:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

CSS-egenskaper för miniatyrrutnätsvyn i panelen call to action: css-properties-of-the-thumbnail-grid-view-in-the-call-to-action-panel

Exempel example-4

Så här ställer du in ett miniatyrområde med en mörkgrå bakgrund:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview {
    background-color: #222222;
}

Följande CSS-klassväljare styr utseendet på tumcellen i panelen call to action:

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

CSS-egenskaper för tumcellen i panelen call to action: css-properties-of-the-thumbcell-in-the-call-to-action-panel

Exempel example-5

Så här anger du ett vågrätt mellanrum på 24 pixlar och ett lodrätt mellanrum på 18 pixlar:

.s7interactivevideoviewer .s7calltoaction .s7thumbcell {
 margin-top: 9px;
 margin-bottom: 9px;
 margin-left: 12px;
 margin-right: 12px;
}

Följande CSS-klassväljare styr utseendet på miniatyrbilden i panelen call to action:

.s7interactivevideoviewer .s7calltoaction .s7thumb

CSS-egenskaper för miniatyrbilden i panelen call to action: css-properties-of-the-thumbnail-in-the-call-to-action-panel

Exempel example-6

Så här ställer du in miniatyrbilder som är 94 x 100 pixlar:

.s7interactivevideoviewer .s7calltoaction .s7thumb {
 width:94px;
 height:100px;
}

Följande CSS-klassväljare styr utseendet på miniatyretiketten i panelen call to action:

.s7interactivevideoviewer .s7calltoaction .s7label

CSS-egenskaper för miniatyrbildetiketten i panelen call to action: css-properties-of-the-thumbnail-label-in-the-call-to-action-panel

Exempel example-7

Om du vill ställa in etiketter som använder en vit färg ska du centrera 15 pixlar och använda ett Arial®-teckensnitt:

.s7interactivevideoviewer .s7calltoaction .s7label {
 text-align: center;
 color: #ffffff;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 15px;
}

Om det finns fler miniatyrbilder än vad som får plats lodrätt i vyn återges en lodrät rullningslist till höger med miniatyrbilder. Som standard återges ett litet lodrätt streck utan reglage och rullningsknappar på panelen call to action. Du kan dock anpassa fältet genom att ändra CSS-koden för visningsprogrammet.

Följande CSS-klassväljare styr utseendet på rullningslistområdet i panelen call to action:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

CSS-egenskaper för rullningslistområdet i panelen call to action: css-properties-of-the-scroll-bar-area-in-the-call-to-action-panel

Exempel example-8

Så här ställer du in en rullningslist som är 22 pixlar bred och som inte har någon marginal uppifrån, till höger eller nedåt i miniatyrbildområdet:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar {
 top:0px;
 bottom:0px;
 right:0px;
 width:22px;
}

Rullningslistens spår är området mellan den övre och den nedre rullningslistens knappar. Komponenten ställer automatiskt in spårets position och höjd.

Följande CSS-klassväljare styr utseendet på rullningslistens spår i panelen call to action:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

CSS-egenskaper för rullningslisten css-properties-of-the-scroll-track-bar

Exempel example-9

Så här ställer du in ett rullningslistspår som är 22 pixlar brett och har en grå färg:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
 width:22px;
 background-color:#222222;
}

Rullningslistens reglage rör sig lodrätt inom rullningsspårets område. Dess lodräta position styrs helt av komponentlogiken, men tumhöjden ändras inte dynamiskt beroende på mängden innehåll.

Följande CSS-klassväljare styr utseendet på tumhöjden och andra proportioner:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

CSS-egenskaper för tumshöjden i panelen call to action: css-properties-of-the-thumb-height-in-the-call-to-action-panel

Exempel example-10

Om du vill ställa in ett reglage för rullningslisten som är 6 x 167 pixlar, har tre pixlar rundade hörn och en grå färg:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state] {
 width:6px;
 height:167px;
 background-color:#666666;
 background-image:none;
 border-radius:3px 3px 3px 3px;
}

Följande CSS-klassväljare styr utseendet på de övre och nedre rullningsknapparna:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

Det går inte att placera rullningsknappar med CSS-egenskaperna top, left, bottom eller right. Visningsprogrammets logik placerar dem automatiskt. På call to action-panelen i det interaktiva visningsprogrammet används inte dessa knappar i rullningslisten, och deras storlek är inställd på 0 pixlar i standard-CSS.

CSS-egenskaper för de övre och nedre rullningsknapparna i panelen call to action: css-properties-of-the-top-and-bottom-scroll-buttons-in-the-call-to-action-panel

Knappens tips kan lokaliseras. Se Lokalisering av element i användargränssnittet.

Exempel example-11

Inaktivera rullningsknappar genom att ange deras storlek till 0 och dölja dem:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
 visibility: hidden;
 width: 0px;
 height: 0px;
}
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
 visibility: hidden;
 width: 0px;
 height: 0px;
}