Tips: 使用 FireFox+FireBug 美化博客

  对上一篇文章我已经大概介绍过 FireFox 浏览器的 FireBug 扩展,它不仅仅能够帮助我们分析页面的加载过程,更重要的功能是帮助网页设计人员开发网页。

  因涉及的知识面很广,所以我只在这里跟大家说说,如何利用它来美化自己的博客模板 :)

 tips-firebug-01.gif tips-firebug-02.gif

  左图:是FireBug扩展查看页面HTML元素的截图,左侧为HTML代码,而右侧则是当前HTML标记的css属性。

  右图: 点击扩展界面左上角的查看按钮,我们的鼠标在浏览器上指向某一区块,那么左侧的HTML标记可自动定位到当前标记上。找到自己需要的区块,按下回车键(防止点击页面上的链接)右侧的css属性可切换到当前标记下。通过该功能我们可以快速找出自己想修改的HTML标记和css,方便修改。

tips-firebug-03.gif tips-firebug-04.gif

  左图:在HTML标记的css属性上,我们还可以点击相关的文字进行修改。比如我刚从是定位到博客标题的文字上,css属性列表中的 #header a {..,} 就是文字的属性了,其中已带color颜色属性为#000000黑色。点击颜色值将出现编辑框,我们可以在这里即时修改css属性并预览效果。

  右图:我们已经准确找到准确HTML标记的css属性,我们就可以参考css熟悉列表上的元素名称,对自己的模板css进行修改。

tips-firebug-05.gif tips-firebug-06.gif

  左图:切换到布局选项卡,我们还可以直观的看到当前HTML元素的大小和定位信息。

  右图:Yo2的博客可以进入管理后台-》私有模板-》编辑私有模板,修改模板的css文件。一般把自己需要修改的css写在文件的尾部。(如果你正在使用系统模板,请先私有化)

  以上是很简单的使用说明,至于如何写出自己需要的css效果请参考《CSS2 参考手册》 ,通过css可以不仅于修改文字的大小、颜色,还可以修改背景、定位、特效等等,你所能看到的一切 :) BTW:我无法提供HTML或CSS的教学指导,因日常工作量也蛮大的,还请体谅。我鼓励大家一起学习,互相帮助!

one-simpleMagazine v1 正式发布

  经过几天的反复调整,已达到比较好的配色方案。部分细节也得到修正,现在就正式共享给大家使用 ;) Yo2 系统已安装好,在推荐、精美、双栏、三栏、简朴分类中可以找到(不如说全部分类都能显示:D)

  one-simpleMagazine 是一个模仿 wordpress 杂志类模板的布局设计而成,虽然感觉模板有些设计元素,但它却非常简朴。整个模板只有一个 30k大小的背景图片。博客首页采用杂志类型的展现方式,首个文章全文输出,而其他文章则以 300字以内的摘要输出,摘要中可自动缩略显示文章内部的图片(有杂志味)其他分页则全部以摘要显示。博客首页支持双侧栏,一左一右。右侧栏为主侧栏,可摆放常用的区块,而左侧栏则以文章分类、存档的博客导航为主。整个模板基于单层 div 进行渲染,可以加快页面的显示速度(如使用多层 div 嵌套,浏览器则需要下载完整的 html 内容后才能显示) 。

  如需修改左侧栏的宽度,请修改css的#contents-main和#leftbar,当中两个数值加起来应该等于 600px 。而右侧栏则不建议修改宽度,涉及的改动会多一些。背景图片请通过修改 css 进行更换。

  下载:one-simpleMagazine 模板

  *UPDATE: 右侧栏HTML代码放置到页面最下方、侧栏区块加入 overflow:hidden 属性(防止侧栏内容撑破模板)

  *UPDATE: WordPress 官方下载地址:http://wordpress.org/extend/themes/one-simplemagazine ,支持 Gavatar 头像

one-simpleMagazine 模板制作中…

  昨晚想到自己的博客侧栏内容越来越多,基于 K2 模板精简出来的单栏模式,显然无法满足需求。开始琢磨自己做个仿杂志类型的模板

one-simplemagazine-仿杂志 wordpress 模板

  配色比较鲜,部分细节还需要慢慢调整。毕竟这只是我今天下午基于 wordpress 默认模板的基础上制作出来的,有待慢慢打磨 :) 正式作品将会公开下载使用。这也将是我第一个公开发行的 wordpress 模板 :D 请多多支持,提出宝贵意见。