How To Create Custom Skins For DotText(如何为DotText创建自定义风格的皮肤)

原创 2004年10月08日 08:15:00

Creating custom skins for DotText is quite easy I've found.  It only took a few minutes to be well on m way to making skins.

  1. First find where the default skins are saved so that you do not have to start from scratch.  We are just going to copy one of the existing ones and edit that.

    Install Directory>/Skins
  2. Open up the skins directory and choose one of the existing skins folders to copy.  I used Marvin3 (thanks Marvin, who ever you are) because I like the columns down each side of the page.  Make a copy of that folder.
  3. Now that you have a copy, rename it to something you like.  I called mine EIce because it is largely based on blue -- the color of ice and the constant coating on my car.
  4. Open up your newly named folder and depending on which previous skin you copied you will notice several Css files.  Marvin3 has a few while others only have one.  For each Css file you have, that will be a version of your skin.  You will also notice PageTemplate.ascx (Asp.Net Custom Control).  This is the file that holds the information about the positioning of your new skin.  Open it up to see how it works.  You should see that the normal tag prefixes are registered at the top of the file and where they are used to draw how your skin will look.  There is also a mix of Html in there -- feel free to edit that if you like but be sure your syntax is correct!  You should also plainly see how you can move elements, such as “News“ around by using the <?xml:namespace prefix = uc1 />tag.
  5. Back to the Css file now.  Most skins refer to the elements in the ascx file by their ID's, so take a look at which ID's go with which elements and you will know which Css selectors edit them.  I added a bunch of stuff to the a:hover selector so that when you mouse over my links, they do something crazy -- like highlight.  Customize this file as much as you like but again be sure that you use only proper syntax!
  6. In your skin's directory, find the Images folder.  This is where you can store images that your skin requires.  I put Dave M.'s blue duckie that I took a picture of in mine because I used it as a background.  You may put whatever you like in there and reference it from the Css file just one directory up.  I have background-image: url(Images/blue_duckie_bg.gif);
  7. Now lets look in the Controls folder in your skins directory.  Here you can edit each element of your blog via even more ascx (Asp.Net Custom Control) files.  If you open one up such as BlogStats.ascx, you can see just how the stats are printed out on your blog.  You can reformat or change the way they, or any other control, displays.  Pretty cool huh?  Good job Scott!
  8. The next and final step to creating your own skins for DotText is to update the Skins.config file.  It is stored in the Install Directory>/Admin folder of your blog.  Once you have this file open you will see entries inside of the tag, .  You need to create a new entry for each on of the versions of your new skin -- in other words, for every Css file (color scheme perhaps) you will need an additional entry.  The SkinID attribute needs to be the name of the skin you created (in my case EIce) with a hyphen and then the name of the Css file.  The Skin attribute is the display name of the skin that shows up in the drop down box inside of the config.  Then the SecondaryCss attribute is the file name of the corresponding Css file.  Here are a few entries from my new skin:


    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" />
    I have three Css files named green.css, blue.css, and red.css.  My skin name is “EIce“.  Do you see the theme here? :-)  Be sure you save this file, again with no syntax errors (look over your code!), and upload it back to the webserver in the Admin directory.

That's really all there is to creating custom skins.  The only repetitive part is making many versions of your Css file to have different color schemes (which I'll do later, maybe, when I get sick of blue).  Everything is in plain text so you don't even need to open Visual Studio .NET (but I use that as an editor because it colors the code so nicely).

DotText源码阅读(6) --模版皮肤

导读: 我们看到,dottext的个人模版是可以替换的,但显然,这么多套模版不可能每一套都写一个包含界面的程序文件。dottext的作者采用了UrlRewrite来实现模版和换肤,我们分析其原理后,可...
  • wj110
  • wj110
  • 2007年08月02日 17:28
  • 422

dottext分析之 XmlSerializerSectionHandler

先弄清aspnet的内部运行机制:   remote client Request---->IIS---->aspnet_isapi.dll-->aspnet_wp.exe-->HttpRuntime...
  • playsation10
  • playsation10
  • 2005年09月22日 21:51
  • 473

DEV 皮肤子多样化定义

1:添加一个RibbonGalleryBaritem组建 2:在初始化的时候添加方法 SkinHelper.InitSkinGallery(RibbonGalleryBaritem); 即可...
  • wang463584281
  • wang463584281
  • 2016年02月17日 14:30
  • 287


首先,了解一下什么是DOTTEXT,它是一个功能强大的BLOG程序,运行环境ASP.NET+MS SQL,由于其稳定强大,国内各大站点都使用DOTTEXT,比如CSDN([url]www.csdn.n...
  • chenlinhaime1
  • chenlinhaime1
  • 2006年06月28日 09:35
  • 1140

Spine 皮肤Skins_官方文档中文版

总述(Overview) Spine 中的皮肤(Skin)功能,允许一套骨架上的骨骼和动画使用不同的附加资源(attachments)。多套相似的骨架可以通过替换 attachments 实现动...
  • laipixiaoxi
  • laipixiaoxi
  • 2015年05月11日 17:54
  • 995


  • anghlq
  • anghlq
  • 2006年10月11日 20:03
  • 915

dotText blog 界面修改

    最近修改了,dotText blog 的界面,不懂美工,所以颜色直接把颜色改成白色为主的简单风格了,如果大家想改成别的风格,请参考《配色方案》。下面我就把我改的代码防出来,大家要是有更好的代码...
  • fengyv
  • fengyv
  • 2006年05月29日 09:50
  • 1341

DotText urlRewrite介绍

1、花絮:   第一次拿到dottext时,开始让我比较觉得比较奇怪的是      一、以floerggyy注册后通过URL:http://x.x.x.x/floerggyy即可进入自己的blog里 ...
  • zhanglei5415
  • zhanglei5415
  • 2007年11月26日 17:02
  • 707


如何调试系统笔者下载的版本是嘟嘟提供的CNBlogsDottext ,关于这个版的说明在:下载后...
  • shanhe
  • shanhe
  • 2006年05月04日 00:29
  • 7088

dottext学习笔记1 配置

 1           Web.config配置1.1      configSections. Section节配置自定义节的处理器1.2      自定义节配置自定义节中定义属性type,处理器...
  • anghlq
  • anghlq
  • 2006年09月17日 21:34
  • 963
您举报文章:How To Create Custom Skins For DotText(如何为DotText创建自定义风格的皮肤)