Condivisione collegamenti link-share

Il strumento di condivisione dei collegamenti è costituito da un pulsante aggiunto al pannello di condivisione Social e dalla finestra di dialogo modale che viene visualizzata quando il strumento viene attivato. La posizione del pulsante è interamente gestita dal strumento Social share.

L'aspetto del pulsante di condivisione collegare è controllato con i seguenti selettore di classe CSS:

.s7ecatalogsearchviewer .s7linkshare

Proprietà CSS dell'strumento di condivisione collegare

È possibile rimuovere il pulsante dal pannello di condivisione Social impostando display:none la proprietà CSS sulla sua classe CSS.

Il suggerimento strumento pulsante può essere localizzato. Per ulteriori informazioni, consulta Localizzazione di utente elementi dell'interfaccia.

Esempio: per impostare un pulsante di condivisione collegare di 28 x 28 pixel e visualizza un'immagine diversa per ciascuno dei quattro diversi stati pulsante:

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

Il sovrapposizione in background che copre la pagina Web quando la finestra di dialogo è attiva, è controllato con la seguente classe CSS selettore:

.s7ecatalogsearchviewer .s7linkdialog .s7backoverlay

Proprietà CSS della sovrapposizione in background

Esempio: per impostare la sovrapposizione di sfondo su grigio con opacità 70%:

.s7ecatalogsearchviewer .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:

.s7ecatalogsearchviewer .s7linkdialog .s7dialog

Proprietà CSS della finestra di dialogo

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

.s7ecatalogsearchviewer .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

.s7ecatalogsearchviewer .s7linkdialog .s7dialogheader

Proprietà CSS dell'intestazione della finestra di dialogo

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialogheader .s7dialogline

Proprietà CSS della riga di dialogo

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialogheadericon

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

Il titolo dell'intestazione è controllato con la seguente classe CSS selettore:

.s7ecatalogsearchviewer .s7linkdialog .s7dialogheadertext

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

Chiudi pulsante è controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7linkdialog .s7closebutton

Proprietà CSS della close 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:

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialogfooter

Proprietà CSS del ​ piè di pagina 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:

.s7ecatalogsearchviewer .s7linkdialog .s7dialogbuttoncontainer

Proprietà CSS del contenitore del pulsante della finestra di dialogo

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton

Il pulsante è disponibile solo sui sistemi desktop.

Proprietà CSS del pulsante Seleziona tutto

Annulla pulsante è controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton

Proprietà CSS del pulsante Annulla della finestra di dialogo

Inoltre, entrambi i pulsanti condividono una classe CSS comune che può contenere impostazioni CSS uguali per altri pulsanti della finestra di dialogo:

.s7ecatalogsearchviewer .s7linkdialog .s7dialogfooter .s7button

Proprietà CSS del pulsante

I suggerimenti pulsante strumento possono essere localizzati. Per ulteriori informazioni, consulta Localizzazione di utente elementi dell'interfaccia.

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

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

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialogviewarea

Proprietà CSS dell'area di visualizzazione della finestra di dialogo ​

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

.s7ecatalogsearchviewer .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:

.s7ecatalogsearchviewer .s7linkdialog .s7dialogbody

Proprietà CSS del ​ del corpo della finestra di dialogo

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

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

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

.s7ecatalogsearchviewer .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. ​

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:

.s7ecatalogsearchviewer .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:

.s7ecatalogsearchviewer .s7linkdialog .s7dialoginputwide

Proprietà CSS del campo di input-wide della finestra di dialogo

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

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

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialoginputcontainer

Proprietà CSS del contenitore di input della finestra di dialogo

Esempio: per impostare una bordo grigia di un pixel attorno al testo del codice di incorporamento e avere nove pixel di spaziatura:

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

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialoglink

Proprietà CSS della finestra di dialogo, condividere collegare

Esempio: per impostare il collegare di condivisione in modo che abbia una larghezza di 450 pixel:

.s7ecatalogsearchviewer .s7linkdialog .s7dialoglink {
    width: 450px;
}