sein @ 2008.09.26 , 10:51
32

Stylish 样式：Google Reader 清爽版

[-]
跟火山同学比较残酷的黑白颠倒的脚本(GreaseMonkey)方式不同，我喜欢在原有 CSS 基础上根据个人喜好进行调整。下面这是我发布的第一个 Stylish 样式，它是在仔细阅读 Google Reader 的 CSS 之后，一个个测试修改的，应该没有多余的语句。对 CSS 的优化包括：

1、所有链接改为统一的蓝色，取消下划线。
2、设置基本字体大小为12px，选择新细明体，阅读区用宋体。取消斜体字。
2、美化侧栏，主要是针对粗大的侧栏标题字。
3、调整阅读区为500px宽，并加大行距。


进入 userstyles.org 安装这个 Stylish 样式(可用 Greasemonkey 方式加载)。

# 注：Stylish 是一个 Firefox 插件，作用是自定义网站和用户界面的样式。

update： 你们觉得低科技也好，没有技术含量也好，都没所谓；你可以不喜欢，但是请不要出言讽刺。修改 CSS 本来就没有什么技术含量，只是纯个人喜好。关于修改后英文字不好看之说，已替换下面的 PMingLiU 为微软雅黑。

下面贴上这个 stylish 的源码，可以直接在 stylish 里添加或者根据自己需要修改

