不仅仅是自定义 CSS 了，看看更强的 V2EX 界面方案吧！

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3564 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近看大家分享了不少很棒的自定义CSS，都很有意思。

直到看到了 V2EX Next 项目 https://dribbble.com/shots/1355911-V2EX-Next

我才反应过来，原来自己都陷在思维的桎梏里面了。

于是花了大概一个下午实现了一个类似的效果，做成了chrome插件的形式：

#v2ex.k
-----------

github | https://github.com/kokdemo/v2ex.k
------------- | -------------
chorme商店地址 | https://chrome.google.com/webstore/detail/v2exk/dnbmbhefokngmkalbdcgjdlgoppfhndn

##功能特性：

1. 全新的界面颜色。
2. 左侧导航栏。
3. 快速阅读模式。

##截图：

主界面

主界面-更多效果

主界面-快速阅读模式

二级界面-快速阅读模式

##要说的话：

除了界面的大致样式是借鉴V2EX Next项目之外，这里面的很多CSS来自于LIGHTER项目。
http://www.v2ex.com/t/168103 感谢 @jkjoke 同学

也欢迎大家使劲的提建议和意见。

才发现markdown模式和网址贴图不能共存……

##接下来要做的：

+ V2EX Next项目有个特别亮眼的功能是夜间模式，我打算接下来实现一下，目前打算根据太阳下山的时间来自动切换夜间模式……
+ 右上角的那个搜索框太丑了……得想个办法解决掉。
+ 把提醒也做到左边快捷栏上。

第 1 条附言 · 2015-02-07 22:37:08 +08:00

更新0.0.3版本：

1. 左侧添加未读提醒
2. 自定义颜色设置具体如下

.k_color_dark{
background-color: #3C7300;/*主要导航条颜色*/
}

.k_color_light{
background-color: #5CB000;/*次级导航条颜色*/
}

.k_color_node{
background-color: #B9D998;/*小标签背景颜色*/
}

#Wrapper.k_color_background{
background-color: #E2F1D0;/*背景颜色*/
}

.k_color_hover:hover{
background-color: #2980B9;/*导航条放置变色*/
}

.k_color_item{
background-color: #FFF;/*列表项背景颜色*/
}

.k_color_choosen{
background-color: #eeeeee;/*被选择的列表项的背景颜色*/
}

第 2 条附言 · 2015-02-08 22:00:57 +08:00

0.0.5版本更新：

1. 修改了@branchzero提到的几个css覆盖问题，增加了一个新的自定义标签用于自定义显示回帖数目的颜色。具体颜色设置如下：

.k_color_dark{
background-color: #3C7300;/*主要导航条颜色*/
}

.k_color_light{
background-color: #5CB000;/*次级导航条颜色*/
}

span a.node.k_color_node{
background-color: #B9D998;/*小标签背景颜色*/
color: #FFF;
}

td a.count_livid.k_color_count{
background-color: #3C7300;/*回帖数目背景颜色*/
}

#Wrapper.k_color_background{
background-color: #E2F1D0;/*背景颜色*/
}

.k_color_hover:hover{
background-color: #2980B9;/*导航条放置变色*/
}

.k_color_item{
background-color: #FFF;/*列表项背景颜色*/
}

.k_color_choosen{
background-color: #eeeeee;/*被选择的列表项的背景颜色*/
}

2. 修复了未读显示错误的问题

ps：我正在研究ff插件制作……如果顺利的话，在睡觉之前把ff 0.0.5版本的插件发出来。

V2EX

界面

CSS

100 条回复 • 2015-02-10 19:20:55 +08:00

rainy3636

2015-02-07 18:49:06 +08:00

已用

kokdemo

2015-02-07 18:50:06 +08:00

@rainy3636 记得给点反馈……

thinkxen

2015-02-07 18:52:35 +08:00 via Android

不错哦

sunsol

2015-02-07 18:54:15 +08:00

配色不好看

yrom

2015-02-07 18:58:23 +08:00

快速阅读模式不能滚动的呀

loading

2015-02-07 19:00:06 +08:00

@yrom 快速阅读模式，同样不能滚。帖子不能滚，滚动还是主题列表。。。

osx chrome 38.0.2125.111（比较旧）

rainy3636

2015-02-07 19:01:28 +08:00

1、浅绿色看久了感觉刺眼，不知是不是我眼睛的问题
2、希望主页面的快速阅读改一下，当点击标题时直接进主题（现在是要先显示快速阅读），点击非标题任意区域开启快速阅读。不知能不能做到？非程序员，不了解。

