当前位置:园子博客 » 网站应用 » inove主题宽度改为980px的方法

inove主题宽度改为980px的方法

7月 13th, 2009 | Filed under 网站应用 | 共有8,854次浏览

前面的文章园子为大家分享过inove主题增加feed订阅器的方法,很多朋友在留言中都说非常实用。今天园子再次更改了inove主题,这次做的是将宽度加宽到980px,而原来的主题默认的是936px,我个人感觉原来的宽度在插入图片和加入AdSense广告上有些不方便,比如宽度限制、无法投放更大尺寸的adsense广告等,再者就是随着液晶显示器的普及,国内外主流用户已经习惯了在较高分辨率下进行工作和学习,这就有必要把网站宽度进行适当的拓展以充分利用空间。整个修改过程其实非常简单,就是修改一下图片和css文件,过程大致如下。

1.首先更改整体宽度,将整体宽度增加到980px。打开 style.css 文件,找到

1
2
3
4
#container {
	margin:0 auto;
	width:936px;
}

更改为:

1
2
3
4
#container {
	margin:0 auto;
	width:980px;
}

2.修改页面左侧栏的宽度。同样修改 style.css 文件,找到

1
2
3
4
5
6
7
#main {
	background:#FFF url(img/main_shadow.gif) top repeat-x;
	width:605px;
	padding:13px 15px 15px;
	float:left;
	overflow:hidden;
}

更改为:

1
2
3
4
5
6
7
#main {
	background:#FFF url(img/main_shadow.gif) top repeat-x;
	width:649px;
	padding:13px 15px 15px;
	float:left;
	overflow:hidden;
}

3.修改评论内容的宽度。找到

1
2
3
4
5
6
.comment .info {
	background:#EDEFF0 url(img/comment.gif) 0 0 no-repeat;
	float:left;
	padding:10px 15px 0;
	width:494px;
}

更改为:

1
2
3
4
5
6
.comment .info {
	background:#EDEFF0 url(img/comment.gif) 0 0 no-repeat;
	float:left;
	padding:10px 15px 0;
	width:538px;
}

4.修改评论框的宽度。找到

1
2
3
#comment {
	width:601px;
}

更改为:

1
2
3
#comment {
	width:645px;
}

5.修改对应的图片大小,请注意不是直接改变大小,你需要用较专业的图片处理软件Photoshop 去修改。需要修改的有以下几个图片。

修改header.jpg和footer.jpg宽度为980px;
修改light.gif宽度为1192px;
修改box.gif宽度为1298px;
修改comment.gif宽度为1092px;
修改postbox.gif宽度为1244px;
修改messagebox.gif宽度为649px。

更新于2009年10月13日,感谢 SEVEN 的提醒,发现在评论内容的背景图片上有些缺角,现在已经修复,修改comment.gif宽度正确的应该为1136px,请重新下载园子提供的打包文件!

注:上述园子提供的数值大小仅是在宽度为980px的基础上修改的,如果你要实现不同的宽度可自行计算所需的宽度,在修改前请记得备份好相关的文件。

通过以上简单的修改就可以很好的实现宽度为980px的布局,上传相关文件后,按Ctrl+F5强制刷新页面,就可以看到更改后的效果。在这种宽度下,可以更好的优化 adsense 广告和上传文章图片,如果你想看改后的效果直接看园子的博客就可以了。在修改过程中遇到什么问题欢迎给我留言,我会在第一时间协助你解决。

