domingo, 15 de abril de 2012

Aplicar temas en nuestro sitio web

Se puede colocar el elemento <link> en la seccion <head> de la página maestra:

<head runat=”server”>
<title></title>
<asp:ContentPlaceHolder ID=”head” runat=”server”>
</asp:ContentPlaceHolder>
<link href=”../Styles/Styles.css” rel=”stylesheet” type=”text/css” />
</head>


Otra forma es agregar la carpeta App_Themes en la carpeta principal de nuestro sitio web, por defecto ir se crea una subcarpeta llama Theme1, cambiar su nombre por el tema que vamos a aplicar (en este ejemplo Monochrome). En esta subcarpeta agregar el .css que queremos aplicar a nuestro sitio. Luego ir al web.config de nuestro sitio web y directamente dentro del elemento <inside> agregar un elmento <pages>:

<system.web>
<pages theme=”Monochrome”></pages>
...


Extendiendo un tema 

Además de archivos CSS y skins, un tema tambien puede contener imágenes. El uso mas común de imágenes en temas es enlazarlas desde tu CSS. Para hacer bien esto es importante entender como una CSS se enlaza con las imágenes.

Por su diseño, una imagen que esta enlazada a un selector CSS se buscará de forma relativa a la ubicación del archivo CSS, a menos que usted le da una ruta que comienza con una barra diagonal (/) para indicar la raíz del sitio. 
Para referirse al  archivo MenuBackground.jpg del folder Imagenes del tema Monochrome, tu puedes agregar la siguiente CSS a Monochrome.css

#MenuWrapper
{
background-image: url(Images/MenuBackground.jpg);
}


Si se quiere enlazar una imagen a la carpeta Images de la raíz del sitio se usaría esta CSS:


background-image: url(/Images/MenuBackground.jpg);

No hay comentarios:

Publicar un comentario