新版 Google Reader 的一个基础模板

注意:这不是一个成品,而仅仅是一个基础模板,实际使用时仍需自己调整。
下载:GReader_SimpleGray.zip (v1.3)
历史版本:GReader_SimpleGray(历史版本)

新版的 Google Reader 实在没法看,于是自己动手改了下。主要修改掉了那大片的白色区域(必须的 = =)以及加大了阅读区域(还是必须的 = =),因为是以自用的原则来修改的,而且布局也改变了,所以不免会有些问题,请谅解。如果喜欢这样的风格与排版的,可以将此作为一个简单的基础的模版继续改下去。

大体上样子就是下面这样的:

关于该 CSS 的说明:

  • 这个 CSS 是按着分辨率为 1920 x 1080 来修改的。
  • 订阅的列表以及阅读区域不能自动适应到窗口高度,因此需要下面两个值:
    /* 条目列表高度 */
    body.loaded #scrollable-sections
    {
    	height: 971px !important;
    }
    /* 内容区域高度 */
    body.loaded #viewer-entries-container
    {
    	height: 966px !important;
    }
  • 搜索框与供稿设置工具栏放在了同一行上,分辨率够宽的只需调整下面值即可,而分辨率不够的还需要自行安排搜索框的位置。
    /* 搜索框位置与大小 */
    body.loaded>#gb #gbq
    {
    	width: 352px !important;
    }
    body.loaded #gbq
    {
    	left: 1460px !important;
    }
  • “+1″、”G+” 按钮和加载时的小红点:
    /* +1、g+ 按钮 */
    body.loaded .card-common .item-plusone,
    body.loaded .card-common .sharebox
    ......
    /* loading 小圆钮 */
    body.loaded #activity-indicator
    ......
  • 因为 Opera 的站点首选项只能接受域名字串,而 GR 跟搜索页面都用 www.google.com 域名,站点首选项中无法将两者区分开来(顺便吐槽下这点),因此 CSS 每一个选择器前,最好加上 body.loaded,例如选择 Logo:
    body.loaded #logo-container

    而非 Opera 用户,要将 CSS 中的 body.opera.loaded 批量删除掉,而使用其他更好的方法,如 firefox 中的私有属性 @-moz-document

Fred Hughes makes the best dressed list of 1974
cartola fc wolverine 1000 mile resole end results

While the Server is down
cartola fc Ascena Retail has taken acquired brands

Two nights of fashion at Christian Fashion Week Tampa
jogos de vestir apparel jogging shoes ladies

Wholesale Fashion Clothing Sold at Economic Prices
transformice The measurements can differ a little

8 Characters You Won’t Believe Are Based on Real People
youjizz I am not just saying this out of bias

Fashion Designing Game for Kids
rape porn but don know any details

OPPORTUNITIES FOR PAKISTAN IN AIR
anime porn It doesn’t seem to be just the prices

Why Mattel Continues To Dominate The Dolls Category
quick weight loss followed by the new fashion reality show STYLISTA

《新版 Google Reader 的一个基础模板》上有24条评论

    1. Google 许多页面都使用 http://www.google.com ,这样,Opera 的站点首选项无法区别是搜索页面还是 GR 页面。 GR 的 body 有个特殊的 class:.loaded。
      写上可以避免 Google 的其他页面也被这个 CSS 窜改。

      1. 第一次試的時候沒效,還以為是有什麼問題

        後來才發現Google.com.tw被我識別成FX了,class變成單純的.loaded,
        沒有opera前綴,難怪沒有效果

        1. 这点倒没有想到。本来还想着多一点限制就少一点误伤,看来这么做还是不大妥呢 = =

          1. 有沒有那個.opera應該是沒什麼影響…

            去掉.opera,不管有無識別/偽裝成FX/IE,都能夠生效
            所以還是去掉吧 🙂

  1. 😆 很不错,谢谢分享。
    1440*900分辨率
    [code]/* 搜索框位置 */
    body.opera.loaded #search
    {
    left: 1450px !important;
    }[/code]
    1450px改为966px完美显示

    1. 1080 的分辨率,放大 125% 也是挺好改的啦,不过用扩展也不错,省了不少麻烦事 😀

  2. 正文部分的一点小建议,可根据个人口味选择是否使用
    在body.loaded #entries部分添加:
    line-height: 1.5em;
    text-indent:2em;

    效果是增加正文的首行缩进和行间距

  3. /*
    * Google Reader Templet – Simple Gray Style
    *
    * Author : yansyrs
    * Version : v1.0 @ 2011.11.06
    * Description : 这仅仅是一个样板,实际使用时仍需自己细调。
    */

    @namespace url(http://www.w3.org/1999/xhtml);

    @-moz-document url-prefix(“http://www.google.com/reader/view/”),url-prefix(“https://www.google.com/reader/view/”),url-prefix(“http://www.google.fi/reader/view/”),url-prefix(“https://www.google.fi/reader/view/”) {

    /* 条目列表高度 */
    #scrollable-sections
    {
    height: 971px !important;
    }
    /* 内容区域高度 */
    #viewer-entries-container
    {
    height: 966px !important;
    }
    /* 搜索框位置 */
    #search
    {
    left: 1450px !important;
    }

    /* ————————- body & html ————————–*/

    {
    background-color: rgb(220, 220, 220) !important;
    }
    /* ———————- body & html end ———————–*/

    /* ————————– 用户信息栏 ————————–*/
    #gb,
    #guser,
    #gbar,
    .gbh
    {
    display: none !important;
    }
    /* ———————— 用户信息栏 end ————————*/

    /* —————————- logo ——————————-*/
    #logo-container
    {
    display: none !important;
    }
    /* ————————– logo end —————————–*/

    /* ———————— loading 文本信息 ————————*/
    #loading-area
    {
    background-color: rgb(200, 200, 200) !important;
    border: none !important;
    padding: 2px 16px 2px 16px !important;
    height: 25px !important;
    }
    /* ——————— loading 文本信息 end ———————-*/

    /* —————————– 搜索框 —————————–*/
    #top-bar
    {
    position: absolute !important;
    }
    #search
    {
    position: absolute !important;
    z-index: 11 !important;
    min-width: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
    top: 3px !important;
    width: 480px !important;
    }
    #search>#search-input
    {
    background-color: rgb(240, 240, 240) !important;
    border-radius: 5px !important;
    width: 200px !important;
    height: 25px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    }
    #search .search-restrict
    {
    width: 100px !important;
    height: 25px !important;
    }
    #search>#search-input:focus,
    #search .search-restrict:focus
    {
    border: 1px solid gray !important;
    }
    #search>div[role=”button”],
    #search>div[role=”button”]:hover
    {
    background-color: rgb(200, 200, 200) !important;
    background-image: none !important;
    border: none !important;
    height: 27px !important;
    }
    #search>div[role=”button”]>img
    {
    margin-top: 3px !important;
    }
    /* ————————— 搜索框 end —————————*/

    /* —————————— 左侧栏 ——————————*/
    /* 左侧栏整体效果 */
    #main>#nav
    {
    width: 230px !important;
    border-right: 1px solid gray !important;
    box-shadow: 0px 0px 2px gray !important;
    background-color: rgb(200, 200, 200) !important;
    }
    #scrollable-sections-holder *
    {
    border: none !important;
    }
    #scrollable-sections *
    {
    background-color: rgb(240, 240, 240) !important;
    }
    /* 订阅按钮 */
    #lhn-add-subscription-section
    {
    height: 25px !important;
    width: 100% !important;
    }

    #lhn-add-subscription
    {
    height: 25px !important;
    margin-left: 0px !important;
    width: 100% !important;
    padding: 0px !important;
    border: none !important;
    background-color: rgb(180, 180, 180) !important;
    background-image: none !important;
    }
    #main>#chrome
    {
    margin-left: 234px !important;
    }

    /* 滚动时的线条 */
    #scrollable-sections-top-shadow,
    #scrollable-sections-bottom-shadow
    {
    display: none !important;
    }

    /* 条目列表 */
    #scrollable-sections > *
    {
    padding: 0px !important;
    margin: 0px !important;
    }
    #home-section>#overview-selector
    {
    padding-left: 20px !important;
    border: none !important;
    }
    #lhn-selectors .selector
    {
    padding-left: 20px !important;
    }
    .folder .name.name-d-0
    {
    padding-left: 20px !important;
    }
    #sub-tree-header
    {
    padding-left: 20px !important;
    }
    .section-minimize
    {
    left: 3px !important;
    }
    .folder .folder .folder-toggle
    {
    margin-left: 15px !important;
    }
    .folder .folder > a > .icon
    {
    margin-left: 30px !important;
    }
    .folder .folder > ul .icon
    {
    margin-left: 40px !important;
    }
    .folder .folder .name-text
    {
    max-width: 140px !important;
    }
    .folder .sub-icon
    {
    margin-left: 30px !important;
    }
    .lhn-section-primary
    {
    height: 25px !important;
    line-height: 25px !important;
    }
    #lhn-selectors
    {
    height: 25px !important;
    }
    .scroll-tree li a
    {
    white-space: normal !important;
    }
    /* ————————— 左侧栏 end —————————*/

    /* —————————- 正文区域 —————————–*/
    /* 刷新、供稿按钮、上一个/下一个条目等元素 */
    #viewer-header
    {
    position: absolute !important;
    width: 1060px !important;
    height: 30px !important;
    margin: 0px !important;
    padding: 0px !important;
    left: 380px !important;
    z-index: 10 !important;
    background-color: rgb(220, 220, 220) !important;
    }
    /* 刷新按钮 */
    #viewer-refresh
    {
    display: none !important;
    }
    #viewer-view-options,
    #mark-all-as-read-split-button,
    #viewer-top-controls .goog-button
    {
    margin-right: 1em !important;
    }
    .goog-inline-block,
    .goog-inline-block:hover
    {
    height: 25px !important;
    line-height: 25px !important;
    background-color: rgb(240, 240, 240) !important;
    border-radius: 5px !important;
    }
    #message-area-container .goog-inline-block
    {
    height: auto !important;
    line-height: normal !important;
    border-radius: 0px !important;
    background-color: transparent !important;
    }
    .goog-flat-menu-button-dropdown,
    .goog-flat-menu-button-dropdown:hover
    {
    height: 5px !important;
    }
    .goog-button-base-content
    {
    padding-top: 4px !important;
    }
    #chrome-view-links
    {
    background-color: rgb(220, 220, 220) !important;
    }
    #chrome-view-links img,
    #item-up-down-buttons img
    {
    margin-top: 2px !important;
    }
    /* 标题及条目位置调整 */
    #title-and-status-holder
    {
    position: absolute !important;
    z-index: 10 !important;
    top: 0px !important;
    width: 150px !important;
    }
    #title-and-status-holder>#viewer-single-parent
    {
    position: absolute !important;
    left: 157px !important;
    width: 290px !important;
    text-align: left !important;
    }
    #title-and-status-holder>#chrome-title
    {
    width: 150px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    }
    #main
    {
    position: static !important;
    }
    #viewer-entries-container
    {
    margin-top: 30px !important;
    position: static !important;
    background-color: rgb(220, 220, 220) !important;
    }
    /* 登录后的首页部分 */
    #chrome.page-view #viewer-page-container
    {
    background-color: rgb(240, 240, 240) !important;
    }
    /* 正文条目 */
    #no-entries-msg
    {
    background-color: rgb(240, 240, 240) !important;
    }
    #entries
    {
    border: none !important;
    padding: 1px !important;
    }
    #entries>.entry
    {
    padding: 1px !important;
    background-color: rgb(220, 220, 220) !important;
    }
    #entries>.entry .card,
    #entries.search > .entry.read
    {
    border: 2px solid rgb(200, 200, 200) !important;
    border-radius: 7px !important;
    background-color: rgb(240, 240, 240) !important;
    }
    #entries>#current-entry .card
    {
    border: 2px solid gray !important;
    border-radius: 7px !important;
    }
    .entry .entry-body,
    .entry .entry-title,
    .entry .entry-likers
    {
    max-width: 80% !important;
    }
    /* 正文条目列表模式 */
    #entries.list > .entry > .collapsed
    {
    height: 18px !important;
    }
    /* 搜索结果列表 */
    #entries.search > .entry.read
    {
    padding: 5px 10px 5px 10px !important;
    }
    #chrome.search-stream #entries.search .entry-secondary-snippet
    {
    max-width: 80% !important;
    }
    /* 加注星标、+1 一栏 */
    .card-common .card-actions
    {
    padding: 1px !important;
    margin: auto 10px 3px auto !important;
    }
    .card-common .card-actions
    {

    }
    /* loading 小圆钮 */
    .loading-more-items-dialog
    {
    display: none !important;
    }
    /* ————————- 正文区域 end —————————*/

    /* ————————— 弹出菜单 ——————————*/
    .goog-menuitem,
    .goog-tristatemenuitem,
    .goog-filterobsmenuitem,
    .goog-menuitem:hover,
    .goog-tristatemenuitem:hover,
    .goog-filterobsmenuitem:hover
    {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    border: none !important;
    }
    /* ———————— 弹出菜单 over —————————-*/

评论已关闭。