loading

2015-02-07 19:08:35 +08:00

建议提供一个功能：

自定义css （这个v2ex也可以。）
自定义js（同时有选项提供是否停用你的内置js）

效果：方便大家折腾。

rainy3636

2015-02-07 19:11:25 +08:00

https://www.v2ex.com/t/home

Wy4q3489O1z996QO

2015-02-07 19:11:45 +08:00

快速阅读模式不能滚动 +1
另外快速阅读的时候，能把文章列表页中当前文章条目标注/变色一下吗？

kokdemo

2015-02-07 19:33:35 +08:00

@sunsol ……配色这个问题我也没有啥太好的方案……

@yrom
@loading
@romotc
快速阅读这个我本机上是没问题的……osx chrome 版本 40.0.2214.94 (64-bit)
待我找别的机器设置一下

@rainy3636
你反馈的这个bug我已经知道是为啥了……

@loading
自定义js和css范围有点大……我会考虑自定义颜色这种的

vimutt

2015-02-07 19:40:23 +08:00

快速阅读用鼠标中间点击然后拖动就可以滚动了

kokdemo

2015-02-07 19:45:38 +08:00

@vimutt ……这是一个bug，我只是想把滚动条收起来……没想到在其他平台上都不能滚动了……

Jreen

2015-02-07 19:55:39 +08:00

建议支持自定义颜色，这个颜色太亮了。

ericdiao

2015-02-07 19:57:56 +08:00

求ff版~

233

2015-02-07 20:00:13 +08:00

已用，不过改了下颜色，感觉太扎眼了

kokdemo

2015-02-07 20:00:29 +08:00

@Jreen
可以这样自定颜色，在v2ex的设置的自定义css里，找两个颜色覆盖掉原有的这两个，其中k_navbar是左侧的导航条，k_tabbar是二级导航条，以下是示例：

#k_navbar{
background-color: yellow;
}
#k_tabbar{
background-color: red;
}

kokdemo

2015-02-07 20:06:05 +08:00

@yrom
@loading
@romotc
@rainy3636
你们反馈的bug我已经做了修正，感谢你们的反馈

@233 我把绿色稍微调整了一下，现在应该好一些了

233

2015-02-07 20:26:22 +08:00

@kokdemo 该怎么开启更快速阅读模式呢

kokdemo

2015-02-07 20:28:00 +08:00

@233 点击帖子链接旁边的空白……

看来这个设计不够好……

jason52

2015-02-07 20:39:35 +08:00

有点类似于孢子响马的孢子社区

Wy4q3489O1z996QO

2015-02-07 20:40:24 +08:00

快速阅读里面鼠标移上楼层用户头像和 @xxx 没有浮动提示了。

如果能把https://github.com/jkeylu/v2ex.ext 的功能也加上就更赞了

kokdemo

2015-02-07 20:46:00 +08:00

@romotc 我解释一下哈，快速阅读模式实际上是在右边放了一个iframe
浏览器的安全策略导致iframe不会直接受到当前页面上运行的js的影响，所以iframe啥插件都没用……

这个和v2ex.ext一点都不矛盾啊，两个都装着都行的。

Jreen

2015-02-07 20:46:11 +08:00

@kokdemo 其实我还想问怎么开启快速阅读……
建议弄个图标开关？一眼明了。

kokdemo

2015-02-07 20:47:29 +08:00

@Jreen 现在这种使用快速阅读的方案已经挺明显了，现在考虑加一个新手向导的东西告诉大家怎么用

hiluluke

2015-02-07 20:49:27 +08:00

配色太丑。

kokdemo

2015-02-07 20:52:03 +08:00

@hiluluke 额……

你可以按照上面17楼的办法自定义颜色……

Wy4q3489O1z996QO

2015-02-07 20:52:49 +08:00

@kokdemo 前端盲表示原来如此
现在就是两个插件都装着，只不过快速阅读的时候习惯性的鼠标移上@xxx 看被回复的原文..

表示大爱你做的这个插件，v2有你更精彩~

kokdemo

2015-02-07 20:53:37 +08:00

@romotc 谢谢你的支持

jinyang656

2015-02-07 21:12:51 +08:00

不错不错

突然想到discuz有没有人做类似快速阅读的插件呢

DennyDai

2015-02-07 21:18:24 +08:00

求Firefox

kokdemo

2015-02-07 21:33:49 +08:00

@DennyDai 没研究过ff的插件怎么制作……

ytf4425

