创建.Text Blog的自定义Skin
来源:互联网 发布:php到底是做什么的 编辑:程序博客网 时间:2024/04/26 06:01
作者:Eric Willis
翻译:汉博网/东南大学先声网 陈希成
原文:Http://weblogs.notevil.net/eric/articles/792.aspx
————————————————————————————————————————————
可以任意转载,引用请注明出处!
————————————————————————————————————————————
创建.Text Blog的自定义Skin其实不像它的代码一样困难。以下的方法让你只需要几分钟就可以作出自己的Skin:
1.首先寻找到Skin保存的缺省目录,这样你就不会找不到北了。下面我们即将从已存在的Skin中选出一个来编辑。
目录一般在X:/DotText/DottextWeb/Skins
2.打开Skin所在目录,选择一个已存在的Skin。我选择的是Marvin3(谢谢Marvin3的作者,Marvin3在页两边各有一列)。
新建一个目录,把文件拷贝进去。
3.现在,重命名文件夹。我叫它mine EIce,因为它基本上全是蓝色——和我汽车的颜色类似。
4.打开那个Skin文件夹,里面有几个CSS文件。Marvin3有几个CSS文件,别的Skin可能只有一个。每一个CSS都可以成为你Skin的一个版本。其中有个文件:PageTemplate.ascx (Asp.Net Custom Control),这个文件保存了Skin里的位置信息。打开它,看看它是如何工作的。你将看见普通的标签前缀都在文件的头部有注册,它们是用来画出皮肤的外形的。同时这里还有一些Html标记,你可以随意的去编写这些标记,但不要有语法错误!你也可以看看哪些元素可以移动,比如“News”的标签。
5.下面回到CSS文件。绝大多数皮肤的元素在ascx文件中用ID调用,看一下每个ID所对应的元素,以及所对应的CSS选择器。我加了一堆内容,你可以自定义一些。
6.在你的Skin文件夹里找到Images这个文件夹。Skin上所用的图片都在其中。我添加了一张图片作为背景,你也可以放任意图片同时参考CSS文件里的设定。比如加背景后使用:background-image:url(Images/blue_duckie_bg.gif)。
7.打开Skin文件夹,你可以编辑ascx文件中的每个元素。例如打开BlogStats.ascx,你能看到stats是如何显示在你的Blog中的。你能重定制格式或者改变他们的显示方式。
8.下一步也是是最后一步——创建你的Skin到DotText的Skin库中,即编辑Skins.config。 它安装在X:/DotText/DottextWeb/Admin中。一旦你打开了这个文件,你将看到很多标签在理面 ,你需要创建一个新的入口给你的新Skin,也就是说每一个CSS文件都要添加一个入口。SkinID由你的Skin名称和一个连字符,以及CSS文件名称组成。Skin的属性显示名在下面的设置中需要被列出,然后第二个CSS属性是相对应的CSS文件名。以下是一个例子:
<SkinTemplate SkinID = "eice-green" Skin = "EIce" SecondaryCss = "green.css" />
<SkinTemplate SkinID = "eice-blue" Skin = "EIce" SecondaryCss = "blue.css" />
<SkinTemplate SkinID = "eice-red" Skin = "EIce" SecondaryCss = "red.css" />
这里有三个CSS文件:green.css,blue.css,red.css。Skin名称为“EIce”。保存了文件以后,只要没有语法错误,你就可以在Admin设置中看到。
翻译:汉博网/东南大学先声网 陈希成
原文:Http://weblogs.notevil.net/eric/articles/792.aspx
————————————————————————————————————————————
可以任意转载,引用请注明出处!
————————————————————————————————————————————
创建.Text Blog的自定义Skin其实不像它的代码一样困难。以下的方法让你只需要几分钟就可以作出自己的Skin:
1.首先寻找到Skin保存的缺省目录,这样你就不会找不到北了。下面我们即将从已存在的Skin中选出一个来编辑。
目录一般在X:/DotText/DottextWeb/Skins
2.打开Skin所在目录,选择一个已存在的Skin。我选择的是Marvin3(谢谢Marvin3的作者,Marvin3在页两边各有一列)。
新建一个目录,把文件拷贝进去。
3.现在,重命名文件夹。我叫它mine EIce,因为它基本上全是蓝色——和我汽车的颜色类似。
4.打开那个Skin文件夹,里面有几个CSS文件。Marvin3有几个CSS文件,别的Skin可能只有一个。每一个CSS都可以成为你Skin的一个版本。其中有个文件:PageTemplate.ascx (Asp.Net Custom Control),这个文件保存了Skin里的位置信息。打开它,看看它是如何工作的。你将看见普通的标签前缀都在文件的头部有注册,它们是用来画出皮肤的外形的。同时这里还有一些Html标记,你可以随意的去编写这些标记,但不要有语法错误!你也可以看看哪些元素可以移动,比如“News”的标签。
5.下面回到CSS文件。绝大多数皮肤的元素在ascx文件中用ID调用,看一下每个ID所对应的元素,以及所对应的CSS选择器。我加了一堆内容,你可以自定义一些。
6.在你的Skin文件夹里找到Images这个文件夹。Skin上所用的图片都在其中。我添加了一张图片作为背景,你也可以放任意图片同时参考CSS文件里的设定。比如加背景后使用:background-image:url(Images/blue_duckie_bg.gif)。
7.打开Skin文件夹,你可以编辑ascx文件中的每个元素。例如打开BlogStats.ascx,你能看到stats是如何显示在你的Blog中的。你能重定制格式或者改变他们的显示方式。
8.下一步也是是最后一步——创建你的Skin到DotText的Skin库中,即编辑Skins.config。 它安装在X:/DotText/DottextWeb/Admin中。一旦你打开了这个文件,你将看到很多标签在理面 ,你需要创建一个新的入口给你的新Skin,也就是说每一个CSS文件都要添加一个入口。SkinID由你的Skin名称和一个连字符,以及CSS文件名称组成。Skin的属性显示名在下面的设置中需要被列出,然后第二个CSS属性是相对应的CSS文件名。以下是一个例子:
<SkinTemplate SkinID = "eice-green" Skin = "EIce" SecondaryCss = "green.css" />
<SkinTemplate SkinID = "eice-blue" Skin = "EIce" SecondaryCss = "blue.css" />
<SkinTemplate SkinID = "eice-red" Skin = "EIce" SecondaryCss = "red.css" />
这里有三个CSS文件:green.css,blue.css,red.css。Skin名称为“EIce”。保存了文件以后,只要没有语法错误,你就可以在Admin设置中看到。
- 创建.Text Blog的自定义Skin
- 如何创建.Text Blog的自定义Skin[转贴]
- 创建一个自定义的 Halo Accordion header skin
- 个性化的Blog Skin制作方法详解
- .Text BLOG 的安装
- ASP2.0 自定义控件SKIN的应用
- 如何制作.Text Blog自定义皮肤
- 如何制作.Text Blog自定义皮肤
- Text BLOG 的安装(zt)
- Android自定义模拟器skin
- Nervon创建Skin Window
- 创建MyGUI skin
- 创建我的Blog
- Blog的创建
- 创建我的blog
- 关于.Text Blog 0.94的安装
- .Text blog的一点点安装心得
- .text blog 安装的尴尬事情
- Garbage Collection: Algorithms for Automatic Dynamic Memory Management
- 使用Spring方法注入协调不同步的bean
- Weblogic集群问题精粹
- 新人
- Game Programming Gems 4 by Andrew Kirmse
- 创建.Text Blog的自定义Skin
- ajax中的键盘事件注意使用keyup
- Algebraic Aspects of the Advanced Encryption Standard
- MULTi PACK 41 PROGRAMS AIO
- Dictionary of Analysis, Calculus, and Differential Equations (re-upload)
- C#中动态调用API函数
- OutRun 2006: Coast 2 Coast
- (转)WTL开发者指南(WTL Developer’s Guide翻译2)
- 准备将此Blog与我自己的http://www.kaoiki.com技术帖同步