Compartilhamento em redes sociais

A ferramenta de compartilhamento social aparece no canto superior direito por padrão. Consiste em um botão e um painel que é expandido quando o usuário clica ou toca em um botão e contém ferramentas de compartilhamento individuais.

A posição e o tamanho da ferramenta de compartilhamento social na interface do usuário do visualizador são controlados com o seguinte:

.s7interactivevideoviewer .s7socialshare

Propriedades CSS da ferramenta de compartilhamento social

top

Posição vertical da ferramenta de compartilhamento em redes sociais em relação ao contêiner do visualizador.

left

Posição horizontal da ferramenta de compartilhamento social em relação ao contêiner do visualizador.

width

A largura da ferramenta de compartilhamento social.

altura

A altura da ferramenta de compartilhamento social.

Exemplo

Para configurar uma ferramenta de compartilhamento social que é posicionada quatro pixels da parte superior e cinco pixels à direita do contêiner do visualizador e é dimensionada 28 x 28 pixels.

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

A aparência do botão de ferramenta de compartilhamento social é controlada pelo seguinte seletor de classe CSS:

.s7interactivevideoviewer .s7socialshare .s7socialbutton

Propriedades CSS do botão de ferramenta de compartilhamento social

imagem de fundo

A imagem exibida para um determinado estado de botão.

posição de fundo

Posição dentro da estrutura de arte, se os sprites CSS forem usados.

Consulte Sprites CSS .

OBSERVAÇÃO

Esse botão suporta o seletor de atributos state, que pode ser usado para aplicar skins diferentes a estados de botão diferentes.

A dica de ferramenta do botão pode ser localizada. Consulte Localização dos elementos da interface do usuário.

Exemplo

Para configurar um botão de ferramenta de compartilhamento social que exibe uma imagem diferente para cada um dos quatro estados de botão diferentes.

.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); 
}

A aparência do painel que contém os ícones individuais de compartilhamento social é controlada pelo seguinte seletor de classe CSS:

.s7interactivevideoviewer .s7socialshare .s7socialsharepanel

Propriedades de CSS do painel de compartilhamento social

cor do fundo

A cor de plano de fundo do painel.

Exemplo

Para configurar um painel para ter uma cor transparente:

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

Nesta página