Condivisione collegamento link-share

Lo strumento Condivisione collegamenti è costituito da un pulsante aggiunto al pannello Condivisione social e dalla finestra di dialogo modale visualizzata quando lo strumento viene attivato. La posizione del pulsante è completamente gestita dallo strumento Condivisione social.

L’aspetto del pulsante di condivisione del collegamento è controllato dal seguente selettore di classe CSS:

.s7ecatalogviewer .s7linkshare

Proprietà CSS dello strumento condivisione collegamenti

larghezza
Larghezza pulsante.
altezza
Altezza pulsante.
immagine di sfondo
Immagine visualizzata per un determinato stato del pulsante.
background-position

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

Vedere anche sprite CSS.

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

È possibile rimuovere il pulsante dal pannello Condivisione social impostando la proprietà CSS display:none sulla relativa classe CSS.

La descrizione comando del pulsante può essere localizzata. Per ulteriori informazioni, vedere Localizzazione degli elementi dell'interfaccia utente.

Esempio: per impostare un pulsante di condivisione del collegamento di 28 x 28 pixel e visualizzare un'immagine diversa per ciascuno dei quattro stati dei pulsanti:

.s7ecatalogviewer .s7linkshare {
 width:28px;
 height:28px;
}
.s7ecatalogviewer .s7linkshare[state='up'] {
background-image:url(images/v2/LinkShare_dark_up.png);
}
.s7ecatalogviewer .s7linkshare[state='over'] {
background-image:url(images/v2/LinkShare_dark_over.png);
}
.s7ecatalogviewer .s7linkshare[state='down'] {
background-image:url(images/v2/LinkShare_dark_down.png);
}
.s7ecatalogviewer .s7linkshare[state='disabled'] {
background-image:url(images/v2/LinkShare_dark_disabled.png);
}

La sovrapposizione di sfondo che copre la pagina web quando la finestra di dialogo è attiva è controllata dal seguente selettore di classe CSS:

.s7ecatalogviewer .s7linkdialog .s7backoverlay

Proprietà CSS della sovrapposizione in background

opacità
Opacità sovrapposizione sfondo.
colore di sfondo
Colore di sovrapposizione sfondo.

Esempio: per impostare una sovrapposizione di sfondo grigia con opacità 70%:

.s7ecatalogviewer .s7linkdialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

Per impostazione predefinita, la finestra di dialogo modale viene visualizzata centrata sullo schermo dei sistemi desktop e occupa l’intera area della pagina web sui dispositivi touch. In tutti i casi, il posizionamento e il ridimensionamento della finestra di dialogo vengono gestiti dal componente. La finestra di dialogo è controllata dal seguente selettore di classe CSS:

.s7ecatalogviewer .s7linkdialog .s7dialog

Proprietà CSS della finestra di dialogo

raggio bordo
Raggio del bordo della finestra di dialogo, nel caso in cui la finestra di dialogo non occupi l'intero browser.
colore di sfondo
Colore di sfondo della finestra di dialogo.
larghezza
Deve essere disattivato o impostato su 100%, nel qual caso la finestra di dialogo occupa l'intera finestra del browser (questa modalità è preferita sui dispositivi touch).
altezza
Deve essere disattivato o impostato su 100%, nel qual caso la finestra di dialogo occupa l'intera finestra del browser (questa modalità è preferita sui dispositivi touch).

Esempio - Per impostare la finestra di dialogo in modo da utilizzare l'intera finestra del browser e avere uno sfondo bianco sui dispositivi touch:

.s7ecatalogviewer .s7touchinput .s7linkdialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

L'intestazione della finestra di dialogo è costituita da un'icona, un testo del titolo e un pulsante di chiusura. Il contenitore di intestazione è controllato con

.s7ecatalogviewer .s7linkdialog .s7dialogheader

Proprietà CSS dell'intestazione della finestra di dialogo

riempimento
Spaziatura interna per contenuto intestazione.

L’icona e il testo del titolo vengono racchiusi in un contenitore aggiuntivo controllato da

.s7ecatalogviewer .s7linkdialog .s7dialogheader .s7dialogline

Proprietà CSS della riga di dialogo

riempimento
Spaziatura interna per l’icona e il titolo dell’intestazione.

L’icona dell’intestazione è controllata dal seguente selettore di classe CSS

.s7ecatalogviewer .s7linkdialog .s7dialogheadericon

Proprietà CSS dell'icona dell'intestazione della finestra di dialogo

larghezza
Larghezza icona.
altezza
Altezza icona.
immagine di sfondo
Immagine icona.
background-position

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

Vedere anche sprite CSS.

Il titolo dell’intestazione è controllato dal seguente selettore di classe CSS:

.s7ecatalogviewer .s7linkdialog .s7dialogheadertext

Proprietà CSS del testo dell'intestazione della finestra di dialogo

font-weight
Spessore font.
font-size
Altezza carattere.
famiglia di caratteri
Famiglia di caratteri.
riempimento
Spaziatura interna testo.

