Imprimir print

A ferramenta Imprimir consiste em um botão adicionado à barra de controle e à caixa de diálogo modal exibida quando a ferramenta é ativada.

A aparência do botão de impressão é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7print

Propriedades CSS do botão de impressão

margem superior
O deslocamento da parte superior da barra de controle.
margem esquerda
A distância até o próximo botão à esquerda ou o lado esquerdo da barra de controle, se for o primeiro botão consecutivo.
largura
Largura do botão.
altura
Altura do botão.
background-image
A imagem exibida para um determinado estado de botão.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte também Sprites CSS.

NOTE
Esse botão oferece suporte ao state seletor de atributo, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.

A dica de ferramenta do botão pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - Para configurar um botão de impressão com 28 x 28 pixels e exibir uma imagem diferente para cada um dos quatro estados de botão 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);
}

A sobreposição de plano de fundo que cobre a página da Web quando a caixa de diálogo está ativa é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7backoverlay

Propriedades CSS da sobreposição inversa

opacidade
Opacidade de sobreposição de plano de fundo.
background-color
Cor de sobreposição do plano de fundo.

Exemplo - para configurar a sobreposição do plano de fundo como cinza com 70% de opacidade:

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

Por padrão, a caixa de diálogo modal é exibida centralizada na tela em sistemas desktop. O posicionamento e o dimensionamento da caixa de diálogo são gerenciados pelo componente. A caixa de diálogo é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7kprintdialog .s7dialog

Propriedades CSS da caixa de diálogo

border-radius
Raio da borda da caixa de diálogo.
background-color
Cor de fundo da caixa de diálogo;

Exemplo - para configurar uma caixa de diálogo com um plano de fundo cinza:

.s7ecatalogsearchviewer .s7printdialog .s7dialog {
background-color: #dddddd;
}

O cabeçalho da caixa de diálogo consiste em um ícone, um texto de título e um botão Fechar. O contêiner de cabeçalho é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader

Propriedades CSS do cabeçalho da caixa de diálogo

preenchimento
Preenchimento interno para conteúdo de cabeçalho.

O ícone e o texto do título são colocados em um container extra controlado com o seguinte:

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline

Propriedades CSS da linha de diálogo

preenchimento
Preenchimento interno para o ícone e título do cabeçalho.

O ícone de cabeçalho é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon

Propriedades CSS do ícone de cabeçalho da caixa de diálogo

largura
Largura do ícone.
altura
Altura do ícone.
background-image
Imagem do ícone.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte também Sprites CSS.

O título do cabeçalho é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext

Propriedades CSS do texto do cabeçalho da caixa de diálogo

font-weight
Peso da fonte.
font-size
Altura da fonte.
font-family
Família da fonte.
preenchimento
Preenchimento de texto interno.

O botão Fechar é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7closebutton

Propriedades CSS do botão Fechar ​

top
Posição vertical do botão em relação ao contêiner de cabeçalho.
direita
Posição do botão horizontal em relação ao contêiner de cabeçalho.
largura
Largura do botão.
altura
Altura do botão.
preenchimento
Preenchimento interno do botão.
background-image
Imagem do botão para cada estado.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte também Sprites CSS.

NOTE
Esse botão oferece suporte ao state seletor de atributo, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.

A dica de ferramenta do botão Fechar e o título da caixa de diálogo podem ser localizados. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - Para configurar o cabeçalho da caixa de diálogo com preenchimento, ícone de 22 x 22 pixels e um título de 16 pontos em negrito. Finalmente, um botão Fechar de 28 x 28 pixels posicionou dois pixels da parte superior e dois pixels da direita do contêiner da caixa 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);
}

O rodapé da caixa de diálogo consiste nos botões Cancelar e Enviar para Impressão. O contêiner de rodapé é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter

Propriedades CSS do rodapé da caixa de diálogo ​

borda
Borda que você pode usar para separar visualmente o rodapé do restante da caixa de diálogo.

O rodapé tem um contêiner interno que mantém ambos os botões. Ele é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer

Propriedades CSS do contêiner de botão da caixa de diálogo

preenchimento
Preenchimento interno entre o rodapé e os botões.

O botão Cancelar é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton

Propriedades CSS do botão Cancelar da caixa de diálogo

largura
Largura do botão.
altura
Altura do botão.
cor
Cor do texto do botão para cada estado.
background-color
Cor do plano de fundo do botão para cada estado.
NOTE
Esse botão oferece suporte ao state seletor de atributo, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.

O botão Enviar para impressão é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton

Propriedades CSS do botão de ação da caixa de diálogo

largura
Largura do botão.
altura
Altura do botão.
cor
Cor do texto do botão para cada estado.
background-color
Cor do plano de fundo do botão para cada estado.
NOTE
Esse botão oferece suporte ao state seletor de atributo, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.

Além disso, ambos os botões compartilham uma classe CSS comum, que pode conter configurações CSS que são as mesmas para outros botões da caixa de diálogo:

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button

