Imprimir

A ferramenta Imprimir consiste em um botão adicionado à barra de controle e a caixa de diálogo modal que é 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 de 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 botão seguinte à esquerda ou ao lado esquerdo da barra de controle, se este for o primeiro botão em uma linha.
width	Largura do botão.
altura	Altura do botão.
background-image	A imagem que é exibida para um determinado estado de botão.
posição de fundo	Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte também CSS Sprites .

A dica de ferramenta do botão pode ser localizada. Consulte Localização de 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 em segundo plano que abrange a página da Web quando a caixa de diálogo está ativa é controlada pelo seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7backoverlay

Propriedades de CSS da sobreposição traseira

opacidade	Opacidade da sobreposição em segundo plano.
cor de fundo	Cor da sobreposição do plano de fundo.

Exemplo - para configurar a sobreposição de plano de fundo para ficar 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 nos sistemas de desktop. O posicionamento e o dimensionamento da caixa de diálogo são gerenciados pelo componente A caixa de diálogo é controlada pelo seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7kprintdialog .s7dialog

Propriedades de CSS da caixa de diálogo

raio da borda	Raio da borda da caixa de diálogo.
cor de fundo	Cor de fundo da caixa de diálogo;

Exemplo - para configurar uma caixa de diálogo para ter um 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 container header é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader

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

revestimento

Preenchimento interno para o conteúdo do cabeçalho.

O ícone e o texto do título são vinculados a um container adicional controlado com o seguinte:

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline

Propriedades de CSS da linha de diálogo

revestimento

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon

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

largura	Largura do ícone.
altura	Altura do ícone.
background-image	Imagem do ícone.
posição de fundo	Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte também CSS Sprites .

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext

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

font-peso	Peso de fonte.
font-size	Altura da fonte.
família de fontes	Família de fontes.
revestimento	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 container do cabeçalho.
right	Posição do botão horizontal em relação ao container do cabeçalho.
largura	Largura do botão.
altura	Altura do botão.
revestimento	Preenchimento interno do botão.
background-image	Imagem do botão para cada estado.
posição de fundo	Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte também CSS Sprites .

A dica de ferramenta do botão Fechar e o título da caixa de diálogo podem ser localizados. Consulte Localização de 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, título de 16 pontos em negrito e um botão Fechar de 28 x 28 pixels posicionado dois pixels da parte superior e dois pixels da direita do container 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 container de rodapé é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter

Propriedades CSS do rodapé da caixa de diálogo

fronteira

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer

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

revestimento

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 de 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.
cor de fundo	Cor de fundo do botão para cada estado.

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton

Propriedades de 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.
cor de fundo	Cor de fundo do botão para cada estado.

Além disso, ambos os botões compartilham a mesma 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 de CSS do botão

font-peso	Peso de fonte do botão.
font-size	Tamanho da fonte do botão.
família de fontes	Família de fontes do botão.
altura da linha	Altura do texto dentro do botão. Afeta o alinhamento vertical.
sombra de caixa	Sombra.
margem direita	Margem do botão direito.

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

Exemplo - para configurar um rodapé de 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 de diálogo principal (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 em CSS. A área de diálogo principal é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea

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

altura	A altura da área da caixa de diálogo principal.
cor de fundo	A cor de plano 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, ter uma margem de dez pixels e usar um plano de 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 em um container controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogbody

Propriedades CSS do corpo da caixa de diálogo

revestimento

Preenchimento interno.

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

Propriedades de CSS da linha da caixa de diálogo

revestimento

Preenchimento interno de linha.

Exemplo - para configurar um formulário de caixa de diálogo para ter dez pixels de preenchimento 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 de CSS da largura de entrada da caixa de diálogo

largura	Largura do bloco.
revestimento	Preenchimento interno de linha.

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 da etiqueta, pois é possível aplicá-la a textos em vários lugares na interface do usuário do formulário.

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

font-peso	Peso de fonte do rótulo.
font-size	Tamanho da fonte do rótulo.
família de fontes	Família de fontes de etiquetas.
cor	Cor do texto do rótulo.

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

Exemplo - para configurar todos os rótulos como 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 vinculados ao container e controlados com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer

Propriedades de 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 de CSS da opção da 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 de CSS da entrada da 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 seleção de intervalo de impressão são controlados com o seguinte seletor de classe CSS

.s7ecatalogsearchviewer .s7printdialog .s7dialogrange

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

largura	Largura do seletor numérico.
margem	Espaçamento em torno do seletor numérico.

Exemplo - para configurar todos os botões de opção para terem 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 do 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 de CSS do divisor horizontal

fronteira	Borda em torno do divisor.
revestimento	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; 
}