Quota sociale

Per impostazione predefinita, lo strumento di condivisione social network viene visualizzato nell'angolo in alto a sinistra. È 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:

.s7ecatalogsearchviewer .s7socialshare

Proprietà CSS dello strumento di social sharing

margine superiore

Offset dalla parte superiore della barra di controllo.

margin=left

La distanza dal pulsante successivo a sinistra o dal lato sinistro della barra di controllo, se si tratta del primo pulsante di una riga.

width

Larghezza dello strumento di condivisione social network.

height

Altezza dello strumento di condivisione social network.

Esempio : configura uno strumento di condivisione social network che si posiziona a quattro pixel dalla parte superiore e a cinque pixel dalla parte destra del contenitore del visualizzatore e viene ridimensionato a 28 x 28 pixel.

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

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

.s7ecatalogsearchviewer .s7socialshare .s7socialbutton

Proprietà CSS del pulsante social

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.

Vedi anche 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. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

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

.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 con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7socialshare .s7socialsharepanel

Proprietà CSS del pannello di condivisione social

colore di sfondo

Colore di sfondo del pannello.

Esempio: imposta un pannello con colore trasparente:

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

In questa pagina