最后,想图省事的朋友可以直接下载园子提供的修改后的图片打包文件,点此下载

  1. 轻描淡写
    8月 29th, 201213:05

    园子同学你好啊,嘎嘎,我在inove的修改上遇到一点问题,我邮箱liuguanxiu@163.com QQ1152402024.在拓宽980px后,我的链接页面的box始终有缺口,不知道在哪儿调整呢。在样式表中找了半天,没搞好,嘿嘿。期待你的回复。

  2. yesureadmin
    12月 13th, 201114:50

    是的呀,现在都宽屏了。

  3. AustinWeich
    7月 28th, 201110:12

    哥们、这个主题修改后,为何在后台传图片或者使用微软的文章发布软件,图片无论如何放大调整都是按着原来的尺寸显示,请问还要修改哪些文件那? 谢谢,敬请查看www.austinweich.com 效果!

  4. tal-rasha
    7月 29th, 201011:21

    再请教你个问题啊,评论的头像大小怎么改呢

  5. iplaywind
    5月 1st, 201022:42

    你好,非常感谢你提供的图片。
    发现一个BUG,也就是如果建立没有侧边栏的页面,页面右侧会有空白部分,非常不美观,您看能否提供如何修改?谢谢。

    • 园子
      5月 4th, 201008:51

      @iplaywind
      现在已经没有这个主题了
      呵呵
      你自己测试下吧
      需要改CSS样式~

  6. Tian
    1月 15th, 201010:08

    圆子,很喜欢你现在的布局,能不能介绍一下你现在这个布局的比例,能放128*90。我动手改了几次,自我感觉效果不好。谢谢了。

    • 园子
      1月 15th, 201017:38

      @Tian
      728×90是刚刚能放下去的,你需要把左栏的宽度调整小些,右栏的宽度调整大些。

  7. 乘风归来兮
    1月 14th, 201011:29

    我参照改了 首页ok ie 傲游 tt看具体文章内容的时候 主题偏左了 火狐没事

  8. hcjet
    11月 4th, 200922:56

    博主是好人,本文收藏耶,正好在恢复博客非常有用,谢谢!

  9. 少爷
    10月 19th, 200911:08

    此贴严重收藏。

  10. SEVEN
    10月 14th, 200910:49

    😛 OK了,謝謝,辛苦了!

  11. 园子
    10月 14th, 200909:04

    @SEVEN
    修改 box.gif 宽度为 1298px 即可!
    已经更新~

  12. SEVEN
    10月 13th, 200922:57

    謝謝!現在留言OK了,不過相關文章的那塊的左下角也是出現缺口,你的站也是! 😉

  13. 园子
    10月 13th, 200912:01

    @SEVEN
    我已经查出了问题所在
    问题出在 comment.gif 图片上,宽度正确的应该为1136px,请重新下载打包文件或自行修改~

  14. SEVEN
    10月 13th, 200910:50

    @园子
    對呀,我之前改了寬度都沒有改圖片,直接不使用圓角效果算了,不過剛剛找到你這帖知道怎麼改圖片之後就改了!那你有空就看看怎樣解決問題吧! 🙂

  15. 园子
    10月 13th, 200910:44

    @SEVEN
    好像也是
    不过不太影响什么,有时间了我看看吧,应该是图片或者CSS的问题~

  16. SEVEN
    10月 13th, 200910:17

    @园子
    圖片修改應該沒有錯吧,因為有些地方是完整顯示圓角的,只是有些地方出問題,而且我改的寬度和你不一樣,所以不能用你的圖片,另外我看你的站也有出現問題喔,留言內容的左下角也是直角來的,而且有出現缺口! 😉

  17. 园子
    10月 13th, 200908:58

    @SEVEN
    有部分图片你没有修改,或者修改的规格不对
    才会出现你说的状况
    我提供有修改后图片文件打包下载的~

  18. SEVEN
    10月 13th, 200902:23

    修改了圖片之後,只是左上角和右下角是出現圓角的,而左下角和右上角是顯示直角的,請問知道原因嗎?謝謝!

  19. Eden
    9月 14th, 200900:57

    能改成三栏吗?一窄点儿的,一宽点儿的。

  20. john
    8月 20th, 200917:04

    我也用园子的办法改了,但我调成了956px的宽度,不知道哪种更流行。956?960?还是980?

    • 园子
      8月 21st, 200909:10

      @john
      据我所观察
      用960px的多一些
      但宽度不是绝对的,我个人感觉在950~980px都可以的~

  21. 三脚猫
    7月 14th, 200921:46

    很成功~~感觉没啥缺点~~

  22. Bruce
    7月 14th, 200915:57

    960 px 还是比较主流的宽度,哈哈

  23. Rufor
    7月 14th, 200913:29

    Hi, Interesting, I`ll quote it on my site later.
    Thank you

  24. 园子
    7月 14th, 200909:03

    @卢松松
    嘿嘿

    有相同的地方吗?我的评论框是借用你滴修改的~

  25. 卢松松
    7月 13th, 200922:18

    我一直在比较贵博和我的博客文章有什么不同

  26. spookzang
    7月 13th, 200918:18

    哈哈 下回试试看~

  27. 会计导航
    7月 13th, 200917:45

    这种布局比默认的更大气一些,感谢无私的共享精神。

  28. huaimao
    7月 13th, 200914:10

    不错,这个方法记着,以后偶修改的时候用上!哈哈!

  29. 乒乓器材
    7月 13th, 200910:08

    不错,不错,有时间我也去改改我的!
    园子真厉害!

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