A ferramenta Imprimir consiste em um botão adicionado à barra de controle e à 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 CSS do botão de impressão
margem superior |
O deslocamento da parte superior da barra de controle. |
margem esquerda |
A distância até ao botão seguinte à esquerda ou à esquerda da barra de controle, se este for o primeiro botão de uma linha. |
width |
Largura do botão. |
altura |
Altura do botão. |
imagem de fundo |
A imagem exibida para um determinado estado de botão. |
posição de fundo |
Posição dentro da estrutura de arte, se os sprites CSS forem usados. Consulte também Sprites CSS . |
Esse botão suporta state
seletor de atributos, 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 em segundo plano que abrange 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 de back-end
opacidade |
Opacidade da sobreposição em segundo plano. |
cor do fundo |
Cor da sobreposição do plano de fundo. |
Exemplo - para configurar a sobreposição em segundo plano 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 em sistemas de 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. |
cor do 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 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 o conteúdo do cabeçalho. |
O ícone e o texto do título são envolvidos em um contêiner extra controlado com o seguinte:
.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline
Propriedades CSS da linha de diálogo
preenchimento |
Preenchimento interno para o ícone e o título do cabeçalho. |
O ícone 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. |
imagem de fundo |
Imagem do ícone. |
posição de fundo |
Posição dentro da estrutura de arte, se os sprites CSS forem usados. 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 |
Espessura da fonte. |
tamanho da fonte |
Altura da fonte. |
família de fontes |
Família de fontes. |
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 do botão vertical em relação ao contêiner de cabeçalho. |
right |
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. |
imagem de fundo |
Imagem do botão para cada estado. |
posição de fundo |
Posição dentro da estrutura de arte, se os sprites CSS forem usados. Consulte também Sprites CSS . |
Esse botão suporta state
seletor de atributos, 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 o preenchimento, um í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 posicionado 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 Imprimir. 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
border |
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. É controlado com o seguinte seletor de classe CSS:
.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer
Propriedades CSS do contêiner do 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. |
color |
Cor do texto do botão para cada estado. |
cor do fundo |
Cor de fundo do botão para cada estado. |
Esse botão suporta state
seletor de atributos, 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. |
color |
Cor do texto do botão para cada estado. |
cor do fundo |
Cor de fundo do botão para cada estado. |
Esse botão suporta state
seletor de atributos, 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 de caixa de diálogo:
.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button
Propriedades CSS do botão
font-weight |
Espessura da fonte do botão. |
tamanho da fonte |
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 dos 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 fundo diferentes para cada estado de 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 do fundo |
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, 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 dentro de um contêiner 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 o 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). Uma única linha de formulário é 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 para ter um preenchimento de dez pixels para cada linha:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline {
padding: 10px;
}
O tamanho do bloco do 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, pois você pode aplicá-lo aos textos em vários lugares 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. |
tamanho da fonte |
Tamanho da fonte do rótulo. |
família de fontes |
Rotular família de fontes. |
color |
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 envoltos no contêiner e controlados com o seguinte seletor de classe CSS:
.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer
Propriedades CSS do contêiner 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 da caixa de diálogo
largura |
A largura total do botão de opção com uma legenda. |
color |
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 seleção de 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 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 do layout de impressão é controlado com o seguinte seletor de classe CSS:
.s7ecatalogsearchviewer
.s7printdialog .s7horizontaldivider
Propriedades CSS do divisor horizontal
border |
Borda em torno do divisor. |
preenchimento |
Preenchimento interno. |
largura |
Largura do divisor. |
margem |
Margem externa |
Exemplo - Para configurar um divisor cinza de largura de 430 pixels 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;
}