In modalità zoom in linea, la visualizzazione principale è costituita dall’immagine statica. È inoltre costituito dall’immagine ingrandita mostrata nella visualizzazione a comparsa sull’immagine statica e dal messaggio di suggerimento visualizzato sull’immagine statica.
Proprietà CSS dell’area visualizzatore principale
L’aspetto della vista principale è controllato con il seguente selettore di classe CSS:
.s7mixedmediaviewer .s7flyoutzoomview
Proprietà CSS |
Descrizione |
---|---|
colore di sfondo |
Colore di sfondo della vista principale. |
Esempio: per rendere trasparente la visualizzazione principale:
.s7mixedmediaviewer .s7flyoutzoomview {
background-color: transparent;
}
L’aspetto del messaggio di suggerimento è controllato con il seguente selettore di classe CSS:
.s7mixedmediaviewer .s7flyoutzoomview .s7tip
È possibile configurare lo stile del font, l’aspetto delle dimensioni e l’offset verticale tramite CSS. Tuttavia, l’allineamento orizzontale è gestito dalla logica del visualizzatore. Sovrascrittura tramite CSS utilizzando left
o right
proprietà non supportate.
Proprietà CSS del messaggio di suggerimento
Proprietà CSS |
Descrizione |
---|---|
colore di sfondo |
Colore di riempimento dello sfondo del messaggio. |
raggio bordo |
Raggio del bordo dello sfondo del messaggio. |
bottom |
Offset dal fondo della vista principale. |
color |
Colore testo punta. |
font-size |
Dimensione del carattere. |
font-family |
Famiglia di caratteri. |
opacità |
Opacità di sfondo del messaggio. |
spaziatura interna |
Spaziatura intorno al testo del messaggio. |
Il messaggio di suggerimento può essere localizzato. Vedi Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.
Esempio: per impostare un messaggio di suggerimento semitrasparente con un carattere bianco Arial® 12-px, uno scostamento di 50 pixel dal fondo della vista principale, della spaziatura e un bordo arrotondato:
.s7mixedmediaviewer .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);
}