Imprimir

La herramienta Imprimir consiste en un botón añadido 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 de impresión

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

Anchura del botón.

height

Altura del botón.

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 .

NOTA

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: para configurar un botón de impresión de 28 x 28 píxeles y muestra 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

opacidad

Opacidad de la 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 un 70 % de opacidad:

.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 gestiona el posicionamiento 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 del borde del cuadro de diálogo.

background-color

Color de fondo del cuadro de diálogo;

Ejemplo: Para configurar 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

Margen interior para el 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

CSS properties of the dialog line

relleno

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

Header icon is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon

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

width

Ancho del icono.

height

Altura del icono.

imagen de fondo

Icon image.

posición de fondo

Sitúe 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 .s7printdialog .s7dialogheadertext

CSS properties of the dialog box header text

font-weight

Grosor de fuente.

font-size

Altura de la fuente.

font-family

Familia de fuentes.

relleno

Margen de texto interno.

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

.s7ecatalogsearchviewer .s7printdialog .s7closebutton

Propiedades CSS del botón de cierre ​

parte superior

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

derecha

Posición horizontal del botón en relación con el contenedor de encabezado.

width

Button width.

height

Altura del botón.

relleno

Margen interior del botón.

imagen de fondo

Imagen de botón para cada estado.

background-position

Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte también Sprites CSS .

NOTA

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 objeto del botón Cerrar y el título del cuadro 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 el encabezado del cuadro de diálogo con relleno, icono de 22 x 22 píxeles y título en negrita de 16 puntos. Finalmente, un botón Cerrar de 28 x 28 píxeles colocó dos píxeles desde la parte superior y dos píxeles desde la parte derecha del contenedor de 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 impresión. El contenedor de pie de página se controla con el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7printdialog .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 ambos botones. Se controla con el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer

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

relleno

Margen 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

Button width.

height

Altura del botón.

color

Color del texto del botón para cada estado.

background-color

Button background color for each state.

NOTA

Este botón admite la variable state selector de atributos, que se puede utilizar para aplicar diferentes aspectos a distintos estados de botones.

El botón Enviar a impresión se controla con el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton

CSS properties of the dialog box action button

width

Button width.

height

Button height.

color

Button text color for each state.

background-color

Button background color for each state.

NOTA

This button supports the state attribute selector, which can be used to apply different skins to different button states.

Además, ambos botones comparten una clase CSS común que puede contener ajustes CSS que son los mismos para otros botones del cuadro de diálogo:

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button

Propiedades CSS del botón

font-weight

Grosor de la fuente del botón.

font-size

Tamaño de fuente del botón.

font-family

Familia de fuentes del botón.

line-height

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

box-Shadow

Sombra.

margin-right

Margen del botón derecho.

La información sobre herramientas de botones se puede localizar. See Localization of user interface elements for more information.

Example - To set up a dialog box footer with 64 x 34 Cancel button and a 96 x 34 Send to Print button, with the text color and background color different for each button state:

.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 cuadro de diálogo. En todos los casos, el componente administra la anchura de esta área, no es posible configurarla en CSS. El área de diálogo principal se controla con el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea

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

height

Altura del área principal del cuadro de diálogo.

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 cuerpo del cuadro de diálogo ​

relleno

Inner padding.

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

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

El formulario del cuadro de diálogo se rellena línea a línea, donde cada línea tiene una parte del contenido del formulario (como una etiqueta y un campo de entrada de texto). Single form line is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

CSS properties of the dialog box line

relleno

Margen de línea interior.

Example - To set up a dialog box form to have ten pixel padding for each line:

.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

Ancho del bloque.

relleno

Margen de línea interior.

Ejemplo: para definir un bloque de contenido con una anchura de 430 píxeles y con 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 del 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.

CSS properties of the dialog box label. ​

font-weight

Grosor de fuente de la etiqueta.

font-size

Tamaño de fuente de la etiqueta.

font-family

Label font family.

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.

Example - to set up all labels to be gray, bold, with a nine pixel font:

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

Input controls are wrapped into the container and controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer

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

padding-left

Margen interior.

Ejemplo: para establecer 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 el texto de su rótulo se controlan con el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogoption

Propiedades CSS de la opción de cuadro de diálogo

width

Ancho total del botón de radio con un rótulo.

color

Color del texto del rótulo.

El espaciado entre el botón de radio y su rótulo se controla con el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogoptioninput

Propiedades CSS de la entrada de opciones del cuadro de diálogo

margin-right

Espaciado entre el botón de radio y su rótulo.

Los selectores numéricos para la selección del rango de impresión se controlan con el siguiente selector de clase CSS

.s7ecatalogsearchviewer .s7printdialog .s7dialogrange

CSS properties of the dialog box print range

width

Anchura del selector numérico.

margen

Espaciado alrededor del selector numérico.

Ejemplo: para configurar todos los botones de radio para que tengan una anchura de 150 píxeles con texto negro, un espaciado de diez píxeles y un selector numérico 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 rango de páginas y las secciones de diseño de impresión se controla con el siguiente selector de clase CSS:

 .s7ecatalogsearchviewer
.s7printdialog .s7horizontaldivider

Propiedades CSS del divisor horizontal

borde

Border around divider.

relleno

Inner padding.

width

Anchura del divisor.

margen

Margen exterior

Example - to set up a 430 pixel-wide grey divider with a 10 pixel vertical padding on both sides, and a ten pixel margin at the top:

.s7ecatalogsearchviewer .s7printdialog .s7horizontaldivider {
    border-top: 1px solid #aaaaaa;
    margin-top: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 430px;
}

En esta página