页面

2011年8月20日

自定义的Google Plus界面

前言

本来只是想用自定义CSS把Google Plus的硬又黑工具条固顶的(目前的硬又黑工具条已经固顶了,不需要写CSS),写着写着,索性添加背景图吧,老是对着那默认的白色背景很单调,于是便有了这个界面。

修订记录

  1. 2011-8-24 17:20
    • fix:修复因Google Plus修改了CSS类名而不能使用的问题。
  2. 2011-8-25 19:10
    • add:增加了Firefox下的Stylish代码。
  3. 2011-8-30 9:00
    • fix:修复因Google Plus修改了CSS类名而不能使用的问题。
    • fix:移除硬又黑工具条固顶的CSS代码。
    • add:增加了宽屏CSS代码。

截图

Chrome下的截图

Firefox下的截图

修改Google Plus界面

使用到的工具

  • Stylish(Chrome | Firefox
  • 若干行CSS代码
    • for Chrome
      /* 背景图 */
      #content {
        background:url("http://<图片URL地址>") no-repeat fixed;
      }
      .c-r-C-Eb-jc,
      .c-r-P-V-wk-Eb,
      .gi{background-color:rgba(252,252,252,0.4)!important;}
      
      /* 圈外消息 */
      .LG{display:none;}
      
      /* 信息流 单栏宽屏式 适用于1920x1080分辨率 */
      .c-C{width:1508px!important;}
      .c-r-P-V-wk-Eb{width:1118px!important;}
      .mA{width:1018px!important;}
      .iA{width:1118px!important;}
      
    • for Firefox
      @namespace url(http://www.w3.org/1999/xhtml);
      
      @-moz-document domain("plus.google.com") {
      
      /* 背景图 */
      #content {
      background:url("http://<图片URL地址>") no-repeat fixed;
      }
      .c-r-C-Eb-jc,
      .c-r-P-V-wk-Eb,
      .gi{background-color:rgba(252,252,252,0.4)!important;}
      
      /* 圈外消息 */
      .LG{display:none;}
      
      /* 信息流 单栏宽屏式 适用于1920x1080分辨率 */
      .c-C{width:1508px!important;}
      .c-r-P-V-wk-Eb{width:1118px!important;}
      .mA{width:1018px!important;}
      .iA{width:1118px!important;}
      }
      

注意:当使用背景图时,图片的分辨率最好大于或等于你的桌面分辨率,否则当最大化浏览器窗口后会出现不协调的现象=。=

全文完

没有评论:

发表评论