Ojo que esta forma que propongo no contradice con lo que son los Themes en ASP.NET, al contrario, si se le usa convenientemente, lograrán un mejor aprovechamiento de los Themes.
Al final de este post estoy adjuntando tres imágenes para que tengan una idea de cómo va cambiando el skin.
Ahora sí, les explico cómo funciona el cambio de skin. La idea central consiste en dividir los estilos css del aplicativo web en dos archivos css:
- Una hoja de estilos base… llamada base.css, esta hoja de estilos tendría todos los estilos que no necesitan cambiar y son los estilos generales.
- Otra hoja de estilos, la cual realmente será una página .aspx, yo la llamo DinamitaCSS.css… esta segunda hoja de estilos será la encargada de generar los estilos que diferencian a los skins( colores, imágenes, etc)… a veces esta hoja de estilos generará estilos css con el mismo nombre de los ya existentes en el archivo base.css, pero no sobreescribirá esos estilos, sino que más bien: los completará. Osea, si tienes estilos que para el primer skin debe mostrar un color celeste y letras en negrilla, y luego tienes otro estilo para un segundo skin que debe mostrar un color amarillo y letras en negrilla… entonces crearás en base.css dicho estilo… pero no incluirás el color… sí la negrilla. El cambio de color debes programarlo en la segunda hoja de estilos llamada DinamitaCSS.css, espero haberme hecho entender.
- Para cambiar entre skins, he puesto un dropdownList en la cabecera de la página… al cambiar de opción en el dropdownlist, cambia el skin.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load Dim url As String = Utils.GetApplicationPath() Dim css As New StringBuilder css.Append("a {color: @header_color; }") css.Append("fieldset {border: 1px solid @tableheader_color;}") css.Append("th{ background-color: @tableheader_color; border: solid 1px @tableheader_color;}") css.Append(".head{ background-color: @header_color; }") css.Append(".headLine{ background-color: @tableheader_color; }") css.Append("hr{ border: solid 2px @header_color;}") css.Append(".tableForm{ background-color: @background_color;}") css.Append(".tdTitle{ background-color: @header_color; border: solid 1px @header_color;}") css.Append(".button") css.Append("{") css.AppendFormat("background: url({0}images/overlay.png) repeat-x center @tableheader_color;", url) css.Append("border: 1px solid @background_color;") css.Append("}") css.Append(".button:hover { background-color: @background_color; border: solid 1px @header_color; }") css.Replace("@background_color", cCurrentSession.BackgroundColor) css.Replace("@header_color", cCurrentSession.HeaderColor) css.Replace("@tableheader_color", cCurrentSession.TableHeaderColor) Response.Clear() Response.ContentType = "text/css" Response.Write(css.ToString) Response.End() End Sub
Analicen el código, verán que es muy simple, para ello estoy adjuntando también el proyecto completo para que lo descargues y lo examines con calma.
Imágenes:
Espero que les sea de utilidad
No hay comentarios.:
Publicar un comentario