Condivisione social social-share

Per impostazione predefinita, lo strumento condivisione social viene visualizzato nell'angolo superiore sinistro. È 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 condivisione social network nell’interfaccia utente del visualizzatore sono controllate da quanto segue:

.s7ecatalogsearchviewer .s7socialshare

Proprietà CSS dello strumento condivisione social

margin-top
Offset dalla parte superiore della barra di controllo.
margin=left
Distanza dal pulsante successivo a sinistra o dal lato sinistro della barra di controllo se questo pulsante è il primo di una riga.
width
Larghezza dello strumento di condivisione social.
height
Altezza dello strumento di condivisione social.

Esempio: configura uno strumento di condivisione social, posizionato a quattro pixel dall’alto e a cinque pixel dalla destra del contenitore visualizzatore e ridimensionato a 28 x 28 pixel.

.s7ecatalogsearchviewer .s7socialshare {
margin-top: 4px;
margin-left: 10px; width:28px;
 height:28px;
}

L’aspetto del pulsante dello strumento Condivisione social è controllato dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7socialshare .s7socialbutton

Proprietà CSS del pulsante social

background-image
Immagine visualizzata per un determinato stato del pulsante.
background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Vedi anche Spunti CSS.

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

La descrizione comando del pulsante può essere localizzata. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio: imposta un pulsante per lo strumento di condivisione social che visualizza un’immagine diversa per ciascuno dei quattro diversi stati dei pulsanti.

.s7ecatalogsearchviewer .s7socialshare .s7socialbutton[state='up'] {
background-image:url(images/v2/SocialShare_video_dark_up.png);
}
.s7ecatalogsearchviewer .s7socialshare .s7socialbutton[state='over'] {
background-image:url(images/v2/SocialShare_dark_over.png);
}
.s7ecatalogsearchviewer .s7socialshare .s7socialbutton[state='down'] {
background-image:url(images/v2/SocialShare_dark_down.png);
}
.s7ecatalogsearchviewer .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 dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7socialshare .s7socialsharepanel

Proprietà CSS del pannello Condivisione social

background-color
Colore di sfondo del pannello.

Esempio: impostare un pannello con un colore trasparente:

.s7ecatalogsearchviewer .s7socialshare .s7socialsharepanel {
 background-color: transparent;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8