修改主题外观

By
WP札记

这两天一直在折腾主题(其实这一个月基本都在干这个),总算折腾的顺手了一些。我突然发现,如果主题缺少图片的点缀,就应该把主题本身改的比较重口味一点、配色大胆,或者自带图片多一点。所以对于我这种比较喜欢码字但是图片又很少的同学来说,把首页定制一下是完全必要的,至少看起来视觉冲击力强一点点。这次顺道又设计了一下导航栏样式和整体效果。

1、此次更新主要是把主题的几个大块:文章、边栏模块做了个分割效果。本来想不出哪几个分到一起,而且样式堆起来很麻烦。最后想到一个办法,就是把首页的post不动,只把希望分做一块的几个地方划到一个div里面。经过这么一折腾,效果就出来了。然后加了个背景。

2、另外一个是分类图片的添加,我经过一番想法之后觉得把上个主题的这个功能加上。时间久远,我也忘记是谁想的这个点子了。

3、主题还是得折腾的。看了很多主题,给我的感受就是:老外的主题直接拿过来用是不现实的,就像sitename一样,直接写中文字出来肯定不好看,因为原来那主题适用的是英文,而且大部分字体都没有中文样式。这不得不说是个悲哀。

TIPS:

1、关于header部分宽度全屏幕,hedaer的内容部分居中显示的问题。
这个我试过很多方法,一是可以直接把头部加宽为100%,之后内容居中显示,但是效果比较难看。我用的方法是头部加宽到100%,在里面套一个容器div,把content部分的样式直接套用到新建的div里。这样就可以实现比较好的效果了。

2、侧边栏如果用了float,请一定加上overflow:hidden,否则直接影响后面元素的排列,要么压在前一个元素上,要么直接横向排到该行后面。不注意这一点,很麻烦。

PS:又更新了一遍logo。我都快成视觉控了=, =

Comments: 19

  1. 嗯!漂亮很多!

    不过,个人不喜欢上面的logo~~~~

    PS.点击表情没有出现在评论框。

    2010年03月25日
    • @夏影残雪 logo是配合颜色暂时放上去的,反正都要改的…… :mrgreen: :???:
      表情…我再看看去

      2010年03月25日
  2. 呐呢~又改过了?!修修好猛啊

    2010年03月25日
    • @万戈 no 呐呢……我看着别扭就改改 :lol: 主要是闲,嘿嘿。

      2010年03月25日
  3. 折腾吧,玩 呗

    2010年03月25日
    • @A.L 你终于回来正常博客的路线了~ :arrow:

      2010年03月25日
    • @阿修
      必须的 :wink:

      2010年03月25日
  4. 这个风格很清爽啊

    2010年03月25日
  5. 页面分块的感觉真好。
    “Home > WP札记 > 修改主题外观” 这一个如果和post一样的宽度,会不会更好些? :mrgreen:

    2010年03月26日
    • @Vicia 嗯,我有空了就改一下,谢谢

      2010年03月26日
  6. 偷看你的css,想借鉴下。看到Description的时候乐了,居然和我的一字不差。 :lol:

    2010年03月26日
    • @Vicia 哈哈,写的太乱,见笑了。完全一样也没什么,毕竟就那么几种~~呵呵。

      2010年03月26日
  7. 这次折腾得不错,风格出来了,也精致了

    2010年03月26日
    • @A.shun 能得到你的肯定不容易啊,我继续努力 :idea:

      2010年03月26日
  8. 又变了,如楼上所说,风格出来了,拜一下

    话说overflow:hidden的确很需要

    2010年03月26日
  9. 很喜欢:
    blockquote {
    margin: 1em 0 1em 20px;
    padding: 8px 10px 5px 20px;
    border: 1px solid #eee;
    color: #444;
    background:url(images/bg_title.png) -8px 0;
    ,刚想移植下,没成功…看来我现在还是个CSS盲…

    2010年03月27日
    • @MOPVHS 把图片调用对了就行啊,其他地方看着改一下就可以~呵呵,我刚开始也是css盲…多折腾折腾就懂了。

      2010年03月27日
    • @阿修 嗯嗯,大概什么CSS地方冲突了…我再仔细看看…

      2010年03月27日
  10. 说实话,偶也想改一下自己的主题 ,那个太难看了。

    2010年04月21日

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

:razz: