[交流] Yuki`s GoogleReader [2012.4.8更新]

tyjk

主要是把界面布局弄得紧凑一点。
另外，查看原文按钮移动到左侧；改了一些颜色；搜索框缩小放到黑长直的导航栏上；黑长直改成了白长直；字体改大了一些；隐藏了logo、上下条目按钮之类无聊的东西；可选显示/隐藏/自动隐藏顶部导航栏；全部已读按钮加了颜色；等等。
-------------------------------
安装地址：http://userstyles.org/styles/55639
--------------------------------

更新记录

wozzl

天涯哥太强大了 爱死你了

jlczar

给力君！

jenco

这个不错

holo

大萌神给力

tyjk

再附一个没有改颜色的，似乎配色改得太糟糕。。。
在副总改的基础上又删了一些：

1. @namespace url(http://www.w3.org/1999/xhtml);
   
2. @-moz-document url-prefix("http://www.google.com/reader"), url-prefix("https://www.google.com/reader"){
   
3. /*隐藏*/
   
4. #logo-section,#logo{display:none!important;}
   
5. #top-bar{height:0px!Important;}
   
6. #title-and-status-holder{display:none!Important;}
   
7. #item-up-down-buttons{display:none!Important;}
   
8. /*隐藏横向滚动条*/
   
9. #main {overflow-x: hidden!important; }
   
10. /*导航栏底部阴影*/
    
11. #scrollable-sections-bottom-shadow
    
12. {display:none!important;}
    
13. /*订阅按钮*/
    
14. #lhn-add-subscription-section
    
15. {height:30px!important;
    
16. border:none!important;}
    
17. #lhn-add-subscription{
    
18. height:29px!important;
    
19. width:120px!important;
    
20. margin: -16px 0 0px 40px!important;}
    
21. /*搜索框位置*/
    
22. #search{
    
23. position:absolute!important;
    
24. right:-300px!important;
    
25. top:3px!Important;
    
26. z-index:2!important;
    
27. padding:0!important;;}
    
28. #chrome-view-links
    
29. {position:fixed!Important;
    
30. z-index:3!Important;
    
31. right:-5px!Important;
    
32. }
    
33. /*搜索位置下拉按钮*/
    
34. .goog-inline-block.goog-flat-menu-button.search-restrict{
    
35. height:20px!important;
    
36. width:70px!important;
    
37. padding:0px!important;
    
38. margin-top:2px!important;}
    
39. .goog-inline-block.goog-flat-menu-button.search-restrict .goog-inline-block.goog-flat-menu-button-caption
    
40. {top:-3px!Important;
    
41. left:-3px!Important;}
    
42. .goog-inline-block.goog-flat-menu-button.search-restrict .goog-inline-block.goog-flat-menu-button-dropdown
    
43. {top:10px!Important;}
    
44. /*搜索输入框*/
    
45. #search-input{
    
46. height:20px!important;
    
47. width:80px!important;
    
48. margin:1px -15px 0 0!important;}
    
49. /*隐藏搜索按钮*/
    
50. #search .goog-inline-block.jfk-button.jfk-button-action
    
51. {display:none!important;}
    
52. /*隐藏当前订阅项标题*/
    
53. #chrome-title{display:none!important;}
    
54. /*文章底部的功能栏*/
    
55. .entry-actions {
    
56. padding:0px!Important;
    
57. font-size:1em!important;}
    
58. .entry-actions .item-star.star.link.unselectable,
    
59. .entry-actions .item-star-active.star.link.unselectable
    
60. {margin:0 0 -3px 3px!important;}
    
61. /*+1按钮*/
    
62. .item-plusone
    
63. {position:relative!important;
    
64. top:3px!important;}
    
65. /* 不限制文章宽度 */
    
66. #entries .entry-body,.entry .entry-title
    
67. {max-width: none !important; }
    
68. /* 左侧导航栏 */
    
69. #nav,#nav * {max-width: 195px !important;}
    
70. #nav{margin-left:-20px!Important; }
    
71. #chrome {margin-left: 175px !important; }
    
72. /* 强调当前条目 */
    
73. #current-entry > DIV:first-child > DIV:last-child > DIV > H2
    
74. {font-size:11pt!important;font-weight:bold!important;}
    
75. /*设置文章的字体大小*/
    
76. .snippet{font-size:10pt!important;}/*摘要*/
    
77. .entry-title{font-size:10pt!important;}/*标题*/
    
78. .entry-main{font-size:12pt!important;}/*正文*/
    
79. /*紧凑列表*/
    
80. #entries.list .entry .collapsed{ padding:0px!important;}
    
81. #entries.list .collapsed .entry-secondary  { top:0px !important;}
    
82. #entries.list .collapsed .entry-main .entry-source-title  { top:0px !important;}
    
83. #entries.list .collapsed .entry-main .entry-original{ top:3px !important;}
    
84. #entries.list .collapsed .entry-icons{ top:0px !important;}
    
85. #entries.list .entry .collapsed{ line-height:3ex !important;}
    
86. /*紧凑导航栏*/
    
87. .lhn-section-primary  { line-height:20px !important;}
    
88. .scroll-tree li.folder .link, .scroll-tree li.sub{ height:18px !important;}
    
89. #reading-list-unread-count{margin-top:0px!Important;}
    
90. /*供稿设置按钮*/
    
91. #stream-prefs-menu .goog-button-body{font-size:8pt!Important;}
    
92. /*分隔线*/
    
93. #entries{border-left:2px grey solid !Important;
    
94. border-top:1px #EBEBEB solid!important;}
    
95. /*操作栏*/
    
96. #viewer-header-container{height:30px!important;}
    
97. #viewer-top-controls{margin-top:-23px!Important;}
    
98. /*空白*/
    
99. #entries{padding:0 0 12px 0!important;}
    
100. /*移动查看原文按钮到左侧*/
     
101. .entry-secondary{left:20px!important;}
     
102. .entry-source-title{left:40px!important;}
     
103. .entry-original{
     
104. left:20px!important;
     
105. top:3px!important;}
     
106. .item-star.star.link.unselectable.empty,.item-star-active.star.link.unselectable.empty
     
107. {position:absolute!Important;
     
108. left:0px!important;
     
109. top:0px!Important;}
     
110. .entry-title-link{
     
111. margin-left:35px!Important;}
     
112. }

复制代码

cmlx

再附一个没有改颜色的，似乎配色改得太糟糕。。。
在副总改的基础上又删了一些：@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://www.google.com/reader"), url-prefix("https:// ...
tyjk 发表于 2011-11-2 21:12

相当不错，对比userstyle上所有的新版css，这个最给力，微调一下subscribe按钮大小，锁定这个了

fromeast

我也来贴我做的CSS脚本：
http://userstyles.org/styles/555 ... hange-the-interface
这个用来改界面
http://userstyles.org/styles/55575/google-reader-custom-color
这个用来改颜色

dindog

不错哦。一点建议。把名字改改，换个英文名。方便搜索和老外

tyjk

9# dindog

帮忙想个哩~~

cmlx

微调以后基本满足所有要求了，就是f模式和u模式不能保持没有加载css的样子，有办法吗？

dindog

9# dindog

帮忙想个哩~~
tyjk 发表于 2011-11-2 23:16

我英文不好。。。好难想的说

现在白色太闪了，不习惯，搞了个好难看的暗色

1. @namespace url(http://www.w3.org/1999/xhtml);
   
2. 
   
3. @-moz-document url-prefix("https://www.google.com/reader/") {
   
4. /*侧栏暗色*/
   
5. #lhn-subscriptions{background:gray!important;}
   
6. #recommendations-tree-container li,.lhn-section-footer{background:gray!important}
   
7. #nav,#lhn-selectors,#recommendations-tree-container li,#lhn-subscriptions ul>li{background:lightgray!important}
   
8. 
   
9. 
   
10. /*正文背景色*/
    
11. .entry,.entry>*{background:#CCCCCC!important}
    
12. .entry .card{border-style:none!important}
    
13. .entry{border:1px solid lightblue!important;
    
14. -moz-border-radius:8px!important;}
    
15. /*分享工具栏*/
    
16. .entry .card-bottom{border:1px solid #c0c0c0!important;
    
17. -moz-border-radius:4px;
    
18. background-color:#f0f0f0!important;
    
19. }
    
20. 
    
21. /*当前正文的背景色*/
    
22. #current-entry {border:2px solid dimgray!important;
    
23. -moz-border-radius:8px!important;}
    
24. #current-entry,#current-entry>*{background:#F0f0FF!important;}
    
25. #current-entry .entry-title>*{color:black !important;font-size:1.2em!important;}
    
26. /*分享工具栏*/
    
27. #current-entry .card-bottom{border:1px solid #dbdbdb!important;
    
28. -moz-border-radius:4px;
    
29. background-color:#fafafa!important;}
    
30. 
    
31. 
    
32. }

复制代码

fromeast

11# cmlx

看我8楼贴的脚本，应该能满足要求

fromeast

12# dindog
是啊，我一直把背景色改成淡蓝色的

holo

6# tyjk

点击阅读完条目后, 不会由粗体变为不加粗状态

鱼魚漁

http://userstyles.org/styles/14058/google-reader
ytzong的精简脚本更新了，还原以前的配色，不喜欢现在配色的人可更新

zhanin

http://userstyles.org/styles/14058/google-reader
ytzong的精简脚本更新了，还原以前的配色，不喜欢现在配色的人可更新
soloyu 发表于 2011-11-3 10:42

还是以前的配色看着舒服啊，目前新版的配色很恶心，看着挺难受的，家里大屏幕不需要紧凑版，上班的电脑小屏，再换用LZ这个

zhanin

发现LZ的CSS有个问题：


右边的三个按钮 按了没反应

另外：


这里该改哪里才能把分隔线右边的内容整体往右移一些



这里的间隔留有太多空白了，该怎改才能调小一些？？

wozzl

12# dindog
是啊，我一直把背景色改成淡蓝色的
fromeast 发表于 2011-11-3 02:42

能不能麻烦你写个CSS,把所有页面的背景颜色都改成你写的那个google的CSS样式?

tyjk

18# zhanin

1.因为你自己又改过了吧，我的是正常的。不知道你怎么改的。
2.加一句

1. #entries{padding-left:10px!important;}

复制代码

3.先用这个吧：

1. #entries.list .entry-secondary{margin:0 0 0 120px!Important;}

复制代码

但是在单个订阅（不是直接查看整个文件夹的时候）反而会添加上个空白。
再想想看吧。。。

PS：既然搜索栏又拿到下面来了，可以试试把z-index:4444!important;删掉。

tyjk

15# holo
把这一段里的font-weight:bold!important;去掉。

1. /* 强调当前条目 */
   
2. #current-entry > DIV:first-child > DIV:last-child > DIV > H2
   
3. {font-size:11pt!important;font-weight:bold!important;}

复制代码

zhanin

20# tyjk

第一项的按钮 失效问题，我完全照你6楼给出的CSS，丝毫没改动过

第二项的内容是往右移了，但分隔线还原地不动。。。我想让分隔线也一起跟着移

holo

1. /*搜索按钮覆盖全文和列表按钮*/
   
2. #search .goog-inline-block.jfk-button.jfk-button-action
   
3. {left:-14px!important;}

复制代码

搜索按钮有用加星的条目都是从这个地方进入的

tyjk

22# zhanin

1.我把六楼的代码改了，你再试试看。
话说我的怎么没有放大镜按钮。。。

2.那就是改导航栏的宽度吧。自己改代码里这段的几个数字。

1. /* 左侧导航栏 */
   
2. #nav,#nav * {max-width: 195px !important;}
   
3. #nav{margin-left:-20px!Important; }
   
4. #chrome {margin-left: 175px !important; }

复制代码

zhanin

22# zhanin

1.我把六楼的代码改了，你再试试看。
话说我的怎么没有放大镜按钮。。。
26055
2.那就是改导航栏的宽度吧。自己改代码里这段的几个数字。/* 左侧导航栏 */
#nav,#nav * {max-width: 195px !important; ...
tyjk 发表于 2011-11-3 21:07

你这CSS第49行那里把放大镜的按钮给隐藏了。。。你看到我图片里的这个放大镜 原本也是不存在的，只有 搜索了之后 才会出现，再者这个放大镜按了也是无效的，只有把49行的代码给取消掉，才能真正使用，我图片里的那个只能形同虚设。灵异~~~

tyjk

25# zhanin

原来如此~~

ffpro

那个放大镜的图标好像就是显示不出来，但是下载到本地又可以看到

holo

25# zhanin

原来如此~~
tyjk 发表于 2011-11-3 23:05

记得以前打开一篇文章后, 即使你下拉了, 标题还是置顶在最上面的, 这个是CSS达到的效果吗?
现在的往上会被覆盖.

tyjk

28# holo

哪个标题？

tyjk

2011.11.04更新：
改了几个地方，主要是导航的地方，改善了U模式和F全屏模式下的效果，U大概没什么问题了，F的时候顶部还是有块空白。
其它的这两天零零散散好像也改了几个地方，都忘了。