Quota sociale

Per impostazione predefinita, lo strumento di condivisione social network viene visualizzato nell’angolo in alto a destra. È costituito da un pulsante e da un pannello che si espande quando l’utente fa clic o tocca un pulsante e contiene singoli strumenti di condivisione.

La posizione e le dimensioni dello strumento di social sharing nell'interfaccia utente del visualizzatore sono controllate con i seguenti elementi:

.s7interactivevideoviewer .s7socialshare

Proprietà CSS dello strumento di social sharing

top

Posizione verticale dello strumento di condivisione social rispetto al contenitore del visualizzatore.

sinistra

Posizione orizzontale dello strumento di condivisione social rispetto al contenitore del visualizzatore.

width

Larghezza dello strumento di condivisione social network.

height

Altezza dello strumento di condivisione social network.

Esempio

Per impostare uno strumento di condivisione social network che sia posizionato a quattro pixel dalla parte superiore e a cinque pixel dalla parte destra del contenitore del visualizzatore e abbia dimensioni di 28 x 28 pixel.

.s7interactivevideoviewer .s7socialshare { 
 top:4px; 
 right:5px; 
 width:28px; 
 height:28px; 
}

L'aspetto del pulsante dello strumento di social sharing è controllato con il seguente selettore di classe CSS:

.s7interactivevideoviewer .s7socialshare .s7socialbutton

Proprietà CSS del pulsante dello strumento di social sharing

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 .

NOTA

Questo pulsante supporta il selettore di attributi state , che può essere utilizzato per applicare interfacce diverse a diversi stati del pulsante.

La descrizione comando del pulsante può essere localizzata. Consulta Localizzazione degli elementi dell'interfaccia utente.

Esempio

Per impostare un pulsante dello strumento di condivisione social network che mostra un’immagine diversa per ciascuno dei quattro stati del pulsante.

.s7interactivevideoviewer .s7socialshare .s7socialbutton[state='up'] { 
background-image:url(images/v2/SocialShare_video_dark_up.png); 
} 
.s7interactivevideoviewer .s7socialshare .s7socialbutton[state='over'] { 
background-image:url(images/v2/SocialShare_dark_over.png); 
} 
.s7interactivevideoviewer .s7socialshare .s7socialbutton[state='down'] { 
background-image:url(images/v2/SocialShare_dark_down.png); 
} 
.s7interactivevideoviewer .s7socialshare .s7socialbutton[state='disabled'] { 
background-image:url(images/v2/SocialShare_dark_disabled.png); 
}

L'aspetto del pannello che contiene le singole icone di condivisione social è controllato con il seguente selettore di classe CSS:

.s7interactivevideoviewer .s7socialshare .s7socialsharepanel

Proprietà CSS del pannello di condivisione social

colore di sfondo

Colore di sfondo del pannello.

Esempio

Per impostare un pannello in modo che abbia un colore trasparente:

.s7interactivevideoviewer .s7socialshare .s7socialsharepanel { 
 background-color: transparent; 
}

In questa pagina