2015-02-07 21:34:46 +08:00

Firefox党表示不高兴。。。

branchzero

2015-02-07 22:49:45 +08:00

基于 @233 的配色方案做了改善
效果如

将下面 StyleSheet 的加到设置的自定义 CSS 中
#k_navbar{
background-color: #5c5662;
}
#k_tabbar{
background-color: #949999;
}
#k_tabbar a.tab_current:link, #k_tabbar a.tab_current:visited, #k_tabbar a.tab_current:active{
background-color: #5c5662;
}
body #Wrapper {
background-color: #7a7a7a;
}
#Main td a.count_livid {
background-color: #5c5662;
}
#Main td a.node {
background-color: #998EA3;
}
还有 @kokdemo
请教下如何更改鼠标移上左侧导航条菜单时的蓝色配色，CSS定义hover无效，难道是我的姿势不对么= =

kokdemo

2015-02-07 22:51:37 +08:00

@branchzero 挺棒的搭配！如果你更新了新版插件……就按照新版的办法吧……我这里老的也都没有了……

branchzero

2015-02-07 22:55:56 +08:00

@kokdemo 动手升级重新改ing，挺不错的扩展，大赞！

branchzero

2015-02-07 23:05:13 +08:00

@kokdemo
.k_color_dark 优先级比较低，被 #Main td a.count_livid 覆盖掉了= =
同理 .k_color_node 被 #Main td a.node 覆盖了
扩展里面仍然存在 #Main td a.count_livid 和 #Main td a.node 两个 injected stylesheet ，疑似忘记去除，请检查。

branchzero

2015-02-07 23:10:37 +08:00

@kokdemo
https://www.v2ex.com/member/{会员名} 即会员信息页内容缺失（左右空白）
接下来是建议
https://www.v2ex.com/ 请给右侧搜索框加个下边距
然后把下面的会员名显示去隐藏掉，应该会稍微谐调点

谢谢作者的付出。

branchzero

2015-02-07 23:25:29 +08:00

四连回复了，管理啥的抱歉了 = =
搜索栏还有侧边栏的建议问题汇集成下面的 StyleSheet
.box {
margin: 10px 0;
}
用这个轻松解决问题。

kokdemo

2015-02-07 23:43:17 +08:00

@branchzero 你说的对，那两行css确实是忘了删除了 [扶额……]
menber页面也已经修改好了，同是受到影响的还有登录，创作新主题等页面，也都显示正常了
搜索框那个也修改了。

感谢你的测试和建议……新的版本已经上传了，chrome商店可能稍微晚一点，你可以到github上去拉最新的版本。

cwhong4399

2015-02-07 23:43:46 +08:00

这个屌，要收藏下

233

2015-02-07 23:55:39 +08:00

@branchzero
#k_navbar a:hover 是首页/写新主题/……那列的
#k_tabbar a:hover 是节点的

heliar

2015-02-07 23:56:59 +08:00

@233 求下第一个配色的方案

233

2015-02-08 00:20:31 +08:00

@heliar 用v2的自定义CSS即可

#k_navbar{
background-color: #5c5662;
}

#k_tabbar a.tab_current:link, #k_tabbar a.tab_current:visited, #k_tabbar a.tab_current:active{
background-color: #5c5662;
}

#Main td a.count_livid{
background-color: #5c5662;
}

#k_tabbar{
background-color: #bbc1c1;
}

#Main td a.node{
background-color: #bbc1c1;
}

body #Wrapper{
background-color: #fff8f2;
}

#k_tabbar a:hover{
background-color: #5a5460;
}

#k_navbar a:hover{
background-color: #5a5460;
}

binghe

2015-02-08 01:38:25 +08:00

你让Firefox用户怎么办？？

linchanx

2015-02-08 06:37:23 +08:00 via iPhone

求ff版，求lz实现ff版

imn1

2015-02-08 07:43:04 +08:00

其他都没什么，不认同把 v2ex logo 也改成自己的

kokdemo

2015-02-08 08:38:52 +08:00 via Android

@imn1 主要是我这里没有合适的v2 的logo……原来的logo是横向黑色的

kokdemo

2015-02-08 08:39:22 +08:00 via Android

@binghe
@linchanx 会有的，都会有的……

Jreen

2015-02-08 09:39:20 +08:00

头像下面的，首页上面的那个数字是什么意思？我点进去是提醒消息。问题是消息已经读过了还显示2 35

Tink

2015-02-08 10:13:41 +08:00 via iPhone

配色醉了

hansnow

