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

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)

iTheme 主题宽度改为960px的方法》上有23条评论

    1. 园子 文章作者

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

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

  1. shekck

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

    1. 园子 文章作者

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

发表评论