无敌博皮 之 乾坤大变色——上篇:使用方法

看文章前,先请看右侧,在“公告”之上的“主题风格”,试着点几下后面的小色块儿,如果您没有觉得什么地方变了,或者您压根儿就没看到“主题风格”,那么请不要继续看此文,而应该直接拖动滚动条到评论区,谢谢合作!(IE7/8 + FF3 测试通过)

所有本文将用到的文件:

本样式依国际惯例,使用了博客园的 Custom 模板,同样需要禁用模板本身样式,并把上面七个CSS文件中任意一个你喜欢的样式复制到自定义样式的文本框里去,然后保存即可,这样就可以得到一个简单的样式了,你也可以修改部分代码以使它变得更美观。

呵呵,如果事情如此简单,也不用我在这里废话了,所以,下面那戏开场~~~~

刚才你点了右上侧那几个小色块儿了吧?好玩儿不?这就是这套skin最大的特色,而奥秘就在于上面那些文件中惟一的JS文件。

依然需要先完成上面的那些步骤,完成之后,你需要把这个JS文件添加到页面中去,能够实现这个功能的界面中 [管理] -> [选项] -> [Config] 中,有三个地方可以用,公告、页首Html代码和页脚Html代码,虽然脚本按道理讲应该放到最后,但是因为这个JS里需要加载要用到的CSS文件,所以建议放在“页首Html代码”中,像下面这样的一行代码即可:

<script type="text/javascript" src="https://files.cnblogs.com/dingxue/css1_script.js"></script>

如果你直接这样引用,那么就没有其他工作要做了,如果你把这些CSS文件传到了其他的某个地方,那么需要修改JS文件中的前几行,只需要修改相应的URL即可,很简单,如果有什么不明白,可以看本系列的第三篇,里面有比较详细的介绍。

使用步骤回放:

1. 登录后进入自己的博客,点击导航中的“管理”后,进入[选项] -> [Configure]
2. 在“Display Skin”下面的下拉列表中选择“Custom”
3. 复制上面七个CSS文件中你最喜欢的一个的内容到“通过CSS定制页面”下面的文本框
4. 选中“禁用模板默认CSS”前面的复选框
5. 不需要换肤功能请跳到第9步,不想另存JS/CSS文件请跳到第8步(建议)
6. 下载所有CSS文件并上传到某个地方
7. 修改JS文件前几行中的URL为你的CSS文件对应URL,并上传JS
8. 在“页首Html代码”中添加对JS文件的引用(引用代码见上面)
9. 到页面下面点击“SAVE”按钮以保存设置

请注意:

脚本文件中使用了cookie,用于记住用户的选择,cookie有限期为30天,当用户选择了一个风格之后,再访问其他页面或下次访问时,会自动使用最近一次选择的风格。由于CSS加载和JS执行的问题,可能会有一瞬间的自动加载延迟,导致页面在加载完闪一下。

本skin挑战了一些博客园不支持的功能,所以无法发布为正式模板,所以你只好自己动手才能丰衣足食。而且因为博客园功能太多了,有些地方是我所没有用过的,可能样式中漏掉了不少,目前已知的有侧边栏的日历、找找看等,模块中的相册等,如果你需要这些,请一定记得改写样式,以添加这些支持。

特别鸣谢:

偶老婆:元旦三天假期就折腾这个了,也没时间陪她出去逛逛……

米随随:http://www.misuisui.com,我以前的同事,换肤的想法最初来源于他的博客,这小子前些日子说牛B大发了,把空间搞到了国外,不过最近也不知道是外国友人不友好还是被G了,经常打不开他博客。

新浪博客和网易博客:http://blog.sina.com.cnhttp://blog.163.com,有几个样式的配色方案雏形来自于这两个博客站。

图灵出版社及他们翻译的那本《写给大家看的设计书》:这本书真的不错,颜色、对齐等很多东西借鉴了里面的设计原则(配色没做好是我的问题,和书没有关系)

Omar AL Zabir和他的ensure:http://msmvps.com/blogs/omar/,这位MVP同学总喜欢搞些稀奇古怪的东西,加载CSS最初的方案来自于他的ensure,虽然现在实现略有不同,但依然感谢他带来的灵感。

百度和google:搜索引擎真是强大,想要的东西全都找得到,不服不行啊。

posted @ 2009-01-04 01:17  丁学  阅读(5394)  评论(54编辑  收藏  举报