Vínculos compartidos :headding-anchor:link-share

La herramienta para compartir vínculos consiste en un botón agregado al panel Compartir en redes sociales y el cuadro de diálogo modal que se muestra cuando se activa la herramienta. La posición del botón se administra completamente mediante la herramienta Compartir en redes sociales.

El aspecto del botón para compartir vínculos se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7linkshare

Propiedades CSS de la herramienta para compartir vínculos

ancho
Ancho del botón.
altura
Altura del botón.
imagen de fondo
Imagen que se muestra para un estado de botón determinado.
posición de fondo

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte también Sprites CSS.

NOTE
Este botón es compatible con el selector de atributos state, que se puede utilizar para aplicar diferentes aspectos a diferentes estados de botones.

Es posible quitar el botón del panel Compartir en redes sociales estableciendo la propiedad CSS display:none en su clase CSS.

La información del objeto del botón se puede localizar. Consulte Localización de elementos de la interfaz de usuario para obtener más información.

Ejemplo: Para configurar un botón de uso compartido de vínculos de 28 x 28 píxeles y mostrar una imagen diferente para cada uno de los cuatro estados de botón diferentes:

.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 superposición de fondo que cubre la página web cuando el cuadro de diálogo está activo, se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7linkdialog .s7backoverlay

Propiedades CSS de la superposición en segundo plano

opacidad
Opacidad de superposición de fondo.
color de fondo
Color de superposición de fondo.

Ejemplo: Para configurar una superposición de fondo para que sea gris con una opacidad del 70 %:

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

De forma predeterminada, el cuadro de diálogo modal se muestra centrado en la pantalla de los sistemas de escritorio y ocupa toda el área de la página web en los dispositivos táctiles. En todos los casos, el componente gestiona la colocación y el tamaño del cuadro de diálogo. El cuadro de diálogo se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7linkdialog .s7dialog

Propiedades CSS del cuadro de diálogo

borde-radio
Radio del borde del cuadro de diálogo, en caso de que el cuadro de diálogo no ocupe todo el explorador.
color de fondo
Color de fondo del cuadro de diálogo.
ancho
Debe estar desconfigurado o configurado al 100 %, en cuyo caso el cuadro de diálogo ocupa toda la ventana del explorador (este modo es preferido en dispositivos táctiles).
altura
Debe estar desconfigurado o configurado al 100 %, en cuyo caso el cuadro de diálogo ocupa toda la ventana del explorador (este modo es preferido en dispositivos táctiles).

Ejemplo: Para configurar el cuadro de diálogo para que utilice toda la ventana del explorador y tenga un fondo blanco en los dispositivos táctiles:

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

El encabezado del cuadro de diálogo consta de un icono, un texto de título y un botón de cierre. El contenedor de encabezado se controla con

.s7ecatalogviewer .s7linkdialog .s7dialogheader

Propiedades CSS del encabezado del cuadro de diálogo

relleno
Relleno interno del contenido del encabezado.

El icono y el texto del título se envuelven en un contenedor adicional controlado con

.s7ecatalogviewer .s7linkdialog .s7dialogheader .s7dialogline

Propiedades CSS de la línea de diálogo

relleno
Relleno interno del icono de encabezado y del título.

El icono de encabezado se controla con el siguiente selector de clase CSS

.s7ecatalogviewer .s7linkdialog .s7dialogheadericon

Propiedades CSS del icono de encabezado del cuadro de diálogo

ancho
Ancho del icono.
altura
Altura del icono.
imagen de fondo
Imagen del icono.
posición de fondo

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte también Sprites CSS.

El título del encabezado se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7linkdialog .s7dialogheadertext

Propiedades CSS del texto del encabezado del cuadro de diálogo

font-weight
Grosor de fuente.
tamaño de fuente
Altura de la fuente.
font-family
Familia de fuentes.
relleno
Relleno de texto interno.

El botón Cerrar se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7linkdialog .s7closebutton

Propiedades CSS del ​ de botón Cerrar

principales
Posición vertical del botón en relación con el contenedor de encabezado.
derecho
Posición horizontal del botón relativa al contenedor del encabezado.
ancho
Ancho del botón.
altura
Altura del botón.
relleno
Relleno interior del botón.
imagen de fondo
Imagen de botón para cada estado.
posición de fondo

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte también Sprites CSS.

NOTE
Este botón es compatible con el selector de atributos state, que se puede utilizar para aplicar diferentes aspectos a diferentes estados de botones.

Se puede localizar la información del objeto del botón Cerrar y el título del cuadro de diálogo. Consulte Localización de elementos de la interfaz de usuario para obtener más información.

Ejemplo: Para configurar un encabezado de cuadro de diálogo con relleno, icono de 22 x 12 píxeles y un título de 16 puntos en negrita. Y, por último, un botón Cerrar de 28 x 28 píxeles situado a dos píxeles de la parte superior y a dos píxeles de la derecha del contenedor del cuadro de diálogo:

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

El pie de página del cuadro de diálogo consta de un botón Cancelar. El contenedor de pie de página se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7linkdialog .s7dialogfooter

Propiedades CSS de la ​ de pie de página del cuadro de diálogo