/* Revised by sein */
@-moz-document url-prefix(https://www.google.com/reader/), url-prefix(http://www.google.com/reader/) {

/* 所有链接改为统一的蓝色，取消下划线 */
.read .entry-container .entry-title a,.read .entry-container a.entry-source-title,.read .entry-container .entry-body a,.read .entry-container .entry-via-link,.read .entry-container .entry-annotation-author-link,.read .entry-container a.entry-post-author-name{color:#1010c8 !important;text-decoration:none !important;}.entry-source-title-link{color:#1010c8 !important;}

/* 取消左栏未读的加粗 */
.scroll-tree li a .name-unread{font-weight:normal !important;color:#1010c8 !important;}

/* 左栏已读字体改为黑色 */
.scroll-tree .name{color:#000 !important;text-decoration:none !important;}

/* 定义字体为12号，设置基本字体为微软雅黑，加大行距 */
body,html{font-family:微软雅黑 !important; font-size:12px !important;line-height: 150% !important;}

/* 正文区改500宽度，使用宋体或微软雅黑阅读 */
.entry .entry-body,.entry .entry-title{max-width:500px !important;font-family:simsun, 微软雅黑 !important; }

/* 标题改小点 */
h2{font-size:14px !important;}

/* 取消斜体字 */
.entry-annotation-body{font-style:normal !important;}
.recent-stream-title{font-style:normal !important;}

}

调整前后的界面对比：

首页
[-]

[-]

阅读页
[-]

[-]

给这篇稿打赏，让译者更有动力
支付宝打赏 [x]
您的大名： 打赏金额：
0.0
赞一个 (0)

TOTAL COMMENTS: 32+1

  1. oioi
    @10 years ago
    173301

    你的技术贴真有技术含量

    [投诉] [1] XX [0] 回复 [0]
  2. 鬼作
    @10 years ago
    173313

    这篇的重点是在后面的新闻吧。。。

    [投诉] [0] XX [0] 回复 [0]
  3. oioi
    @10 years ago
    173318

    @鬼作: 我也这样认为

    [投诉] [0] XX [0] 回复 [0]
  4. 耗子小三
    @10 years ago
    173321

    新闻很猛很爆料～～～

    [投诉] [0] XX [0] 回复 [0]
  5. none
    @10 years ago
    173330

    说实话改的真难看
    不觉得宋体的英文很丑吗

    [投诉] [0] XX [0] 回复 [0]
  6. ooxx
    @10 years ago
    173336

    这个改动……也太边缘了吧.
    重点果然是新闻

    [投诉] [0] XX [0] 回复 [0]
  7. xing
    @10 years ago
    173345

    一直用google reader ，订阅了大概200左右的博客

    [投诉] [0] XX [0] 回复 [0]
  8. fisio
    @10 years ago
    173347

    我也以生在这个国家为耻

    看看这些杀人的畜生。。。

    [投诉] [0] XX [0] 回复 [0]
  9. 性
    @10 years ago
    173348

    注意到了新功能，不过，我还是希望，能在简介点

    [投诉] [0] XX [0] 回复 [0]
  10. 搞怪天后
    @10 years ago
    173350

    本来就丑，现在更丑了！

    [投诉] [0] XX [0] 回复 [0]
  11. Yacca
    @10 years ago
    173355

    sein童鞋很有心

    [投诉] [0] XX [0] 回复 [0]
  12. ck
    @10 years ago
    173360

    真的很有技术含量啊

    [投诉] [0] XX [0] 回复 [0]
  13. bayman
    @10 years ago
    173365

    以作中国人为耻!!!
    这些悲哀的事情似乎没有尽头!

    [投诉] [0] XX [0] 回复 [0]
  14. leeo
    @10 years ago
    173369

    典型的画蛇添足，而且是哥斯拉怪兽之足。

    [投诉] [0] XX [0] 回复 [0]
  15. sayman2002
    @10 years ago
    173374

    看了技术帖最重要的技术含量，无语中。。。
    小小生命都不放过, 强权阶层对弱势群体尤其狠毒！

    [投诉] [0] XX [0] 回复 [0]
  16. sein
    @10 years ago
    173375

    @none: 那个不是宋体的英文，是 Pmingliu 的英文。

    因为 GR 基本字体设的很大，所以 GR 首页的小字没有问题。现在改小了基本字体，我就换上11px 也能清晰显示汉字的 Pmingliu 了替代基本字体，同时特地设定内容区字体为习惯性的宋体。其实基本字体用微软雅黑可能就没有你说的英文难看的问题，只是很多显示器如果不开clear type 的话，微软雅黑的小字看起来很恐怖。

    @搞怪天后: 你要这么说我也没办法

    @Yacca: 谢谢 :P

    @ck: 是没技术含量，但是是个麻烦事儿。GR 的 CSS 里的定义有上千个，把有效的找出来修改，我容易吗？

    @leeo: 你爱怎么看怎么看吧

    [投诉] [0] XX [0] 回复 [0]
  17. 残念男
    @10 years ago
    173376

    无论如何，没有功劳也有苦劳。

    话说回来，还是修改前的好看。

    至于新闻，确实是喧宾夺主了。

    [投诉] [0] XX [0] 回复 [0]
  18. GaRY
    @10 years ago
    173377

    装个better Greader.
    里面的几个skin也挺不错的

    [投诉] [0] XX [0] 回复 [0]
  19. 南 靖男
    @10 years ago
    173404

    我用的 better Greader 的 OS X Style
    另外，我的 userstyles.org 密码丢了。。。。

    [投诉] [0] XX [0] 回复 [0]
  20. Mark
    @10 years ago
    173513

    真实含蓄的一篇新闻贴啊……

    [投诉] [0] XX [0] 回复 [0]
  21. s
    @10 years ago
    173517

    依葫..瓢了一个

    [投诉] [0] XX [0] 回复 [0]
  22. Davidj
    @10 years ago
    173527

    NOTE是亮点~
    楼上的界面不错~

    [投诉] [0] XX [0] 回复 [0]
  23. hellodog
    @10 years ago
    173556

    楼上的说的是

    [投诉] [0] XX [0] 回复 [0]
  24. wensl
    @10 years ago
    173625

    @sein: 请问，您有细明体（pmingliu）粗体的turetype字体么？我找了很久，如果有能发到我的邮箱么？kurosumi#sina.com
    谢谢！

    [投诉] [0] XX [0] 回复 [0]
  25. melodyue
    @10 years ago
    174386

    我觉得修改后的很好看。已经装了~~sein做的好！很为大家考虑呢

    [投诉] [0] XX [0] 回复 [0]
  26. sein
    @10 years ago
    174388

    @melodyue: 谢谢…… T__T

    [投诉] [0] XX [0] 回复 [0]
  27. just。魔王
    @10 years ago
    175057

    豆瓣很强大··

    [投诉] [0] XX [0] 回复 [0]
  28. Sinya
    @10 years ago
    175096

    真的吗……太残忍了……

    所有在计生部门工作的人都会下地狱……

    [投诉] [0] XX [0] 回复 [0]
  29. bell
    @10 years ago
    176955

    我想问一下，怎么把1000＋这个限制去掉的？

    [投诉] [0] XX [0] 回复 [0]
  30. sein
    @10 years ago
    176956

    @bell: 安装一个叫 google reader unread count 的猴子脚本即可

    [投诉] [0] XX [0] 回复 [0]
  32. ytzong
    @9 years ago
    242613

    试试我写的，支持最新版的google reader
    http://userstyles.org/styles/14058

    [投诉] [0] XX [0] 回复 [0]

发表评论


24H最赞

▲