Propriedades CSS do botão

font-weight
Peso da fonte do botão.
font-size
Tamanho da fonte do botão.
font-family
Família de fontes do botão.
altura da linha
Altura do texto dentro do botão. Afeta o alinhamento vertical.
box-shadow
Sombra projetada.
margem direita
Margem direita do botão.

As dicas de ferramentas do botão podem ser localizadas. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - para configurar um rodapé da caixa de diálogo com o botão Cancelar 64 x 34 e um botão Enviar para Impressão 96 x 34, com a cor do texto e a cor do plano de fundo diferentes para cada estado do botão:

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

A área principal da caixa de diálogo (entre o cabeçalho e o rodapé) contém conteúdo da caixa de diálogo. Em todos os casos, o componente gerencia a largura dessa área. Não é possível defini-la no CSS. A área de diálogo principal é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea

Propriedades CSS da área de exibição da caixa de diálogo ​

altura
A altura da área da caixa de diálogo principal.
background-color
A cor de fundo da área da caixa de diálogo principal.
margem
Margem externa.

Exemplo - para configurar uma área de diálogo principal para ter uma altura calculada automaticamente, uma margem de dez pixels e usar um fundo branco:

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

Todo o conteúdo do formulário (como rótulos e campos de entrada) reside dentro de um container controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogbody

Propriedades CSS do corpo da caixa de diálogo ​

preenchimento
Preenchimento interno.

Exemplo - para configurar o conteúdo do formulário para ter um preenchimento de dez pixels:

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

O formulário da caixa de diálogo é preenchido linha por linha, onde cada linha carrega uma parte do conteúdo do formulário (como um rótulo e um campo de entrada de texto). A linha de formulário única é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

Propriedades CSS da linha da caixa de diálogo

preenchimento
Preenchimento de linha interna.

Exemplo - para configurar um formulário de caixa de diálogo com preenchimento de dez pixels para cada linha:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline {
    padding: 10px;
}

O tamanho do bloco de conteúdo da caixa de diálogo é controlado com o seguinte seletor de classe CSS:

 .s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide

Propriedades CSS da largura de entrada da caixa de diálogo

largura
Largura do bloco.
preenchimento
Preenchimento de linha interna.

Exemplo - para definir um bloco de conteúdo com 430 pixels de largura e 10 pixels de preenchimento na parte inferior:

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

Todos os rótulos estáticos no formulário da caixa de diálogo são controlados com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel

Essa classe não é adequada para controlar o tamanho ou a posição do rótulo porque você pode aplicá-la a textos em vários locais na interface do usuário do formulário.

Propriedades CSS do rótulo da caixa de diálogo. ​

font-weight
Espessura da fonte do rótulo.
font-size
Tamanho da fonte do rótulo.
font-family
Família de fontes do rótulo.
cor
Cor do texto do rótulo.

Os rótulos da caixa de diálogo podem ser localizados. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - para configurar todos os rótulos para serem cinza, negrito, com uma fonte de nove pixels:

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

Os controles de entrada são colocados no container e controlados com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer

Propriedades CSS do container de entrada da caixa de diálogo

preenchimento à esquerda
Preenchimento interno.

Exemplo - para definir um preenchimento de 30 pixels a partir da borda esquerda da caixa de diálogo.

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer {
    padding-left: 30px;
}

Os botões de opção e seu texto de legenda são controlados com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogoption

Propriedades CSS da opção de caixa de diálogo

largura
A largura total do botão de opção com uma legenda.
cor
Cor do texto da legenda.

O espaçamento entre o botão de opção e sua legenda é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogoptioninput

Propriedades CSS da entrada de opção da caixa de diálogo

margem direita
Espaçamento entre o botão de opção e sua legenda.

Os seletores numéricos para a seleção do intervalo de impressão são controlados com o seguinte seletor de classe CSS

.s7ecatalogsearchviewer .s7printdialog .s7dialogrange

Propriedades CSS do intervalo de impressão da caixa de diálogo

largura
Largura do seletor numérico.
margem
Espaçamento ao redor do seletor numérico.

Exemplo - para configurar todos os botões de opção para ter 150 pixels de largura com texto preto, espaçamento de dez pixels e seletores numéricos de 42 pixels de largura:

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

O divisor horizontal entre a seleção de intervalo de páginas e as seções de layout de impressão é controlado com o seguinte seletor de classe CSS:

 .s7ecatalogsearchviewer
.s7printdialog .s7horizontaldivider

Propriedades CSS do divisor horizontal

borda
Borda ao redor do divisor.
preenchimento
Preenchimento interno.
largura
Largura do divisor.
margem
Margem externa

Exemplo - Para configurar um divisor cinza de 430 pixels de largura com um preenchimento vertical de 10 pixels em ambos os lados e uma margem de dez pixels na parte superior:

.s7ecatalogsearchviewer .s7printdialog .s7horizontaldivider {
    border-top: 1px solid #aaaaaa;
    margin-top: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 430px;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8