Veamos un ejemplo de cómo el usuario final puede cambiar la hoja de estilo en tiempo de ejecución.
La idea es que la persona que está navegando en nuestro sitio pueda cambiar la presentación, al menos algunos aspectos de ella: colores o tamaño de letras (se puede hacer más pero este ejemplo solo muestra esa parte).
Esta es la página que tiene tres áreas o contenedores donde pondremos lo que deseamos motrar.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CSSStyleChangeDemo._Default" %>
<!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>CSS Style Sheet Change Demo</title>
<link id="cssLink" runat="server" href="Stylesheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div style="float:right">
Estilos Disponibles
<asp:DropDownList ID="ddlStyles" runat="server" AutoPostBack="True"
onselectedindexchanged="ddlStyles_SelectedIndexChanged">
<asp:ListItem Value="Stylesheet1.css">Verde y Azul</asp:ListItem>
<asp:ListItem Value="Stylesheet2.css">Suave</asp:ListItem>
</asp:DropDownList>
</div>
<div>
<div class="arriba">
Esto esta en el contenedor cuya clase es arriba
</div>
<div class="izquierda">
Esto esta en el contenedor cuya clase es izquierda
</div>
<div class="derecha">
Esto esta en el contenedor cuya clase es derecha
</div>
</div>
</form>
</body>
</html>
Observen que hay un drop down list, en el que se cuenta con dos entradas para poder selecciónar las hojas de estilo.
Es importante destacar que al link para referenciar la hoja de estilo le pusimos un id y le decimos que se ejecuta en el lado del servidor. Esto se conoce como convertir un control HTML en un control HTML de lado del servidor, nos permite manipular las propiedades del control cuando se procesa la página.
Bién ahora veamos el código asociado a la página:
using System;
namespace CSSStyleChangeDemo
{
public partial class _Default : System.Web.UI.Page
{
/// <summary>
/// Se dispara antes de renderizar la página
/// </summary>
/// <param name="sender">Objeto que ejecuta el evento</param>
/// <param name="e">Argumentos del evento</param>
protected void Page_Prerender(object sender, EventArgs e)
{
if (Session["CSSStyle"] == null)
{
Session["CSSStyle"] = cssLink.Href;
}
else
{
cssLink.Href = (string) Session["CSSStyle"];
}
}
/// <summary>
/// Se dispara cuando se carga la página
/// </summary>
/// <param name="sender">Objeto que ejecuta el evento</param>
/// <param name="e">Argumentos del evento</param>
protected void Page_Load(object sender, EventArgs e)
{
}
/// <summary>
/// Se dispara cuando se cambia la selección en el drop down list
/// </summary>
/// <param name="sender">Objeto que ejecuta el evento</param>
/// <param name="e">Argumentos del evento</param>
protected void ddlStyles_SelectedIndexChanged(object sender, EventArgs e)
{
if (ddlStyles.SelectedIndex != -1)
{
string cssFile = ddlStyles.SelectedValue;
Session["CSSStyle"] = cssFile;
}
}
}
}
En este caso es necesario atrapar el evento Prerender de la página, es en ese momento en el que se debe ajustar los valores de hojas de estilo (incluso master page).
Tengan en cuenta que utilizamos una variable de "session" para guardar el nombre de la hoja de estilo que está vigente. En realidad esto tendría que estar en algún lugar por cada persona que visita el sitio, de esa forma "recordaríamos" como lo quiere ver cada visitante, eso se puede hacer con una Cookie, pero es tema de otra publicación.
Bueno, los estilos son los siguientes:
Stylesheet1.css
body
{
}
.arriba {
left: 0px;
width: 100%;
height: 80px;
font-size: 14px;
text-align: center;
background: Green;
}
.izquierda {
float: left;
left: 0;
width: 30%;
min-height: 500px;
font-size: 10px;
background: Blue;
color: White;
}
.derecha {
float: right;
width: 68%;
min-height: 500px;
font-size: 12px;
background: White;
border-left-style: double;
border-left: 2px;
}
Stylesheet2.css
body
{
}
.arriba {
left: 0px;
width: 100%;
height: 80px;
font-size: 14px;
text-align: center;
background: Gray;
}
.izquierda {
float: left;
left: 0;
width: 30%;
min-height: 500px;
font-size: 10px;
background: Silver;
color: White;
}
.derecha {
float: right;
width: 68%;
min-height: 500px;
font-size: 12px;
background: Silver;
border-left-style: solid;
border-left: 2px;
}
Bueno espero que les sirva, al menos pueden comenzar con estas pocas líneas y armar un sitio totalmente configurable por el visitante.
Nota: estoy utilizando el Source Code Formatter que hicieron Guille y Fede (ta espectacular !!!)
