La herramienta Imprimir consiste en un botón agregado a la barra de control y el cuadro de diálogo modal que se muestra cuando se activa la herramienta.
El aspecto del botón de impresión se controla con el siguiente selector de clase CSS:
.s7ecatalogsearchviewer .s7print
Propiedades CSS del botón Imprimir
margin-top |
Desplazamiento desde la parte superior de la barra de control. |
margin-left |
Distancia al siguiente botón de la izquierda o al lado izquierdo de la barra de control si este botón es el primero de una fila. |
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 |
Coloque dentro del icono de ilustración si se utilizan iconos CSS. Consulte también Sprites CSS . |
Este botón admite el state
selector de atributos, que se puede utilizar para aplicar distintos aspectos a distintos estados de botón.
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: configurar un botón de impresión de 28 x 28 píxeles y mostrar una imagen diferente para cada uno de los cuatro estados de botón diferentes.
.s7ecatalogsearchviewer .s7print {
margin-top: 4px;
margin-left: 10px;
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7print[state='up'] {
background-image:url(images/v2/Print_dark_up.png);
}
.s7ecatalogsearchviewer .s7print[state='over'] {
background-image:url(images/v2/Print_dark_over.png);
}
.s7ecatalogsearchviewer .s7print[state='down'] {
background-image:url(images/v2/Print_dark_down.png);
}
.s7ecatalogsearchviewer .s7print[state='disabled'] {
background-image:url(images/v2/Print_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 .s7printdialog .s7backoverlay
Propiedades CSS de la superposición posterior
opacidad |
Opacidad de superposición de fondo. |
background-color |
Color de superposición de fondo. |
Ejemplo: para configurar la superposición de fondo para que sea gris con una opacidad del 70 %:
.s7ecatalogsearchviewer .s7printdialog .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. El componente administra 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 .s7kprintdialog .s7dialog
Propiedades CSS del cuadro de diálogo
border-radius |
Radio de borde del cuadro de diálogo. |
background-color |
Color de fondo del cuadro de diálogo; |
Ejemplo - Configuración de un cuadro de diálogo para que tenga un fondo gris:
.s7ecatalogsearchviewer .s7printdialog .s7dialog {
background-color: #dddddd;
}
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 el siguiente selector de clase CSS:
.s7ecatalogsearchviewer .s7printdialog .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 lo siguiente:
.s7ecatalogsearchviewer .s7printdialog .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:
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon
Propiedades CSS del icono del encabezado del cuadro de diálogo
width |
Ancho del icono. |
height |
Altura del icono. |
background-image |
Imagen del icono. |
background-position |
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:
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext
Propiedades CSS del texto del encabezado del cuadro de diálogo
font-weight |
Grosor de fuente. |
font-size |
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:
.s7ecatalogsearchviewer .s7printdialog .s7closebutton
Propiedades CSS del de botón Cerrar
parte superior |
Posición vertical del botón en relación con el contenedor de encabezado. |
derecha |
Posición horizontal del botón relativa 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 |
Coloque dentro del icono de ilustración si se utilizan iconos CSS. Consulte también Sprites CSS . |
Este botón admite el state
selector de atributos, que se puede utilizar para aplicar distintos aspectos a distintos estados de botón.
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 el encabezado del cuadro de diálogo con relleno, icono de 22 x 22 píxeles y un título de 16 puntos en negrita. Y, por último, un botón Cerrar de 28 x 28 píxeles colocado a dos píxeles de la parte superior y a dos píxeles de la derecha del contenedor del cuadro de diálogo:
.s7ecatalogsearchviewer .s7printdialog .s7dialogheader {
padding: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline {
padding: 10px 10px 2px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon {
background-image: url("images/sdk/dlgprint_cap.png");
height: 22px;
width: 22px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext {
font-size: 16pt;
font-weight: bold;
padding-left: 16px;
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton {
top:2px;
right:2px;
padding:8px;
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='up'] {
background-image:url(images/sdk/close_up.png);
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='over'] {
background-image:url(images/sdk/close_over.png);
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='down'] {
background-image:url(images/sdk/close_down.png);
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='disabled'] {
background-image:url(images/sdk/close_disabled.png);
}
El pie de página del cuadro de diálogo consta de los botones Cancelar y Enviar a imprimir. El contenedor de pie de página se controla con el siguiente selector de clase CSS:
.s7ecatalogsearchviewer .s7printdialog .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 ambos botones. Se controla con el siguiente selector de clase CSS:
.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer
Propiedades CSS del contenedor de botones del cuadro de diálogo
relleno |
Relleno interior entre el pie de página y los botones. |
El botón Cancelar se controla con el siguiente selector de clase CSS:
.s7ecatalogsearchviewer .s7printdialog .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. |
Este botón admite el state
selector de atributos, que se puede utilizar para aplicar distintos aspectos a distintos estados de botón.
El botón Enviar a imprimir se controla con el siguiente selector de clase CSS:
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton
Propiedades CSS del botón de acción 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. |
Este botón admite el state
selector de atributos, que se puede utilizar para aplicar distintos aspectos a distintos estados de botón.
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:
.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button
Propiedades CSS del botón
font-weight |
Grosor de fuente del botón. |
font-size |
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. |
caja-sombra |
Sombra paralela. |
margin-right |
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 y un botón Enviar a imprimir de 96 x 34, con el color de texto y el color de fondo diferentes para cada estado de botón:
.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter {
border-top: 1px solid #909090;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer {
padding-bottom: 6px;
padding-top: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button {
box-shadow: 1px 1px 1px #999999;
color: #FFFFFF;
font-size: 9pt;
font-weight: bold;
line-height: 34px;
margin-right: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton {
width:64px;
height:34px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='up'] {
background-color:#666666;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='down'] {
background-color:#555555;
color:#ffffff;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='over'] {
background-color:#555555;
color:#ffffff;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton {
width:96px;
height:34px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='up'] {
background-color:#333333;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='down'] {
background-color:#222222;
color:#cccccc;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='over'] {
background-color:#222222;
color:#cccccc;
}
.s7ecatalogsearchviewer .s7printdialog .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:
.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea
Propiedades CSS de la del área de visualización del cuadro de diálogo
height |
Alto del área del cuadro de diálogo principal. |
background-color |
Color de fondo del área del cuadro de diálogo principal. |
margin |
Margen exterior. |
Ejemplo: Para configurar un área de diálogo principal para que tenga una altura calculada automáticamente, tenga un margen de diez píxeles y utilice un fondo blanco:
.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:auto;
}
Todo el contenido del formulario (como etiquetas y campos de entrada) reside dentro de un contenedor controlado con el siguiente selector de clase CSS:
.s7ecatalogsearchviewer .s7printdialog .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:
.s7ecatalogsearchviewer .s7printdialog .s7dialogbody {
padding: 10px;
}
El formulario de cuadro de diálogo se rellena línea a línea, donde cada línea lleva una parte del contenido del formulario (como una etiqueta y un campo de entrada de texto). Una sola línea de formulario se controla con el siguiente selector de clase CSS:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline
Propiedades CSS de la línea del cuadro de diálogo
relleno |
Relleno de línea interior. |
Ejemplo: Para configurar un formulario de cuadro de diálogo para que tenga un relleno de diez píxeles para cada línea:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline {
padding: 10px;
}
El tamaño del bloque de contenido del cuadro de diálogo se controla con el siguiente selector de clase CSS:
.s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide
Propiedades CSS del ancho de entrada del cuadro de diálogo
width |
Anchura de bloque. |
relleno |
Relleno de línea interior. |
Ejemplo: para establecer un bloque de contenido con un ancho de 430 píxeles y un relleno de 10 píxeles en la parte inferior:
.s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide {
padding-bottom: 10px;
width: 430px;
}
Todas las etiquetas estáticas del formulario de cuadro de diálogo se controlan con el siguiente selector de clase CSS:
.s7ecatalogsearchviewer .s7printdialog .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. |
font-size |
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 y con una fuente de nueve píxeles:
.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
Los controles de entrada se incluyen en el contenedor y se controlan con el siguiente selector de clase CSS:
.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer
Propiedades CSS del contenedor de entrada del cuadro de diálogo
padding-left |
Relleno interior. |
Ejemplo: para definir un relleno de 30 píxeles desde el borde izquierdo del cuadro de diálogo.
.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer {
padding-left: 30px;
}
Los botones de opción y su texto de rótulo se controlan con el siguiente selector de clase CSS:
.s7ecatalogsearchviewer .s7printdialog .s7dialogoption
Propiedades CSS de la opción del cuadro de diálogo
width |
Ancho total del botón de opción con un título. |
color |
Color del texto del rótulo. |
El espaciado entre el botón de opción y su pie de ilustración se controla con el siguiente selector de clase CSS:
.s7ecatalogsearchviewer .s7printdialog .s7dialogoptioninput
Propiedades CSS de la entrada de la opción del cuadro de diálogo
margin-right |
Espacio entre el botón de opción y su título. |
Los selectores numéricos para la selección del intervalo de impresión se controlan con el siguiente selector de clase CSS
.s7ecatalogsearchviewer .s7printdialog .s7dialogrange
Propiedades CSS del intervalo de impresión del cuadro de diálogo
width |
Ancho del selector numérico. |
margin |
Espaciado alrededor del selector numérico. |
Ejemplo: para configurar todos los botones de opción para que tengan un ancho de 150 píxeles con texto en negro, espaciado de diez píxeles y selectores numéricos de 42 píxeles de ancho:
.s7ecatalogsearchviewer .s7printdialog .s7dialogoption {
color: #000000;
width: 150px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogoption input {
margin-right: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogrange {
margin-left: 10px;
margin-right: 10px;
width: 42px;
}
El divisor horizontal entre la selección del intervalo de páginas y las secciones del diseño de impresión se controla con el siguiente selector de clases CSS:
.s7ecatalogsearchviewer
.s7printdialog .s7horizontaldivider
Propiedades CSS del divisor horizontal
borde |
Borde alrededor del divisor. |
relleno |
Relleno interior. |
width |
Anchura de divisor. |
margin |
Margen exterior |
Ejemplo: para configurar un divisor gris de 430 píxeles de ancho con un relleno vertical de 10 píxeles en ambos lados y un margen de diez píxeles en la parte superior:
.s7ecatalogsearchviewer .s7printdialog .s7horizontaldivider {
border-top: 1px solid #aaaaaa;
margin-top: 10px;
padding-bottom: 10px;
padding-top: 10px;
width: 430px;
}