La herramienta de uso compartido en redes sociales aparece en la esquina superior izquierda de forma predeterminada. Consiste en un botón y un panel que se expanden cuando el usuario hace clic o pulsa un botón y contiene herramientas de uso compartido individuales.
La posición y el tamaño de la herramienta de uso compartido en redes sociales en la interfaz de usuario del visor se controlan con lo siguiente:
.s7ecatalogsearchviewer .s7socialshare
Propiedades CSS de la herramienta de uso compartido en redes sociales
margin-top |
Desplazamiento desde la parte superior de la barra de control. |
margin=left |
La distancia al botón siguiente de la izquierda o del lado izquierdo de la barra de control si este botón es el primero de una fila. |
width |
Ancho de la herramienta de uso compartido en redes sociales. |
height |
Altura de la herramienta de uso compartido en redes sociales. |
Ejemplo: configure una herramienta de uso compartido en redes sociales que se sitúe a cuatro píxeles de la parte superior y a cinco píxeles de la derecha del contenedor de visor y cuyo tamaño sea de 28 x 28 píxeles.
.s7ecatalogsearchviewer .s7socialshare {
margin-top: 4px;
margin-left: 10px; width:28px;
height:28px;
}
El aspecto del botón de la herramienta de uso compartido en redes sociales se controla con el siguiente selector de clases CSS:
.s7ecatalogsearchviewer .s7socialshare .s7socialbutton
Propiedades CSS del botón social
imagen de fondo |
Imagen que se muestra para un estado de botón determinado. |
posición de fondo |
Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte también Sprites CSS . |
Este botón admite la variable state
selector de atributos, que se puede utilizar para aplicar diferentes aspectos a distintos estados de botones.
La información del botón se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.
Ejemplo: configure un botón de herramienta de uso compartido en redes sociales que muestre una imagen diferente para cada uno de los cuatro estados de botón diferentes.
.s7ecatalogsearchviewer .s7socialshare .s7socialbutton[state='up'] {
background-image:url(images/v2/SocialShare_video_dark_up.png);
}
.s7ecatalogsearchviewer .s7socialshare .s7socialbutton[state='over'] {
background-image:url(images/v2/SocialShare_dark_over.png);
}
.s7ecatalogsearchviewer .s7socialshare .s7socialbutton[state='down'] {
background-image:url(images/v2/SocialShare_dark_down.png);
}
.s7ecatalogsearchviewer .s7socialshare .s7socialbutton[state='disabled'] {
background-image:url(images/v2/SocialShare_dark_disabled.png);
}
El aspecto del panel que contiene los iconos individuales de uso compartido en redes sociales se controla con el siguiente selector de clase CSS:
.s7ecatalogsearchviewer .s7socialshare .s7socialsharepanel
Propiedades CSS del panel de uso compartido en redes sociales
background-color |
Color de fondo del panel. |
Ejemplo: configure un panel para que tenga un color transparente:
.s7ecatalogsearchviewer .s7socialshare .s7socialsharepanel {
background-color: transparent;
}