Continuando con este tutorial, nos enfocaremos en intentar colocar nuestra aplicación web un poco más agradable a la vista J.
Temas (Themes): Aparecen por primera vez en ASP.net 2.0 para contrarrestar los problemas que enfrentan los desarrolladores para definir el diseño de los controles de servidor y que parezcan coherente a la aplicación general, con el mínimo posible además tener un mayor control del diseño cuando se trabaja con Paginas Maestras permitiendo tener un diseño único y que al momento de modificar la masterpages modificamos de una vez todas las páginas que hereden esa masterpages, porque si recuerdan o los que aún lo siguen haciendo, siempre nos enfrentamos a un diseño único y copiamos ese diseño de una página a otra y cuando toca modificar pues venia el dolor de cabeza porque era modificar todas las páginas L. Para ello con la Aparición de Themes en ASP.net podemos tener una carpeta dedicada a este punto que es el “App_Theme” haciéndolos más fácil de administrar e interpolar de acuerdo a sus necesidades.
Para agregar una carpeta Theme solo debemos darle botón derecho a nuestro proyecto WebàAgregar Carpeta ASP.netàTema ( como se muestra en la siguiente imagen).
Para esa primera carpeta le llamaremos Azul, esto es porque el color predominante de la página estará en azul obviamente, si gustan pueden cambiarle el nombre y agregar sus propios colores J
Dentro de la Carpeta podemos guardar las imágenes (ejemplo: imagen de fondo, imagen de botones, de cabecera, etc. etc.), Hojas de Estilos (los famosos css), Mascaras (Skin ya hablaremos de estos archivos).
Mascaras (Skin): Un archivo de máscara tiene la extensión .skin y contiene los valores de propiedades para los controles individuales como por ejemplo Botón, Label, TextBox, etc, etc. La configuración de las máscaras del control se parece al que escribimos en la propia página cuando es arrastrado, es decir que si en la página tenemos esto (le coloque algunas características extras para diferenciar mejor):
<asp:TextBox ID="TextBox1" runat="server" BorderStyle="Solid" BorderWidth="1px" ForeColor="#000066" Width="150px" BorderColor="#AED7FF"></asp:TextBox>
Mientras que si agregamos un archivo de Skin a nuestro tema copio la estructura anterior sin el ID podemos arrastar los siguientes textbox y solo aplicar lo siguiente:
<asp:TextBox ID="TextBox1" runat="server" SkinID="skinTextBox"></asp:TextBox>
Se ve la diferencia? J es mucho mas practico y no nos matamos tanto en cambiar uno a uno los textbox si no que creamos un skin (o varios dependiendo de ustedes) y le asignamos su SkinID para que tome estas caracteriscas.
Bueno ahora si vamos a repotenciar nuestra aplicación web creando una hoja de estilos para ello nos ubicamos en la Carpeta App_ThemeàAzul le damos botón derecho del mouse y le decimos agregar un Nuevo Elemento. Seleccionamos una hoja de Estilo con el nombre que deseen y le agregaremos las siguientes características:
/* Cuerpo o fondo de la Pagina */
body
{
margin: 1px;
padding: 1px;
border: 0;
color: #000;
font-family: Tahoma, Verdana;
font-size: small;
font-style: normal;
background-color: #F2F9FF;
}
/* Nuestro Div de Contenido que creamos en la MasterPages */
#dvContenido
{
margin: 1px;
padding: 4px 1px 1px 1px;
width: 100%;
min-height:300px;
height:100%;
position: relative;
}
/* Nuestro Div de cabecera que creamos en la MasterPages */
#dvCabezal
{
width: auto;
height:150px;
margin: 5px;
padding: 1px;
border: 0;
clear: both;
background-color: #C5E6FE;
border: 1px solid #0099FF;
text-align: right;
vertical-align: top;
}
/* Nuestro Div del Menu que creamos en la MasterPages */
#dvMenu
{
width: auto;
margin: 5px;
clear: both;
background-color: #C5E6FE;
overflow: hidden;
border: 1px solid #0099FF;
text-align: left;
vertical-align: middle;
}
/* Efectos que le aplicamos a las opciones de Menu esto solo
aplicaria en el Div de Menu */
#dvMenu ul
{
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
}
#dvMenu li
{
float: left;
}
#dvMenu a {
margin: auto;
color: #000;
text-decoration: none;
display: block;
padding: 5px 35px 5px 35px;
border: 1px solid #0099FF;
background-color: #C5E6FE;
}
#dvMenu a:hover {
color: #000;
text-decoration: none;
border: 1px solid #0099FF;
background-color: #6FB7FF;
}
Y para crear un Skin es el mismo procedimiento realizado para agregar una hoja de estilo pero esta ocasión seleccionaremos un archivo de mascara pueden darle un nombre por cada control que deseen colocarle mascara o tener un archivo único.
En mi caso agregue dos Skin para los siguientes controles:
TextBox:
<asp:TextBox SkinId="skinTextBox" runat="server" BorderStyle="Solid" BorderWidth="1px" ForeColor="#000066" Width="150px" BorderColor="#AED7FF"></asp:TextBox>
GridView
<asp:GridView runat="server" SkinId="SkinGridView" BackColor="White" >
<AlternatingRowStyle BackColor="Blue" />
</asp:GridView>
Ok ya con esto tenemos para adornar los controles que empezaremos agregar en el próximo capítulo de este tutorial, pero por ahora antes de finalizar debemos decirle a nuestra Aplicación que tome el Tema que creamos, por tanto debemos abrir el Web.Config y buscar un Tag llamado <Page> que debe encontrarse dentro de <system.web> y te asignaremos el atributo theme con el nombre de nuestro tema:
<pages theme="Azul">
Ya con eso toda la aplicación leera este tema, ahora si deseamos que cada pagina tenga un tema diferente podemos agregar una directiva a la pagina llamada Theme con el nombre del tema quedeseamos por lo que quedaría de la siguiente manera:
<%@ Page Title="" Theme="Azul"Language="C#" MasterPageFile="~/MasterPrincipal.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
Si con esto no es suficiente pueden decirle en el Load de la Pagina (no es el lugar más correcto pero igual funciona J, lo recommendable seria en el Init de la Pagina ) la siguiente línea de código:
C#: this.Theme = "Azul";
VB: Me.Theme="Azul"
Bueno espero que con esto le sirva para seguir avanzando en su aprendizaje J.
Tags: CSS -
ASP.net -
Csharp -
net Framework -
HTML -
Principiantes -
Tutoriales -
VB -
Web
Te ha gustado este Post?
Pues seria genial si pudieras compartirlo con otras personas y asi llegarle a mas personas que pudiera ser util esta publicación. Animate a compartir