Shadowless space


没有阴影的家园

如何创建.Text Blog的自定义Skin(Changer翻译)(ZT)

作者:Eric Willis
———————————————————————————————————————
可以任意转载,引用请注明出处
———————————————————————————————————————

  创建.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设置中看到。


因为我不是自己架的blog,所以上面的内容对我来说是没有用的。

我的skin是在Luxinterior Light的基础上稍稍修改了css代码。

以下是我修改过的部分:

/显示顶部图片/

#top { background-image: url("http://img55.echo.cx/img55/3073/head60xh.jpg"); no-repeat center center; background-color: #333333;}

/修改背景颜色和正文颜色/

BODY {
 background-color: #333333;COLOR: #444444; }

/修改超级链接颜色和样式/

A {
 COLOR: #990000; TEXT-DECORATION: none
}
a:hover{text-decoration:underline}

/隐藏原来的blog标题文字/

#top h1 {visibility: hidden;}
#top p {visibility: hidden;}

只要将上面这些代码填进Option->Configure中的Custom CSS Selectors框框里,就会变成我blog现在这个样子。不过这些代码是基于Luxinterior Light这个skin的,对于其他的skin我米有研究过~^^ ,希望这些能对想修改skin的朋友稍微有点帮助。

另外,发现了一篇更详细的介绍自定义Luxinterior Light的文章,有兴趣的朋友可以看看:

New skin for .Text (dottext) - Luxinterior

posted on Wednesday, June 01, 2005 1:37 AM #Blog

Feedback

# re: 如何创建.Text Blog的自定义Skin(Changer翻译)(ZT) 6/1/2005 6:11 AM paopao

谢谢小roro 。
我在MSN上加你了。^^

# re: 如何创建.Text Blog的自定义Skin(Changer翻译)(ZT) 6/1/2005 6:30 AM bcblog

好, 漂亮, 鼓掌。

# re: 如何创建.Text Blog的自定义Skin(Changer翻译)(ZT) 6/1/2005 12:38 PM roro

paopao姐:呵呵,看到了!8谢啊*^~^*
老大:谢谢鼓励,开心的说~

# re: 如何创建.Text Blog的自定义Skin(Changer翻译)(ZT) 6/1/2005 2:09 PM ben

天哪,我还以为进错地方了。
哪天有空了,我家也要重新装修:)
质量标准RORO2005

# re: 如何创建.Text Blog的自定义Skin(Changer翻译)(ZT) 6/1/2005 5:29 PM roro

日夜花火暂被定为重点质量监督抽验对象,负责人RORO

嗬嗬嗬~~:)

# re: 如何创建.Text Blog的自定义Skin(Changer翻译)(ZT) 6/1/2005 6:07 PM ben

好家伙!

# re: 如何创建.Text Blog的自定义Skin(Changer翻译)(ZT) 6/9/2005 1:04 PM 丹丹

你好,我按照你教的更改了顶部图片,可不知为什么是多个小图片的组合,但也蛮好看的,谢谢

# re: 如何创建.Text Blog的自定义Skin(Changer翻译)(ZT) 6/9/2005 4:54 PM roro

丹丹姐,看看是不是你选的顶部图片太小了,选和顶部那个框框差不多大的图图效果最好喽!:)

# re: 如何创建.Text Blog的自定义Skin(Changer翻译)(ZT) 6/10/2005 12:09 PM 丹丹

roro:这次我选的比较满意了, 也是两张组在一起的,如果和框框差不多大,启动的很慢,可能是容量太大了,图片好难选哪

# re: 如何创建.Text Blog的自定义Skin(Changer翻译)(ZT) 1/13/2006 3:56 PM 大手

如何向你一样在每一篇文章的最下面插入Google广告呢?

# re: 如何创建.Text Blog的自定义Skin(Changer翻译)(ZT) 2/16/2006 8:13 AM bcblog

http://64.233.179.104/search?q=cache:dT7UQ2lZNnwJ:mixtaper.com/blogs/gosatango/articles/221.aspx
+New+skin+for+.Text+(dottext)+-+Luxinterior&hl=en&lr=&client=firefox-a&strip=1
here is the cache for the article

# re: 如何创建.Text Blog的自定义Skin(Changer翻译)(ZT) 2/17/2006 2:09 PM ryanzheng

帮我看看watercolor-ergonomic怎么加顶部图片好么?



Title

 

Name

 

Url

Comments

 

Protected by Clearscreen.SharpHIPEnter the code you see:

Blog Stats

  • Posts - 78
  • Stories - 9
  • Comments - 554
  • Trackbacks - 2

News