当前位置:园子博客 » Wordpress » iTheme 主题宽度改为960px的方法

iTheme 主题宽度改为960px的方法

8月 28th, 2009 | Filed under Wordpress | 共有8,951次浏览

iTheme 是一款非常经典的仿 Mac 风格的 wordpress 主题,不仅界面设计漂亮,可自定义 sidebar,而且边栏模块可以任意拖动,相信很多 Apple 的粉丝都非常喜欢这款主题。比较遗憾的是由于这款主题开发较早,作者设计的界面宽度只有770px,园子今天通过修改将 iTheme 主题的宽度改为了960px,下面把方法分享一下。

为什么要修改宽度?

现在用户使用电脑的主流分辨率已经保持在了1024×768甚至更高,过窄的页面在宽屏显示器上留白过多,用户体验较差。如果你在后期有往站点上投放 AdSense 广告的打算,那么将界面加宽到目前主流的950px 到980px 之间更加有利于广告的展示和用户的阅读。

修改后的界面展示:

iTheme 主题宽度改为960px效果展示

iTheme 主题宽度改为960px效果展示

iTheme 主题宽度修改的过程

在以前的文章中园子曾经介绍过 inove 主题宽度改为980px的方法,本次修改 iTheme 主题思路和上次一样:将显示文章的左栏加宽,右侧的 sidebar 宽度不变,通过修改图片大小和 css 样式来达到目的,过程如下:

1.a.修改 images 文件夹下的以下图片,将宽度由原来的545px修改为735px。

  • content-bottom-bg.gif
  • content-bottom-bg.png
  • content-top-bg.gif
  • content-top-bg.png

b.将 navigation-bg.gif 图片的宽度由496px 修改为686px。

c.修改 images\gif 文件夹下的以下图片,将宽度由545px修改为735px。

  • content-top-bg.gif
  • content-bottom-bg.gif

图片至此为止修改完成,园子需要提醒你的是要通过 Fireworks 之类的专业软件来修改图片的宽度,不要直接去更改大小。

2.修改 style.css 文件,这一步其实也是将宽度加宽的主要步骤,你需要修改以下 CSS 代码:

a.修改前

#left-col {width: 545px;}

修改后

#left-col {width: 735px;}

b.修改前

#wrapper {width: 770px;}

修改后

#wrapper {width: 960px;}

c.修改前

#content {width: 495px;}

修改后

#content {width: 685px;}

d.修改前

.post .title {width: 438px;}

修改后

.post .title {width: 628px;}

e.修改前

#commentform textarea {width: 480px;}

修改后

#commentform textarea {width: 670px;}

最后,将所有修改过的图片文件和 css 文件上传,刷新页面即可看到主题宽度已经变成了960px。你可以点击这里查看园子修改完成的演示站点。

如果你懒的去修改,那么园子将修改后的主题打包供朋友们下载,当然,版权归原作者所有。

iTheme 主题下载

原版 itheme-1-1 主题下载修改后的 itheme-1-1 主题下载(260 KB)

  1. also
    10月 5th, 201011:36

    请问评论用的是什么插件?

  2. 日记男孩
    12月 6th, 200909:47

    这款主题我收下啦,谢谢

  3. ucax
    8月 31st, 200906:20

    以前有用過這個主題,三欄的也不錯。

  4. rubinz
    8月 30th, 200914:42

    还有请问一下你的评论有的什么插件。

  5. rubinz
    8月 30th, 200914:41

    有时间写个关于主题字体修改的文章,呵呵,我想学一下,我想把我的主题字体改一下。

    • 园子
      8月 31st, 200909:27

      @rubinz
      字体大小修改比较简单
      直接在主题的样式表里改下大小就行了~

      侧边栏的最新评论是使用 WP-RecentComments 插件
      评论使用的是 Quick Comments 插件~

  6. 雅丹地貌
    8月 29th, 200911:33

    这个其实很好改的呵呵

  7. goldapple
    8月 29th, 200910:40

    很漂亮的一款主题,可惜我用不了

  8. 讯息网
    8月 29th, 200900:25

    要修改的还蛮多的呢。学习了

  9. 伊官秦
    8月 28th, 200923:42

    嘿,我说园子的博客咋比我那个大气点呢!

  10. 淘宝风向标
    8月 28th, 200922:33

    大气了好多

  11. 吖Bee
    8月 28th, 200920:16

    这个主题还是不错的…这个方法可以借鉴一下..

  12. shekck
    8月 28th, 200919:56

    来园子这多了,把自己博客的theme也换成inove的主题了,汗。
    另外想请教一下园子:导航上除了显示分类文章的目录外我还想加几个如“about”什么的导航,请问应该在哪里加代码的呢?(p.s:参考你《Wordpress 页面调用分类文章的方法》提到的方法很实用,不知道是否就是通过这方法去增加导航栏的菜单的呢?)

    • 园子
      8月 29th, 200914:05

      @fcola
      相对来说是吧,视觉上比较大气一些~
      @老孙
      我看了,你老人家可真快
      嘿嘿~
      @john
      不用客气 呵~
      @shekck
      你可以看看这里
      http://www.yzznl.cn/archives/285.html
      介绍的正是导航上既显示分类文章,又显示页面列表的实现方法~
      @YY下载
      嘿嘿
      有时候我确实比较恶~

  13. john
    8月 28th, 200918:01

    谢谢园子了。刚才向园子在qq上进行了请教,解决了我两个有关inove主题的问题。实在是高啊,园子到底是对这些技术烂熟于心啊,欢迎关注,赞一下。@园子

  14. 老孙
    8月 28th, 200917:39

    嘿嘿,看看我现在的主题 😛

  15. fcola
    8月 28th, 200917:33

    现在是不是流行980PX

  16. john
    8月 28th, 200917:29

    这样不错,刚加了你qq。

  17. 会计导航
    8月 28th, 200917:01

    主题修改专业户了,呵呵~

  18. YY下载
    8月 28th, 200916:32

    谢谢博主提供的方法

  19. john
    8月 28th, 200916:29

    呵呵,方法应该是同那个980px的。顺便请教园子:sidebar里的125广告位是怎么弄出来的,是自己写的代码吗?还是主题里有?

    • 园子
      8月 28th, 200916:57

      @amseo
      呵呵
      挺佩服你的,速度真快,我刚发布就被~~~
      @john
      嗯 思路是一样的
      我只是把方法分享出来
      125广告位 主题选项里面有,把代码贴里面就行了
      加我QQ代码传给你~

  20. amseo
    8月 28th, 200916:28

    第一次来就占个沙发。
    博文资源很不错,收藏了。

您必须在 登录 后才能发布评论.