2015-02-08 10:36:54 +08:00 via iPad

帅！

niko

2015-02-08 11:03:28 +08:00

帅，已用！

julijulilijuliju

2015-02-08 11:04:11 +08:00

@romotc 关于“快速阅读里面鼠标移上楼层用户头像和 @xxx 没有浮动提示了”的浮动提示：
title属性直接实现太丑了，是用CSS定义title属性是吗，要怎么实现呢？谢谢！

heliar

2015-02-08 11:04:11 +08:00

@233自定义css中的 body #Wrapper应更正为#Wrapper.k_color_background（安装chrome插件情况下

233

2015-02-08 11:06:46 +08:00

@heliar 哦我用的是0.01版本，0.03得做些修改可能

sangsir

2015-02-08 11:07:16 +08:00

帅，感谢提供

branchzero

2015-02-08 11:09:20 +08:00

@233 其实看到第一套配色我想到 HP 了，印证下我的想法你应该也逛 HP，配色真是满满的爱啊。

@kokdemo
count_livid 已经去除，#Main td a.node 依旧 = =（GitHub）
论坛 shared.css 自带的 count_livid 把 k_color_dark 给盖掉了，在列表的数字回复数标识处，请检查
次级导航栏选中处 #k_tabbar a.tab_current:link, #k_tabbar a.tab_current:visited, #k_tabbar a.tab_current:active 应该也留一个标签来自定义颜色
然后头像下面的数字有点意味不明，能够解释下这个是什么神秘数字么，很好奇~
建议增加设置，增加配色方案选择，然后内置进几套合适的配色方案。

这个版本比昨天晚上已经好很多了，加油~

tSQghkfhTtQt9mtd

2015-02-08 11:19:04 +08:00 via Android

快速阅读模式14吋的屏可能有压力吧-_-||

jason52

2015-02-08 11:27:11 +08:00

我发现了，这样改右边的广告快要没了。。。。

tSQghkfhTtQt9mtd

2015-02-08 11:47:20 +08:00

![感觉那个234意义不明...](https://geekpics.net/images/2015/02/08/7ycfb52.png)
## 感觉那个234意义不明...

yakiang

2015-02-08 12:39:03 +08:00

坐等 ff 版 (・o・)

heliar

2015-02-08 13:01:20 +08:00

@branchzero 头像下面的那个数字是你的余额

lesswest

2015-02-08 13:07:58 +08:00

我这里不能用快速阅读模式啊，chrome DEV 最新版

lesswest

2015-02-08 13:10:11 +08:00

原来不能点击链接啊，那好吧，无视我吧

chmlai

2015-02-08 13:48:23 +08:00

safari

codex

2015-02-08 16:08:32 +08:00

已用

kokdemo

2015-02-08 17:53:26 +08:00

@Jreen 说一下具体的情况吧

kokdemo

2015-02-08 18:02:28 +08:00

统一解释一下头像下面的数字的含义吧。

本来是想显示未读条数的。
但是每个人的界面设置都不太一样，有的人显示余额，有的人不显示，导致在获取这个节点的时候，会产生差异，由于v2没有为这些元素设置对应的id，所以获取的时候出了点问题……

在小屏幕上就还是用原来的模式吧……这个新版界面就是解决大屏幕空间利用率较低的问题的。

@branchzero 感谢你又帮着测试了一下，我一会统一修改一下css问题，在此之前，可以考虑用别的办法先凑活一下……

@chmlai 没有研究过safari怎么弄啊……

@jason52 广告应该还是有的，假如你不使用快速阅读模式还是能够看到的

@imn1 ……这个logo问题希望能给我发一个好看的竖版logo，原来的横向logo不太适合放到导航条上

songz

2015-02-08 18:06:57 +08:00

乱入啊

elvba

2015-02-08 18:14:33 +08:00

安装使用了下挺棒的！
不过有个问题，为什么不做成不刷新跳转呢？
内容的展示不都是在中间区域么，用 ajax 的方式来实现不刷新跳转感觉体验会更好。

rrfeng

2015-02-08 18:20:08 +08:00

说不上来哪里不好。。反正是有些操作感觉怪怪的。

表示支持

Jreen

2015-02-08 19:03:48 +08:00

那么能不能做到头像下面的数字区分金银？要不然看数字很别扭阿

kokdemo

2015-02-08 20:17:41 +08:00

@elvba ajax这个我还没有研究过接口，下一个大版本升级可以有这个。0.1.0之前应该还是bug修复

@Jreen 头像下面那个本来不是金银来着，我得像个办法分辨出来……

heliar

2015-02-08 22:33:10 +08:00

有个问题。。如何退出快速阅读模式（不刷新的情况下

kokdemo

2015-02-08 22:58:23 +08:00

@heliar 目前还没有……

kokdemo

2015-02-08 23:03:50 +08:00

@ericdiao
@DennyDai
@ytf4425
@binghe
@linchanx
@yakiang 真的不好意思……研究了两个小时ff插件的制作，看到调试插件那里实在是崩溃的不行……

我chrome的插件前后都写了三个了，比较熟，ff的插件实在是无力了。

我自己现在其实是产品经理的思维，脑子里总有各种各样的点子要去试试，移植的工作相信总会有人来做的。（毕竟已经开源了吗）

life

2015-02-09 07:57:35 +08:00

@kokdemo 可以用在pb2上么?

kokdemo

2015-02-09 09:42:59 +08:00

@life pb2我还没有试过，不太清楚

thonatos

2015-02-09 09:44:28 +08:00

fork了，一会改改，我也不是很习惯用现在的那个颜色~

kokdemo

2015-02-09 09:48:35 +08:00

@thonatos 看来我的审美真是没有救了……

thonatos

2015-02-09 09:56:35 +08:00

@kokdemo

T.T,原谅我给上面那句...给了个“感谢”....

kokdemo

2015-02-09 10:06:01 +08:00

@thonatos 没关系，至少有5个人吐槽这个事情了……

thonatos

2015-02-09 10:08:25 +08:00

@kokdemo

仔细看了，感觉问题在左边的文字上，看起来难受~

kokdemo

2015-02-09 10:09:44 +08:00

@thonatos 友情告诉你，我正在开发的0.1.0版本，左边已经全是icon啦！

thonatos

2015-02-09 10:19:47 +08:00

@kokdemo

感觉还是v2ex放在dribble上得那张图比较耐看...T.T，嗯，加油喽。

kokdemo

2015-02-09 10:20:29 +08:00

@thonatos 下个版本的颜色已经是那个样子了……

thonatos

2015-02-09 10:21:35 +08:00

@kokdemo

那我把改的删掉了~

caoyue

2015-02-09 12:07:25 +08:00

@kokdemo
Firefox 的插件太麻烦了= =
导出了一个 GreaseMonkey 的版本，代码木有什么改动
一切权利归原作者 :)

