1。全局主题:在Web.config中<system.web>中添加<pages StyleSheetTheme ="ThemeName"/>节,这样在整个应用中都会自动应用名为ThemeName 的主题
2。页面主题:在ASPX文件顶部加入:<%@ Page Language="C#" StylesheetTheme=" ThemeName " %>,这样当前页面都会应用名为ThemeName 的主题,或者在ASPX_CS中加(Page_Load方法)入如下代码 Page. StyleSheetTheme = “ThemeName”;
3。角色主题:需要使用masterpage 来辅助实现 ,通过User.IsInRole(“RoleName”) 来判断用户是否属于某个角色,然后决定使用何种主题(Page. StyleSheetTheme = “ThemeName”);当然,使用这种办法还可以应用用户选择的主题 。
4。给某个控件应用特定的样式,那么需要设置控件的SkinId属性,然后在skinid中填写我们在skin文件里定义好的样式的skinid就ok了!如果你不希望某个控件应用theme的样式,你只需设置Label的EnableTheming属性为false的时候就可以了。
5。theme中包含CSS:
theme中也可以使用.css文件,当你把.css文件放在1个theme目录下后,在用到了这个theme的页面中自动会应用你的.css的
一般引用主题和皮肤的方式主要有这两种:stylesheettheme和theme他们用法差不多,就是执行的优先级不一样:
1在页面上定义theme时:页面只使用theme的主题样式,不会使用页面上的用户再定义的样式。
2当定义了stylesheettheme时,页面先加载stylesheettheme属性中的样式,再合并页面上的样式,如果有一样的样式定义,就取页面中的样式。
3两种皆有会先加载stylesheettheme的样式,再加载页面中的样式,再加载theme中的样式,如果有一样的样式,则后面的样式覆盖前面加载的样式。
工作原理
不同的主题和皮肤之间的不同主要是页面和页面中的控件的样式(包括字体、段落、背景、边框等等)、部分图片的不同。
传统的完全使用CSS来表现不同的主题的方案,在处理图片和图片按钮的地方往往心有余而力不足。而在aspnet2.0里面一切都已经变得简单。
主题和皮肤是 dotnet framework2.0内建支持的,服务器控件添加了SkinId属性,Page类也添加了Theme 和 StyleSheetTheme 属性,其目的就是优雅的支持Skin。在应用指定了主题之后,相关的页面会自动链接位于主题目录下的css文件和skin文件,css的用法跟传统的用法没有什么区别,而skin文件则以一种类似于css的方式工作,指定了SkinId的服务器控件会自动从skin文件中加载并附加匹配的属性或样式(最常用的是Image 和ImageButton的ImageUrl属性,这样做可以使页面在不同的主题下)---这是在服务器端完成的。由于skin文件在使用后是缓存在内存中的,所以效率不会有问题。
后台代码轻松为网站换府肤
前面讲的都是在aspx文件或web.config中应用theme,而在blog这样的每个用户都有不同的skin的网站中用上面的方法来实现换skin显然是不方便的。
下面就介绍怎么在后台代码中动态的引用theme来解决上面的情况,theme必须在page被请求的最早期就应用上,所以我们必须在Page_PreInit事件中写代码,代码很简单,就1句:
Page.Theme = "...";
这里我们只要从数据库中去读取每个用户设置的不同theme名就可以轻松实现每个用户都有不同的skin了。
上面的可以认为是费话,下面开始全新的制作方法
下面我是我自己写的一个例子
首先创建一个app_themes文件夹
然后再下面创建两个主题 blue,red 其实就是两个文件夹
然后我们就可以分别在不同的主题下面创建不.skin文件或者.css样式
在这里我只定义了分别定义了一个skin的文件,里面具体怎么定义大家自己去发挥了!只要别把两个主题定义的一样就ok了呵呵!
好了,现在我们就来实现在后台控制主题
1。aspx文件里
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Template.aspx.cs" Inherits="admin_Template" %>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>模板管理</title>
<script language="javascript" type="text/javascript">
<!--
function clickit() {
var dom=document.all;
var el=event.srcElement;
if(el.tagName=="INPUT"&&el.type.toLowerCase()=="radio")
{
for(i=0;i<dom.length;i++)
{
if(dom[i].tagName=="INPUT"&&dom[i].type.toLowerCase()=="radio")
{
dom[i].checked=false;
}
}
}
el.checked=true;
}
//-->
</script>
</head>
<body>
<form id="f1" runat="server">
<div class ="inner2">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<ul ><li>
<img src="../image/<%#DataBinder.Eval(Container.DataItem, "TemplateImage")%>"/><br />
<asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.TemplateName") %>'></asp:Label><br />
<asp:Label ID="Label2" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.SetFolder") %>' Visible="false"></asp:Label>
<asp:Label ID="Label3" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.CssName") %>' Visible="false"></asp:Label>
<asp:RadioButton ID="RadioButton1" runat="server" onclick="clickit();"/>
</li></ul>
</ItemTemplate>
</asp:Repeater>
<div style ="text-align :center;"><asp:Button ID="SaveButton1" runat="server" Text="选好了,确定!" onclick="SaveButton1_Click"/></div><br />
</div><br />
</form>
</body>
</html>
2。aspx.cs文件里:
//更换网站主题
using System.Data.SqlClient;
public partial class admin_Template : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Session["UserNm"] != null)
{
if (Session["UserNm"] != "")
{
}
else
{
Response.Write("<script>alert('操作失败!没有登陆或者登陆超时');location.href='adminlogin.aspx';</script>");
}
}
else
{
Response.Write("<script>alert('操作失败!没有登陆或者登陆超时');location.href='adminlogin.aspx';</script>");
}
if (!IsPostBack)
{
SqlConnection con = new SqlConnection("数据库连接语句,我就不写了");
string sql1 = "select top 5 * from [Template] order by [Templateid] desc";
SqlDataAdapter da1 = new SqlDataAdapter(sql1, con);
DataSet ds1 = new DataSet();
da1.Fill(ds1);
Repeater1.DataSource = ds1;
Repeater1.DataBind();
}
}
protected void SaveButton1_Click(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection("数据库连接语句,我就不写了");
con.Open();
int intI = 0;
try
{
for (intI = 0; intI < this.Repeater1.Items.Count; intI++)
{
RadioButton itemCheck = (RadioButton)this.Repeater1.Items[intI].FindControl("RadioButton1");
if (itemCheck.Checked)
{
Label Label2 = (Label)this.Repeater1.Items[intI].FindControl("Label2");
Label Label3 = (Label)this.Repeater1.Items[intI].FindControl("Label3");
string sql = "Update user set Template='" + Label2.Text.ToString() + "',SelectCss='" + Label3.Text.ToString() + "' where id=" + '2';(注意!,如果是多用户的话这里的改成 where UserId=" + this.Session["UserId"].ToString();) SqlCommand cmd = new SqlCommand(sql, con);
cmd.ExecuteNonQuery();
}
}
}
catch (Exception ex)
{
throw new Exception(ex.Message);
}
Response.Write("<script>alert('操作成功!');location.href='Template.aspx';</script>");
con.Close();
}
}
看来我们得好好测试测试了!
3。在所有需要应用主题的页面的.aspx.cs文件里写上下面这个方法
//实现更换皮肤效果
protected void Page_PreInit(object sender, EventArgs e)
{
SqlConnection con1 =new SqlConnection("数据库连接语句,我就不写了");
con1.Open();
string sql2 = "select Template from [user] Where [id]=" + '2';(注意!,如果是多用户的话这里的改成 where UserId=" + this.Session["UserId"].ToString();)
SqlDataAdapter Da = new SqlDataAdapter(sql2, con1);
DataSet Ds = new DataSet();
Da.Fill(Ds);
DataTable dt = Ds.Tables[0];
if (Ds.Tables[0].Rows.Count > 0)
{
Page.Theme = Ds.Tables[0].Rows[0][0].ToString();
}
else
{
Page.Theme = "default";
}
}