Vínculo compartido

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 la gestiona completamente la herramienta Compartir en Social.

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

.s7ecatalogsearchviewer .s7linkshare

Propiedades CSS de la herramienta para compartir vínculos

width

Ancho del botón.

height

Altura del botón.

background-image

Imagen que se muestra para un estado de botón determinado.

background-position

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte también Sprites CSS .

NOTA

Este botón admite el selector de atributos state, que puede utilizarse para aplicar diferentes apariencias a distintos estados de botones.

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

La información de objeto del botón se puede localizar. Consulte Localización de los 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:

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

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:

.s7ecatalogsearchviewer .s7linkdialog .s7backoverlay

Propiedades CSS de la superposición de fondo

opacidad

Opacidad de superposición de fondo.

background-color

Color de superposición de fondo.

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

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

De forma predeterminada, el cuadro de diálogo modal se muestra centrado en la pantalla en los sistemas de escritorio y toma todo el área de la página web en 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:

.s7ecatalogsearchviewer .s7linkdialog .s7dialog

Propiedades CSS del cuadro de diálogo

border-radius

Radio del borde del cuadro de diálogo, en caso de que el cuadro de diálogo no ocupe todo el explorador.

background-color

Color de fondo del cuadro de diálogo.

width

Se debe desactivar o establecer en 100 %, en cuyo caso el cuadro de diálogo toma toda la ventana del navegador (este modo es preferible en dispositivos táctiles).

height

Se debe desactivar o establecer en 100 %, en cuyo caso el cuadro de diálogo toma toda la ventana del navegador (este modo es preferible en dispositivos táctiles).

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

.s7ecatalogsearchviewer .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 del encabezado se controla con

.s7ecatalogsearchviewer .s7linkdialog .s7dialogheader

Propiedades CSS del encabezado del cuadro de diálogo

relleno

Relleno interior para el contenido del encabezado.

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialogheader .s7dialogline

Propiedades CSS de la línea de diálogo

relleno

Relleno interior para el icono y el título del encabezado.

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialogheadericon

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

width

Ancho del icono.

height

Altura del icono.

background-image

Imagen de icono.

background-position

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte también Sprites CSS .

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialogheadertext

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

font-peso

Peso de fuentes.

font-size

Altura de fuente.

font-family

Familia de fuentes.

relleno

Relleno de texto interno.

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

.s7ecatalogsearchviewer .s7linkdialog .s7closebutton

Propiedades CSS del botón de cierre

parte superior

Posición vertical del botón con respecto al contenedor del encabezado.

derecha

Posición horizontal del botón con respecto al contenedor del encabezado.

width

Ancho del botón.

height

Altura del botón.

relleno

Relleno interior del botón.

background-image

Imagen de botón para cada estado.

background-position

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte también Sprites CSS .

NOTA

Este botón admite el selector de atributos state, que puede utilizarse para aplicar diferentes apariencias a distintos estados de botones.

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

Ejemplo: para configurar un encabezado de cuadro de diálogo con relleno, un icono de 22 x 12 píxeles, un título de 16 puntos en negrita y un botón Cerrar de 28 x 28 píxeles que se sitúe a dos píxeles de la parte superior y a dos píxeles de la derecha del contenedor del cuadro de diálogo:

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

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialogfooter

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

borde

Borde que 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 interior que mantiene el botón. Se controla con el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7linkdialog .s7dialogbuttoncontainer

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

relleno

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

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton

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

Propiedades CSS del botón Seleccionar todo

width

Ancho del botón.

height

Altura del botón.

color

Color del texto del botón para cada estado.

background-color

Color de fondo del botón para cada estado.

NOTA

El botón Seleccionar todo admite el selector de atributos state, que se puede utilizar para aplicar diferentes apariencias a distintos estados de botones.

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton

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

width

Ancho del botón.

height

Altura del botón.

color

Color del texto del botón para cada estado.

background-color

Color de fondo del botón para cada estado.

NOTA

Este botón admite el selector de atributos state, que puede utilizarse para aplicar diferentes apariencias a distintos estados de botones.

Además, ambos botones comparten la misma clase CSS común que puede contener la configuración CSS que es la misma para otros botones de cuadro de diálogo:

.s7ecatalogsearchviewer .s7linkdialog .s7dialogfooter .s7button

Propiedades CSS del botón

font-peso

Peso de fuente del botón.

font-size

Tamaño de fuente del botón.

font-family

Familia de fuentes de botón.

line-height

Altura del texto dentro del botón. Afecta a la alineación vertical.

box-Shadow

Sombra paralela.

margin-right

Margen del botón derecho.

La información del objeto de botón se puede localizar. Consulte Localización de los 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:

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

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialogviewarea

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

height

Altura del área del cuadro de diálogo principal. Solo debe especificarse cuando el cuadro de diálogo funciona en modo de escritorio. No es aplicable cuando el cuadro de diálogo está ajustado para ocupar toda la ventana del explorador.

background-color

Color de fondo del área del cuadro de diálogo principal.

margin

Margen exterior.

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

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

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialogbody

Propiedades CSS del cuerpo del cuadro de diálogo

relleno

Relleno interior.

Ejemplo: para configurar el contenido del formulario con un margen de diez píxeles:

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

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialoglabel

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

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

font-peso

Peso de fuentes de etiquetas.

font-size

Tamaño de fuente de la etiqueta.

font-family

Familia de fuentes de etiquetas.

color

Color del texto de la etiqueta.

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

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

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

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialoginputwide

Propiedades CSS del campo ancho de entrada del cuadro de diálogo

width

Ancho del texto.

relleno

Relleno interior.

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

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialoginputcontainer

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

borde

Borde alrededor del contenedor del vínculo compartido.

relleno

Relleno interior.

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

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

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialoglink

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

width

Compartir ancho del vínculo.

Ejemplo: para establecer el vínculo compartido en 450 píxeles de ancho:

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

En esta página