https://github.com/caoyue/userjs/blob/master/v2ex.k.user.js

RyuZheng

2015-02-09 13:13:58 +08:00

已用，很不错，就是绿色的配色确实扎眼，昨晚用的，今天反馈一下

hester

2015-02-09 13:21:29 +08:00

感谢LZ，很棒的方案！
PS：如果点击Link的话，快速阅读就不好使了，这里的逻辑可以改善下。

jemyzhang

2015-02-09 13:26:54 +08:00

真不错～！感谢楼主，and v2ex ext

kokdemo

2015-02-09 13:50:50 +08:00

@caoyue 很棒！

kokdemo

2015-02-09 13:51:54 +08:00

@RyuZheng 绿色配色会改掉的……会改掉的……
@hester 正在考虑把快速阅读改成hover而非click的模式……

up76733

2015-02-09 16:20:20 +08:00

有人在猎豹浏览器上使用成功吗,猎豹也是基于chrome的核心,但是插件无法在猎豹上打开设置页面

up76733

2015-02-09 16:28:55 +08:00

@up76733 使用https就起作用了

doufenger

2015-02-10 10:37:58 +08:00

赞赞的

break

2015-02-10 15:30:20 +08:00

[https://github.com/jShi-git/purple-v2ex](https://github.com/jShi-git/purple-v2ex)

基于v2ex.k，做了一个紫色版本，改动功能如下：
1、右边栏直接干掉
2、不刷新页面看帖，右边栏会有loading效果提示
3、去掉body滚动条，页面四栏高度自适应出现滚动条，可单独上下滚动调节

kokdemo

2015-02-10 16:25:31 +08:00

@break 这个吊！

我说一下我目前新版本的开发进度吧：

右侧的快速阅读模式彻底读取接口而不是加载iframe了，只有帖子的正文内容。但是我不能确认这两种模式那个更好。

右边栏我正在考虑将它们揉到左边navbar里面，但是每日最热还是需要的，正在考虑这个怎么弄比较好。

100

jacob

2015-02-10 19:20:55 +08:00

敢问lz opera next能安不，chromium内核的。