Il pulsante Chiudi è controllato dal seguente selettore di classe CSS:

.s7ecatalogviewer .s7linkdialog .s7closebutton

Proprietà CSS del ​ del pulsante Chiudi

primi
Posizione verticale del pulsante rispetto al contenitore di intestazione.
a destra
Posizione del pulsante orizzontale relativa al contenitore di intestazione.
larghezza
Larghezza pulsante.
altezza
Altezza pulsante.
riempimento
Spaziatura interna del pulsante.
immagine di sfondo
Immagine pulsante per ogni stato.
background-position

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

Vedere anche sprite CSS.

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

È possibile localizzare la descrizione comando del pulsante Chiudi e il titolo della finestra di dialogo. Per ulteriori informazioni, vedere Localizzazione degli elementi dell'interfaccia utente.

Esempio: per impostare un'intestazione di finestra di dialogo con spaziatura interna, un'icona di 22 x 12 pixel e un titolo di 16 punti in grassetto. Infine, un pulsante Chiudi di 28 x 28 pixel posizionato due pixel dalla parte superiore e due pixel dalla destra del contenitore della finestra di dialogo:

.s7ecatalogviewer .s7linkdialog .s7dialogheader {
 padding: 10px;
}
.s7ecatalogviewer .s7linkdialog .s7dialogheader .s7dialogline {
 padding: 10px 10px 2px;
}
.s7ecatalogviewer .s7linkdialog .s7dialogheadericon {
    background-image: url("images/sdk/dlglink_cap.png");
    height: 12px;
    width: 22px;
}
.s7ecatalogviewer .s7linkdialog .s7dialogheadertext {
    font-size: 16pt;
    font-weight: bold;
    padding-left: 16px;
}
.s7ecatalogviewer .s7linkdialog .s7closebutton {
 top:2px;
 right:2px;
 padding:8px;
 width:28px;
 height:28px;
}
.s7ecatalogviewer .s7linkdialog .s7closebutton[state='up'] {
 background-image:url(images/sdk/close_up.png);
}
.s7ecatalogviewer .s7linkdialog .s7closebutton[state='over'] {
 background-image:url(images/sdk/close_over.png);
}
.s7ecatalogviewer .s7linkdialog .s7closebutton[state='down'] {
 background-image:url(images/sdk/close_down.png);
}
.s7ecatalogviewer .s7linkdialog .s7closebutton[state='disabled'] {
 background-image:url(images/sdk/close_disabled.png);
}

Il piè di pagina della finestra di dialogo è costituito da un pulsante Annulla. Il contenitore piè di pagina è controllato dal seguente selettore di classe CSS:

.s7ecatalogviewer .s7linkdialog .s7dialogfooter

Proprietà CSS del ​ piè di pagina della finestra di dialogo

bordo
Bordo che consente di separare visivamente il piè di pagina dal resto della finestra di dialogo.

Il piè di pagina contiene un contenitore interno che mantiene il pulsante. Viene controllata con il seguente selettore di classe CSS:

.s7ecatalogviewer .s7linkdialog .s7dialogbuttoncontainer

Proprietà CSS del contenitore del pulsante della finestra di dialogo

riempimento
Spaziatura interna tra piè di pagina e pulsante.

Il pulsante Seleziona tutto è controllato dal seguente selettore di classe CSS:

.s7ecatalogviewer .s7linkdialog .s7dialogactionbutton

Il pulsante è disponibile solo sui sistemi desktop.

Proprietà CSS del pulsante Seleziona tutto

larghezza
Larghezza pulsante.
altezza
Altezza pulsante.
colore
Colore testo pulsante per ogni stato.
colore di sfondo
Colore di sfondo pulsante per ogni stato.
NOTE
Il pulsante Seleziona tutto supporta il selettore di attributi state, che può essere utilizzato per applicare interfacce diverse a diversi stati dei pulsanti.

Il pulsante Annulla è controllato dal seguente selettore di classe CSS:

.s7ecatalogviewer .s7linkdialog .s7dialogcancelbutton

Proprietà CSS del pulsante Annulla della finestra di dialogo

larghezza
Larghezza pulsante.
altezza
Altezza pulsante.
colore
Colore testo pulsante per ogni stato.
colore di sfondo
Colore di sfondo pulsante per ogni stato.
NOTE
Questo pulsante supporta il selettore di attributi state, che può essere utilizzato per applicare interfacce diverse a diversi stati di pulsante.

Inoltre, entrambi i pulsanti condividono la stessa classe CSS che può contenere impostazioni CSS identiche a quelle degli altri pulsanti della finestra di dialogo:

.s7ecatalogviewer .s7linkdialog .s7dialogfooter .s7button

Proprietà CSS del pulsante

font-weight
Spessore font pulsante.
font-size
Dimensione font pulsante.
famiglia di caratteri
Famiglia font pulsante.
altezza riga
Altezza del testo all'interno del pulsante. Influisce sull'allineamento verticale.
box-shadow
Ombra esterna.
margine destro
Margine pulsante destro.

