A exibição principal consiste na imagem estática, na imagem com zoom mostrada na exibição de flyout na parte superior da imagem estática e na mensagem de dica mostrada na parte superior da imagem estática.

Propriedades CSS da exibição principal

A aparência da exibição principal é controlada com o seguinte seletor de classe CSS:

.s7flyoutviewer .s7flyoutzoomview

Propriedade CSS	Descrição
cor do fundo	A cor de plano de fundo da exibição principal.

Exemplo - para tornar a exibição principal transparente:

.s7flyoutviewer .s7flyoutzoomview { 
 background-color: transparent; 
}

Propriedades CSS da mensagem de dica

A aparência da mensagem de dica é controlada com o seguinte seletor de classe CSS:

.s7flyoutviewer .s7flyoutzoomview .s7tip

É possível configurar o estilo da fonte, a aparência do tamanho e o deslocamento vertical por meio do CSS. No entanto, o alinhamento horizontal é gerenciado pela lógica do visualizador. Não há suporte para substituí-lo por meio de CSS usando propriedades left ou right.

Propriedade CSS	Descrição
bottom	Deslocamento na parte inferior da exibição principal.
color	Cor do texto.
família de fontes	Nome da fonte.
tamanho da fonte	Tamanho da fonte.
preenchimento	Preenchimento em torno do texto da mensagem.
cor do fundo	Cor de preenchimento do plano de fundo do texto da mensagem.
border-radius	Raio da borda do plano de fundo do texto da mensagem.
opacidade	Opacidade do texto da mensagem em segundo plano. Para o Internet Explorer 8, use filter:alpha(opacity-...) )

A mensagem de dica pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - para configurar uma mensagem de ponta semitransparente com fonte branca Arial 12px, 50 pixels deslocados da parte inferior da exibição principal, preenchimento e uma borda arredondada:

.s7flyoutviewer .s7flyoutzoomview .s7tip { 
bottom: 50px; 
color: #ffffff; 
font-family: Arial; 
font-size: 12px; 
padding-bottom: 10px; 
padding-top: 10px; 
padding-left: 12px; 
padding-right: 12px; 
background-color: #000000; 
border-radius: 4px; 
opacity: 0.5; 
filter: alpha(opacity = 50); 
}