Artigo Nº 19: Customizando ValidatorCalloutExtender  do Ajax Control Toolkit
Autor: Tiago José Pasieka | Publicado: 2009-02-09T13:19:00-02:00

No artigo Nº 16, foi mostrado como aplicar o componente ValidatorCalloutExtender . Agora vamos mostrar como estilizar esse componente com estilos css. Crie uma nova pasta chamada "estilos", dentro da pasta do projeto da aplicação. Depois abra o bloco de notas ou notepad++ e salve esse arquivo dentro desta pasta com o nome de "estilos.css", daí copie o código abaixo e cole no arquivo. OBS: caso você já tem essa pasta e arquivo, que é usado no Artigo Nº 08, somente adicione o código abaixo.
.validar div, .validar td  /*Formatação do visual da popup(EX: borda e cor de fundo)*/
{border:solid 1px red; background-color:white;}
.validar .ajax__validatorcallout_callout_cell /*Manter padrão*/
{width:80px; height:100%; text-align:right; vertical-align:top; border:none; background-color:transparent; padding:0px;}
.validar .ajax__validatorcallout_callout_table /* Manter padrão */
{height:100%; border:none;background-color:transparent;padding:0px;}
.validar .ajax__validatorcallout_callout_arrow_cell/* Manter padrão */
{padding:8px 0px 0px 0px; text-align:right; vertical-align:top; font-size:1px; border:none; background-color:transparent;}
.validar .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv /* Manter padrão */
{font-size:1px; position:relative; left:1px; border-bottom:none; border-right:none; border-left:none; width:15px; background-color:transparent; padding:0px;}
.validar .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv div  /* Manter padrão */
{height:1px; overflow:hidden; border-top:none; border-bottom:none; border-right:none; padding:0px; margin-left:auto;}
.validar .ajax__validatorcallout_error_message_cell /*Formatação do texto dentro da popup */
{font-family:Verdana; font-size:10px; border-right:none; border-left:none; width:100%; color:red; font-weight:bold; text-align:left;}
.validar .ajax__validatorcallout_icon_cell /* Manter padrão */
{width:20px; padding:5px; border-right:none;}
.validar .ajax__validatorcallout_close_button_cell/* Manter padrão */
{vertical-align:top; padding:0px; text-align:right; border-left:none;}
.validar .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv /* Manter padrão */
{border:none; text-align:center; width:16px; height:16px; padding:2px; cursor:pointer;}

Depois de salvar esse estilo, vá para o .aspx da sua página e dentro da tag HEAD, coloque o código sequinte logo abaixo da tag TITLE. Esse é o código responsável por buscar os estilos e aplicar na sua página, caso já tenha, ignore-o.
< link rel="stylesheet" href="./estilos/estilos.css" type="text/css"/>Feito isso, volte para a página, verifique se a propriedade TargetControlID do componente ValidatorCallout está relacionada com o componente de validação. Se está, selecione esse componente, RegularExpressionValidator, e na janela Object Inspector procure as propriedades Extenders, figura 01. Mas para essas propriedades aparecerem, os dois componentes devem estar interligados.
Agora altere as seguintes propriedades:

CloseImageURL: coloque o caminho de onde o componente buscará a imagem para fechar a popup(se não colocar nada, ficará a imagem padrão);
CssClass: digitar o nome do estilo criado para sua formatação(EX: validar);
WarningIconImageURL: caminho da imagem que é exibida na frente do texto da popup.
Width: Tamanho da popup(em caso da mensagem ser muito grande)


Figura 01:


Para resolver possíveis problemas futuros com esse componente, baixe um arquivo nesse endereço  <!--  /* Font Definitions */  @font-face  {font-family:"Cambria Math";  panose-1:2 4 5 3 5 4 6 3 2 4;  mso-font-charset:1;  mso-generic-font-family:roman;  mso-font-format:other;  mso-font-pitch:variable;  mso-font-signature:0 0 0 0 0 0;} @font-face  {font-family:Calibri;  panose-1:2 15 5 2 2 2 4 3 2 4;  mso-font-charset:0;  mso-generic-font-family:swiss;  mso-font-pitch:variable;  mso-font-signature:-1610611985 1073750139 0 0 159 0;}  /* Style Definitions */  p.MsoNormal, li.MsoNormal, div.MsoNormal  {mso-style-unhide:no;  mso-style-qformat:yes;  mso-style-parent:"";  margin-top:0cm;  margin-right:0cm;  margin-bottom:10.0pt;  margin-left:0cm;  line-height:115%;  mso-pagination:widow-orphan;  font-size:11.0pt;  font-family:"Calibri","sans-serif";  mso-ascii-font-family:Calibri;  mso-ascii-theme-font:minor-latin;  mso-fareast-font-family:Calibri;  mso-fareast-theme-font:minor-latin;  mso-hansi-font-family:Calibri;  mso-hansi-theme-font:minor-latin;  mso-bidi-font-family:"Times New Roman";  mso-bidi-theme-font:minor-bidi;  mso-fareast-language:EN-US;} a:link, span.MsoHyperlink  {mso-style-priority:99;  color:blue;  text-decoration:underline;  text-underline:single;} a:visited, span.MsoHyperlinkFollowed  {mso-style-noshow:yes;  mso-style-priority:99;  color:purple;  mso-themecolor:followedhyperlink;  text-decoration:underline;  text-underline:single;} .MsoChpDefault  {mso-style-type:export-only;  mso-default-props:yes;  mso-ascii-font-family:Calibri;  mso-ascii-theme-font:minor-latin;  mso-fareast-font-family:Calibri;  mso-fareast-theme-font:minor-latin;  mso-hansi-font-family:Calibri;  mso-hansi-theme-font:minor-latin;  mso-bidi-font-family:"Times New Roman";  mso-bidi-theme-font:minor-bidi;  mso-fareast-language:EN-US;} .MsoPapDefault  {mso-style-type:export-only;  margin-bottom:10.0pt;  line-height:115%;} @page Section1  {size:612.0pt 792.0pt;  margin:70.85pt 3.0cm 70.85pt 3.0cm;  mso-header-margin:36.0pt;  mso-footer-margin:36.0pt;  mso-paper-source:0;} div.Section1  {page:Section1;} --> http://blogs.msdn.com/mattgi/archive/2007/01/23/asp-net-ajax-validators.aspx , baixe-o e descompacte-o. Nessa pasta descompactada possui uma dll chamada “Validattors.ddl”. Copie e cole dentro da pasta Bin do seu projeto. Depois no Delphi, adicione nas referências da aplicação, Add Reference, buscando da pasta Bin. Na Web.Config, adicione o código da listagem 2, dentro da tag "pages" que está dentro da tag "system.web" .
Listagem 2: TagMapping










Veja o resultado na figura 2.

Figura 02:



Abraço e até a próxima.