Il pannello Azioni Invito all'azione viene visualizzato al termine del video e visualizza tutti i campioni interattivi associati a quel particolare video.
Il pannello è costituito da un’area di intestazione che mostra il titolo del video, un pulsante di riproduzione nell’angolo in alto a destra e campioni interattivi effettivi visualizzati come griglia scorrevole. Puoi disabilitare il pannello utilizzando l'attributo di configurazione callToActionRecap .
Il pannello di invito all’azione occupa sempre l’intera area di visualizzazione disponibile.
Il seguente selettore di classe CSS controlla l’aspetto del colore di sfondo nel pannello delle azioni di invito all’azione:
.s7interactivevideoviewer .s7calltoaction
colore di sfondo |
Colore di sfondo della chiamata al pannello azioni. |
Per impostare una chiamata al pannello azioni con sfondo grigio scuro:
.s7interactivevideoviewer .s7calltoaction {
background-color: #222222;
}
Il seguente selettore di classe CSS controlla l’aspetto dell’intestazione nel pannello di invito all’azione:
.s7interactivevideoviewer .s7calltoaction .s7header
colore di sfondo |
Colore di sfondo dell’intestazione. |
height |
Altezza dell'intestazione. |
bordo-fondo |
Bordo inferiore dell’intestazione. |
Per impostare un'intestazione alta 70 pixel, con uno sfondo grigio scuro e un bordo di due pixel grigio leggermente più chiaro lungo il fondo:
.s7interactivevideoviewer .s7calltoaction .s7header {
height: 70px;
border-bottom: 2px solid #444444;
background-color: #222222;
}
Il seguente selettore di classe CSS controlla l’aspetto del titolo dell’intestazione nel pannello di invito all’azione:
.s7interactivevideoviewer .s7calltoaction .s7header .s7title
color |
Colore del testo all’interno del banner. |
font-size |
Dimensione del carattere. |
altezza riga |
Altezza della linea. |
font-family |
Famiglia di caratteri. |
text-align |
Allineamento del testo nel banner. |
spaziatura sinistra |
Spaziatura a sinistra. |
margine destro |
Spaziatura a destra per consentire spazio al pulsante Riproduci. |
Per impostare un titolo video con un’altezza di 70 pixel, dimensioni del font da 25 pixel, colore bianco e allineamento a sinistra:
.s7interactivevideoviewer .s7calltoaction .s7header .s7title {
line-height: 70px;
font-size: 25px;
color: #ffffff;
text-align: left;
}
Il seguente selettore di classe CSS controlla l'aspetto del pulsante Chiudi nel pannello di invito all'azione:
.s7interactivevideoviewer .s7calltoaction .s7closebutton
top |
Posizione dalla parte superiore dell’intestazione, inclusa la spaziatura. |
right |
Posizione a destra dell’intestazione, inclusa la spaziatura. |
width |
Larghezza pulsante. |
altezza |
Altezza del pulsante. |
immagine di sfondo |
Immagine visualizzata per un determinato stato del pulsante. |
posizione di sfondo |
Posizionare all’interno dello sprite dell’immagine, se vengono utilizzati gli spriti CSS. Consulta Sprite CSS . |
Questo pulsante supporta il selettore di attributi state
, che può essere utilizzato per applicare interfacce diverse a diversi stati del pulsante.
Per impostare un pulsante di riproduzione di 28 x 28 pixel. Il pulsante deve essere posizionato a 20 pixel dalla parte superiore e dal bordo destro dell’intestazione. E deve visualizzare un'immagine diversa per ciascuno dei quattro stati del pulsante; prende l’immagine dall’immagine spritica del componente:
.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;
}
Il seguente selettore di classe CSS controlla l’aspetto della vista della griglia delle miniature nel pannello di chiamata all’azione:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview
colore di sfondo |
Colore di sfondo dell’area miniature. |
Per impostare un’area delle miniature con sfondo grigio scuro:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview {
background-color: #222222;
}
Il seguente selettore di classe CSS controlla l’aspetto della cella miniatura nel pannello di chiamata all’azione :
.s7interactivevideoviewer .s7calltoaction .s7thumbcell
margine |
Dimensione del margine orizzontale e verticale intorno a ciascuna miniatura. La spaziatura orizzontale effettiva delle miniature è uguale alla somma del margine sinistro e destro impostato per .s7thumbcell . La stessa regola si applica anche ma alla spaziatura verticale. |
Per impostare la spaziatura orizzontale di 24 pixel e la spaziatura verticale di 18 pixel:
.s7interactivevideoviewer .s7calltoaction .s7thumbcell {
margin-top: 9px;
margin-bottom: 9px;
margin-left: 12px;
margin-right: 12px;
}
Il seguente selettore di classe CSS controlla l’aspetto della miniatura nel pannello di chiamata all’azione :
.s7interactivevideoviewer .s7calltoaction .s7thumb
larghezza |
Larghezza della miniatura. |
altezza |
Altezza della miniatura. |
border |
Bordo della miniatura. |
La miniatura supporta il selettore di attributi state
, che può essere utilizzato per applicare skin diversi a diversi stati di miniatura. In particolare, state="selected"
corrisponde alla miniatura dell'immagine attualmente selezionata; state="default"
corrisponde alle altre miniature; state="over"
viene utilizzato al passaggio del mouse.
Per impostare miniature di 94 x 100 pixel:
.s7interactivevideoviewer .s7calltoaction .s7thumb {
width:94px;
height:100px;
}
Il seguente selettore di classe CSS controlla l’aspetto dell’etichetta della miniatura nel pannello di chiamata all’azione :
.s7interactivevideoviewer .s7calltoaction .s7label
color |
Colore testo dell'etichetta. |
text-align |
Allineamento orizzontale dell’etichetta. |
font-family |
Nome carattere. |
font-size |
Famiglia di caratteri. |
Per impostare le etichette che utilizzano un colore bianco, allinearle al centro a 15 pixel e utilizzare un font Arial®:
.s7interactivevideoviewer .s7calltoaction .s7label {
text-align: center;
color: #ffffff;
font-family: Arial,Helvetica,sans-serif;
font-size: 15px;
}
Se sono presenti più miniature di quelle che possono essere visualizzate verticalmente, le miniature riproducono una barra di scorrimento verticale sul lato destro. Per impostazione predefinita, la chiamata al pannello azioni esegue il rendering di una barra verticale minuscola senza pulsanti di scorrimento e miniatura. Tuttavia, è possibile personalizzare la barra modificando il CSS del visualizzatore.
Il seguente selettore di classe CSS controlla l’aspetto dell’area della barra di scorrimento nel pannello di chiamata all’azione:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar
larghezza |
Larghezza della barra di scorrimento. |
top |
Offset barra di scorrimento verticale dalla parte superiore dell'area miniature. |
bottom |
Offset barra di scorrimento verticale dal fondo dell'area miniature. |
right |
Offset barra di scorrimento orizzontale dal bordo destro dell'area miniature. |
Per impostare una barra di scorrimento larga 22 pixel e priva di margini dall’alto, a destra o dal basso dell’area delle miniature:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar {
top:0px;
bottom:0px;
right:0px;
width:22px;
}
La traccia della barra di scorrimento è l’area compresa tra i pulsanti della barra di scorrimento superiore e inferiore. Il componente imposta automaticamente la posizione e l'altezza del brano.
Il seguente selettore di classe CSS controlla l’aspetto del brano della barra di scorrimento nel pannello di chiamata all’azione :
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack
larghezza |
Larghezza della barra della traccia di scorrimento. |
colore di sfondo |
Colore di sfondo della barra dei brani. |
Per impostare una traccia della barra di scorrimento larga 22 pixel e con un colore grigio:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
width:22px;
background-color:#222222;
}
Il pollice della barra di scorrimento si sposta verticalmente all’interno dell’area della traccia di scorrimento. La sua posizione verticale è completamente controllata dalla logica del componente; tuttavia, l’altezza della miniatura non cambia dinamicamente a seconda della quantità di contenuto.
Il seguente selettore di classe CSS controlla l’aspetto dell’altezza del pollice e di altri aspetti:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb
larghezza |
Larghezza del pollice. |
altezza |
Altezza del pollice. |
imbottitura superiore |
Spaziatura verticale tra la parte superiore del brano. |
imbottitura inferiore |
Spaziatura verticale tra il fondo del brano. |
raggio bordo |
Raggio del bordo. |
colore di sfondo |
Colore del pollice. |
immagine di sfondo |
Immagine visualizzata per un dato stato pollice. |
posizione di sfondo |
Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS. Consulta Sprite CSS . |
Thumb supporta il selettore di attributi state
, che può essere utilizzato per applicare skin diversi ai seguenti stati di pollice: "up"
, "down"
, "over"
e "disabled"
.
Per impostare un pollice della barra di scorrimento di 6 x 167 pixel, ha tre angoli arrotondati per pixel e un colore grigio:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state] {
width:6px;
height:167px;
background-color:#666666;
background-image:none;
border-radius:3px 3px 3px 3px;
}
Il seguente selettore di classe CSS controlla l’aspetto dei pulsanti di scorrimento superiore e inferiore:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton
Non è possibile posizionare i pulsanti di scorrimento utilizzando le proprietà CSS in alto, a sinistra, in basso o a destra; la logica del visualizzatore li posiziona automaticamente. Il pannello delle azioni nel visualizzatore video interattivo non utilizza questi pulsanti nella barra di scorrimento, pertanto le loro dimensioni sono impostate su 0 pixel nel CSS predefinito.
larghezza |
Larghezza del pulsante. |
altezza |
Altezza del pulsante. |
immagine di sfondo |
Immagine visualizzata per un determinato stato del pulsante. |
posizione di sfondo |
Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS. Consulta Sprite CSS . |
Questi pulsanti supportano il selettore di attributi state
, che può essere utilizzato per applicare skin diversi ai seguenti stati del pollice: "up"
, "down"
, "over"
e "disabled"
.
Le descrizioni dei pulsanti possono essere localizzate. Consulta Localizzazione degli elementi dell'interfaccia utente.
Disattiva i pulsanti di scorrimento impostandone le dimensioni su 0 e nascondendoli:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
visibility: hidden;
width: 0px;
height: 0px;
}
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
visibility: hidden;
width: 0px;
height: 0px;
}