borde
Borde que se puede utilizar para separar visualmente el pie de página del resto del cuadro de diálogo.

El pie de página tiene un contenedor interno que mantiene el botón. Se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7linkdialog .s7dialogbuttoncontainer

Propiedades CSS del contenedor de botones del cuadro de diálogo

relleno
Relleno interno entre el pie de página y el botón.

El botón Seleccionar todo se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7linkdialog .s7dialogactionbutton

El botón sólo está disponible en sistemas de escritorio.

Propiedades CSS del botón Seleccionar todo

ancho
Ancho del botón.
altura
Altura del botón.
color
Color del texto del botón para cada estado.
color de fondo
Color de fondo del botón para cada estado.
NOTE
El botón Seleccionar todo es compatible con el selector de atributos state, que se puede utilizar para aplicar distintas máscaras a distintos estados de botón.

El botón Cancelar se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7linkdialog .s7dialogcancelbutton

Propiedades CSS del botón Cancelar del cuadro de diálogo

ancho
Ancho del botón.
altura
Altura del botón.
color
Color del texto del botón para cada estado.
color de fondo
Color de fondo del botón para cada estado.
NOTE
Este botón es compatible con el selector de atributos state, que se puede utilizar para aplicar diferentes aspectos a diferentes estados de botones.

Además, ambos botones comparten una clase CSS común que puede contener configuraciones de CSS iguales para otros botones de cuadro de diálogo:

.s7ecatalogviewer .s7linkdialog .s7dialogfooter .s7button

Propiedades CSS del botón

font-weight
Grosor de fuente del botón.
tamaño de fuente
Tamaño de fuente del botón.
font-family
Familia de fuentes Button.
altura de línea
Altura del texto dentro del botón. Afecta a la alineación vertical.
box-shadow
Sombra paralela.
margen derecho
Margen del botón derecho.

La información sobre herramientas de los botones se puede localizar. Consulte Localización de elementos de la interfaz de usuario para obtener más información.

Ejemplo: para configurar un pie de página de cuadro de diálogo con un botón Cancelar de 64 x 34, con un color de texto y un color de fondo diferentes para cada estado de botón:

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

El área de diálogo principal, entre el encabezado y el pie de página, contiene contenido de diálogo. En todos los casos, el componente administra la anchura de esta área; no es posible establecerla en CSS. El área del cuadro de diálogo principal se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7linkdialog .s7dialogviewarea

Propiedades CSS de la ​ del área de visualización del cuadro de diálogo

altura
Alto del área del cuadro de diálogo principal. Sólo debe especificarse cuando el cuadro de diálogo funciona en modo escritorio. No es aplicable cuando el tamaño del cuadro de diálogo es tal que ocupa toda la ventana del explorador.
color de fondo
Color de fondo del área del cuadro de diálogo principal.
margen
Margen exterior.

Ejemplo: para configurar un área de cuadro de diálogo principal con una altura de 300 píxeles, tener un margen de diez píxeles y utilizar un fondo blanco:

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

Todo el contenido del formulario (como etiquetas y campos de entrada) reside dentro de un contenedor controlado con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7linkdialog .s7dialogbody

Propiedades CSS del ​ de cuerpo del cuadro de diálogo

relleno
Relleno interior.

Ejemplo: para configurar el contenido del formulario para que tenga un relleno de diez píxeles:

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

Todas las etiquetas estáticas del formulario de cuadro de diálogo se controlan con

.s7ecatalogviewer .s7linkdialog .s7dialoglabel

Esta clase no es adecuada para controlar el tamaño o la posición de la etiqueta porque puede aplicarla a textos en varios lugares de la interfaz de usuario del formulario.

Propiedades CSS de la etiqueta del cuadro de diálogo. ​

font-weight
Grosor de fuente de etiqueta.
tamaño de fuente
Tamaño de fuente de etiqueta.
font-family
Familia de fuentes de etiquetas.
color
Color de texto de etiqueta.

Las etiquetas de los cuadros de diálogo se pueden localizar. Consulte Localización de elementos de la interfaz de usuario para obtener más información.

Ejemplo: para configurar todas las etiquetas como grises, negrita con una fuente de nueve píxeles:

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

El tamaño de la copia de texto que se muestra sobre el vínculo se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7linkdialog .s7dialoginputwide

Propiedades CSS del campo que abarca toda la entrada del cuadro de diálogo

ancho
Ancho del texto.
relleno
Relleno interior.

Ejemplo: para definir que la copia de texto tenga un ancho de 430 píxeles y un relleno de diez píxeles en la parte inferior:

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

El vínculo compartido se envuelve en un contenedor y se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7linkdialog .s7dialoginputcontainer

Propiedades CSS del contenedor de entrada del cuadro de diálogo

borde
Borde alrededor del contenedor de vínculo compartido.
relleno
Relleno interior.

Ejemplo: para establecer un borde gris de un píxel alrededor del texto del código incrustado y tener nueve píxeles de relleno:

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

El vínculo compartido en sí se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7linkdialog .s7dialoglink

Propiedades CSS del vínculo compartido del cuadro de diálogo

ancho
Compartir la anchura del vínculo.

Por ejemplo, para establecer que el vínculo compartido tenga un ancho de 450 píxeles:

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