Para empezar si no estamos al tanto para que sirve un
tema en asp.net, se puede decir que los temas son una colección de estilos y propiedades
que definen la apariencia de las páginas y controles de tu sitio web. Pueden incluir
archivos de máscaras (skins) los cuales definen los valores de las propiedades
para los controles ASP.NET. También pueden incluir archivos de hojas de estilos
(CSS) que van a definir colores, gráficos, tamaños y posicionamiento de los controles
y por sobre todo la apariencia del sitio. Son útiles además, debido a que es
posible teniendo un tema ya aplicado, poder cambiar el aspecto de todo el sitio
de forma muy sencilla.
¿Cómo
crear un tema?
Para poder crear un
tema es necesario agregar la carpeta app_themes a nuestro sitio web. Para esto
haremos click derecho sobre el nombre de nuestro sitio y seleccionamos “agregar”,
“agregar carpeta ASP.NET” y luego “Tema” como se muestra en la imagen de abajo. |
| Agregar carpate de temas |
Una vez realizado esto aparecerá la carpeta App_Themes sobre nuestro proyecto y nos pedirá que le asignemos un nombre a nuestro tema. En este caso yo le puse de nombre general. Es posible crear varios temas para cambiar por dar un ejemplo el color del sitio para una estación del año en particular. Entonces teniendo 2 temas, con diferentes colores simplemente para realizar esto hay que indicarle al sitio que utilice el otro tema.
¿Cómo
agregar las máscaras (skins) y las hojas de estilos (CSS) al tema?
Hacemos click derecho
sobre el nombre del tema (General) y seleccionamos la opción “agregar”, “nuevo
elemento” y sobre la lista de elementos seleccionamos archivo de máscara. Le
podemos dar de nombre General.skin para continuar con la misma línea de nombres
originales. Va a aparecer una pantalla como la siguiente: |
| Agregar máscaras |
En esa pantalla se muestra un ejemplo de cómo crear una máscara para un control por medio del SkinId y sin el SkinId o como también se llama, máscaras por defecto y máscaras con nombre.
Luego vamos a crear un estilo y para esto al igual que
para agregar la máscara, hacemos click derecho sobre el tema (General) y
seleccionamos la opción “agregar”, “nuevo elemento” y esta vez de la lista de
elementos seleccionamos hoja de estilos y le ponemos el nombre que queramos.
Vamos a crear en el
sitio un skin para los controles TextBox y Label. Para esto escribiremos lo
siguiente dentro de la máscara:<asp:Label runat="server" skinid="lblGeneral" cssclass="Label" />
<asp:TextBox runat="server" skinid="txtGeneral" cssclass="TextBox"/>
Luego en la hoja de estilos vamos a crear los estilos para
las CssClass que definimos para los controles Label y TextBox:
.Label { font-size: 11px; font-family: Tahoma; color: Red; } .TextBox { font-size: 11px; font-family: Tahoma; color: Red; background-color:Black; border: 1px solid white; }
Para finalizar y poder hacer que nuestra página reconozca las máscaras del tema, deberemos agregar Theme="General" en la directiva de la página . De esa forma todos los SkinId que agreguemos a los controles de tipo Label y TextBox con el nombre lblGeneral y txtGeneral respectivamente tomarán el estilo agregado en el tema.
Voy a pegar el html de la página que cree con estos 2 controles para que se vea un poco mejor:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" Theme="General" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body style="background-color:Black"> <form id="form1" runat="server"> <h2 style="color:White"> Ejemplo de uso de temas en el sitio</h2> <hr /> <div> <asp:Label ID="Label1" runat="server" Text="Ejemplo de skin a Label" SkinID="lblGeneral"></asp:Label> <asp:TextBox ID="TextBox1" runat="server" Text="Ejemplo de skin a Textbox" SkinID="txtGeneral"></asp:TextBox> </div> </form> </body> </html>
Ahora voy a poner una imagen de cómo se ve la página creada
con ese código:
¿Cómo indicarle al sitio que el tema creado será utilizado en todo el proyecto?
En el ejemplo anterior el tema solo funcionaba si agregábamos en la directiva de la página Theme="General". Ahora veremos como hacer para que el tema pueda aplicarse en todo el sitio. Para esto hay que abrir el archivo web.config e indicar dentro del tag
lo siguiente:
<pages theme="General"> </pages>
Si el tag
Fin de la entrada.
Dejo el código para que descarguen el ejemplo.
Saludos.
tengo un control "<asp:ButtonField ...." con la propiedad SkinID="botonazulfield" y me sale el mensaje:
ResponderEliminarEl tipo 'System.Web.UI.WebControls.ButtonField' no tiene ninguna propiedad pública cuyo nombre sea 'SkinID'.
No entiendo por que no aplica el estilo, ya que hecho todo lo que se requiere (que es lo mismo que mencionas aquí), si me puedieras hechar una mano, gracias.
Hola Gabo. Perdón la demora en responder. Pudiste resolver el inconveniente? Creaste el archivo nombre.skin? Sino puede que no hayas agregado el nombre del tema (theme) a utilizar dentro del web.config o en la página que te está saliendo el error. Si lo agregás en el web.config no hace falta que también lo cargues en la página, salvo que quieras indicar que esa página utiliza otro tema.
ResponderEliminarAvisame como te fue por favor.
Saludos!