You are on page 1of 4

Temas y mscaras de ASP.

NET
Los temas de ASP.NET son una coleccin de propiedades que definen el aspecto de
las pginas y los controles de un sitio Web. Un tema puede contener archivos de
mscara, que definen los valores de las propiedades de los controles de servidor
Web de ASP.NET; tambin pueden contener archivos de hojas de estilos en cascada
(archivos .css) y grficos. Si se aplica un tema, se puede dar a todas las pginas del
sitio Web un aspecto coherente.

Para aplicar un tema a un sitio Web


1. En el archivo Web.config de la aplicacin, establezca el
elemento <pages> en el nombre del tema, ya sea ste global o de pgina,
como se muestra en el siguiente ejemplo:
other
<configuration>
<system.web>
<pages theme="ThemeName" />
</system.web>
</configuration>
1. Para establecer un tema como tema de la hoja de estilos de forma que se
subordine a la configuracin local del control, establezca en su lugar el
atributo styleSheetTheme:
other
<configuration>
<system.web>
<pages styleSheetTheme="Themename" />
</system.web>
</configuration>
Los temas que se establecen en el archivo Web.config se aplican a todas las
pginas Web ASP.NET de esa aplicacin. La configuracin del tema en el archivo
Web.config sigue las convenciones normales de jerarqua. Por ejemplo, para aplicar
un tema nicamente a un subconjunto de pginas, puede colocar estas pginas en
una carpeta con su propio archivo Web.config o bien crear un
elemento <location> en el archivo Web.config raz para especificar una carpeta.
Para obtener informacin detallada, vea Configurar archivos y subdirectorios
especficos.

Para aplicar un tema a una pgina individual

Establezca el atributo Theme o StyleSheetTheme de la directiva @ Page en


el nombre del tema que se va a utilizar, como se muestra en el siguiente
ejemplo:
other
<%@ Page Theme="ThemeName" %>
<%@ Page StyleSheetTheme="ThemeName" %>

Tras ello, el tema, con sus estilos y mscaras correspondientes, slo se


aplicar a la pgina que lo declara.

Las mscaras definidas en el tema se aplicarn en todas las instancias de controles


de la aplicacin o en las pginas a las que se aplique el tema. En algunos casos, es
posible que desee aplicar un conjunto concreto de propiedades a un control
individual. Puede hacerse creando una mscara con nombre (entrada en un
archivo .skin que tiene establecida la propiedad SkinID) y aplicndola a
continuacin mediante el identificador a controles individuales.

Para aplicar una mscara con nombre a un control

Establezca la propiedad SkinID del control, como se muestra en el ejemplo


siguiente:
other
<asp:Calendar runat="server" ID="DatePicker" SkinID="SmallCalendar" />
Si el tema de la pgina no incluyera ninguna mscara de controles
coincidente con la propiedad SkinID, el control utilizar la mscara
predeterminada para ese tipo de control.

Lo primero que haremos ser abrir el visual Studio o en caso de no contar


con el podemos utilizar el visual Web Developer
Le damos clic en el men archivo y le decimos que queremos un sitio Web y
a continuacin nos aparecer un cuadro de dialogo Nuevo sitio Web
Y en las plantillas que se encuentran ah le damos clic en sitio Web de
ASP.NET y le especificamos la ubicacin y escribimos el nombre de la
carpeta donde queremos conservar las paginas de nuestro sitio Web y en
esta ocasin vamos a trabajar con el lenguaje C# y le damos clic en aceptar.
Con estos pasos que acabamos de realizar se crea la carpeta y una pagina
denominada Default.aspx que podemos eliminarla, crear una nueva o
cambiarle el nombre;
Ya que realizamos los pasos anteriores vamos a configurar un label y un
button papa comenzar con los temas
En la pagina default.aspx o con el nombre que hallan deseado nombrar
vamos a cambiar a la lista de diseo y del cuadro de herramientas vamos a
arrastrar un control Button y un label hacia la pagina por ahora podemos
ver nuestra pagina antes de aplicarle un tema la guardamos y le damos f5
para verla hasta ahora sin temas.

Ahora vamos a agregarle tema a nuestra pagina , posicionamos el cursor en


el nombre del sitio Web hacemos clic en agregar carpeta ASP.NET y a
continuacin seleccionamos tema.
Dentro de nuestro explorador de soluciones podemos ver la carpeta que se
creo denominada App_Themes y una subcarpeta de nominada Theme1
Podemos cambiar el nombre de Theme1 por cualquiera que ustedes
deseen la cuestin es recordarlo cuando se aplique el tema personalizado,
ejemplo plantillatemas
Ahora damos clic con el botn secundario en la carpeta plantillatemas y
seleccionamos agregar un nuevo elemento en este caso vamos a agregar
un skin File que es un elemento con la terminacin .skin, lo podemos
nombrar plantilla.skin.
En el archivo plantilla .skin es donde vamos a agregar definiciones de
mascaras por ejemplo
<asp:Label runat=server ForeColor=red Font-Size=12pt FontNames=Verdana />
<asp:button runat=server Borderstyle=Solid Borderwidth=2px
Bordercolor=Blue Backcolor=Orange/>
Guardamos el archivo de mascaras y lo cerramos.
Nos vamos a nuestra pagina y en la vista de codigo agregamos el atributo
siguiente a al directiva @page:
<%@ Page Theme=plantillatemas %>
Tambien podemos establecer temas para nuestro sitio web en el archivo
web.config que se agrego automticamente al sitio web
Dentro de nuestro web.config agregamos el elemento <pages> si todava
no existe, este elemento lo debemos agregar dentro del elemento
<system.web>
Y dentro del <pages> agregamos el siguiente elemento como lo muestro
en mi ejemplo

<pages theme=plantillatema />


Guardamos y cerramos el archivo web.config y nos vamos ala vista de
diseo de nuestra pagina Default.aspx y quitamos el atributo que teniamos
Theme=plantillatemas de la declaracion de la pagina y listo
Le damos f5 y la pagina se muestra con el tema que especificamos en el
archivo web.config

Esto nos sirve para asignarle temas a todas las paginas que vallamos
creando ya que la llamada al temas esta en el web.config.
Espero y este tipo de ejemplos basicos les ayude

You might also like