Le descrizioni dei pulsanti possono essere localizzate. Per ulteriori informazioni, vedere Localizzazione degli elementi dell'interfaccia utente.

Esempio: per impostare un piè di pagina della finestra di dialogo con un pulsante Annulla 64 x 34, con un colore del testo e un colore di sfondo diversi per ogni stato del pulsante:

.s7ecatalogviewer .s7linkdialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7ecatalogviewer .s7linkdialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7ecatalogviewer .s7linkdialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7ecatalogviewer .s7linkdialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7ecatalogviewer .s7linkdialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7ecatalogviewer .s7linkdialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogviewer .s7linkdialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogviewer .s7linkdialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7ecatalogviewer .s7linkdialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7ecatalogviewer .s7linkdialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7ecatalogviewer .s7linkdialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogviewer .s7linkdialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogviewer .s7linkdialog .s7dialogactionbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}

L’area della finestra di dialogo principale, tra l’intestazione e il piè di pagina, contiene il contenuto della finestra di dialogo. In tutti i casi, il componente gestisce la larghezza di quest’area, non è possibile impostarla in CSS. L’area della finestra di dialogo principale è controllata dal seguente selettore di classe CSS:

.s7ecatalogviewer .s7linkdialog .s7dialogviewarea

Proprietà CSS della finestra di dialogo ​ area di visualizzazione

altezza
Altezza della finestra di dialogo principale. Deve essere specificato solo quando la finestra di dialogo funziona in modalità desktop. Non è applicabile quando la finestra di dialogo viene ridimensionata per occupare l'intera finestra del browser.
colore di sfondo
Colore di sfondo dell'area della finestra di dialogo principale.
margine
Margine esterno.

Esempio: per impostare un'area della finestra di dialogo principale di 300 pixel, avere un margine di dieci pixel e utilizzare uno sfondo bianco:

.s7ecatalogviewer .s7linkdialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}

Tutto il contenuto del modulo (come etichette e campi di input) si trova all’interno di un contenitore controllato con il seguente selettore di classe CSS:

.s7ecatalogviewer .s7linkdialog .s7dialogbody

Proprietà CSS del ​ del corpo della finestra di dialogo

riempimento
Spaziatura interna.

Esempio: per impostare il contenuto del modulo su una spaziatura di dieci pixel:

.s7ecatalogviewer .s7linkdialog .s7dialogbody {
    padding: 10px;
}

Tutte le etichette statiche nel modulo della finestra di dialogo sono controllate da

.s7ecatalogviewer .s7linkdialog .s7dialoglabel

Questa classe non è adatta per controllare la dimensione o la posizione dell'etichetta perché può essere applicata a testi in varie posizioni dell'interfaccia utente del modulo.

Proprietà CSS dell'etichetta della finestra di dialogo. ​

font-weight
Spessore font etichetta.
font-size
Dimensione font etichetta.
famiglia di caratteri
Famiglia font etichetta.
colore
Colore testo etichetta.

Le etichette delle finestre di dialogo possono essere localizzate. Per ulteriori informazioni, vedere Localizzazione degli elementi dell'interfaccia utente.

Esempio: per impostare tutte le etichette come grigie, in grassetto con un carattere di nove pixel:

.s7ecatalogviewer .s7linkdialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

La dimensione della copia di testo visualizzata sopra il collegamento è controllata dal seguente selettore di classe CSS:

.s7ecatalogviewer .s7linkdialog .s7dialoginputwide

Proprietà CSS del campo a livello di input della finestra di dialogo

larghezza
Larghezza testo.
riempimento
Spaziatura interna.

Esempio: per impostare una copia di testo larga 430 pixel e con una spaziatura di dieci pixel nella parte inferiore:

.s7ecatalogviewer .s7linkdialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

Il collegamento di condivisione viene racchiuso in un contenitore e controllato con il seguente selettore di classe CSS:

.s7ecatalogviewer .s7linkdialog .s7dialoginputcontainer

Proprietà CSS del contenitore di input della finestra di dialogo

bordo
Bordo intorno al contenitore del collegamento di condivisione.
riempimento
Spaziatura interna.

Esempio: per impostare un bordo grigio di un pixel attorno al testo del codice da incorporare e avere nove pixel di spaziatura interna:

.s7ecatalogviewer .s7linkdialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 9px;
}

Il collegamento di condivisione stesso è controllato con il seguente selettore di classe CSS:

.s7ecatalogviewer .s7linkdialog .s7dialoglink

Proprietà CSS del collegamento di condivisione della finestra di dialogo

larghezza
Condividere la larghezza del collegamento.

Esempio: per impostare la larghezza del collegamento di condivisione su 450 pixel:

.s7ecatalogviewer .s7linkdialog .s7dialoglink {
    width: 450px;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8