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

[kokdemo]

最近看大家分享了不少很棒的自定义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项目有个特别亮眼的功能是夜间模式，我打算接下来实现一下，目前打算根据太阳下山的时间来自动切换夜间模式……
+ 右上角的那个搜索框太丑了……得想个办法解决掉。
+ 把提醒也做到左边快捷栏上。

更新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;/*被选择的列表项的背景颜色*/
}

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版本的插件发出来。

[rainy3636]

已用

[kokdemo]

@rainy3636 记得给点反馈……

[thinkxen]

不错哦

[sunsol]

配色不好看

[yrom]

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

[loading]

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

osx chrome 38.0.2125.111（比较旧）

[rainy3636]

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

[loading]

建议提供一个功能：

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

效果：方便大家折腾。

[rainy3636]

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

[Wy4q3489O1z996QO]

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

[kokdemo]

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


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

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

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

[vimutt]

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

[kokdemo]

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

[Jreen]

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

[ericdiao]

求ff版~

[233]

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

[kokdemo]

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

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

[kokdemo]

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

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

[233]

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

[kokdemo]

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

看来这个设计不够好……

[jason52]

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

[Wy4q3489O1z996QO]

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

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

[kokdemo]

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

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

[Jreen]

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

[kokdemo]

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

[hiluluke]

配色太丑。

[kokdemo]

@hiluluke 额……

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

[Wy4q3489O1z996QO]

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

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

[kokdemo]

@romotc 谢谢你的支持

[jinyang656]

不错 不错

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

[DennyDai]

求Firefox

[kokdemo]

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

[ytf4425]

Firefox党表示不高兴。。。

[branchzero]

基于 @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]

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

[branchzero]

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

[branchzero]

@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]

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

谢谢作者的付出。

[branchzero]

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

[kokdemo]

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

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

[cwhong4399]

这个屌，要收藏下

[233]

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

[heliar]

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

[233]

@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]

你让Firefox用户怎么办？？

[linchanx]

求ff版，求lz实现ff版

[imn1]

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

[kokdemo]

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

[kokdemo]

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

[Jreen]

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

[Tink]

配色醉了

[hansnow]

帅！

[niko]

帅，已用！

[julijulilijuliju]

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

[heliar]

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

[233]

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

[sangsir]

帅，感谢提供

[branchzero]

@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]

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

[jason52]

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

[tSQghkfhTtQt9mtd]

## 感觉那个234意义不明...

[yakiang]

坐等 ff 版 (・o・)

[heliar]

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

[lesswest]

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

[lesswest]

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

[chmlai]

safari

[codex]

已用

[kokdemo]

@Jreen 说一下具体的情况吧

[kokdemo]

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

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

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


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

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

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

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

[songz]

乱入啊

[elvba]

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

[rrfeng]

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

表示支持

[Jreen]

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

[kokdemo]

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


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

[heliar]

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

[kokdemo]

@heliar 目前还没有……

[kokdemo]

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

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

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

[life]

@kokdemo 可以用在pb2上么?

[kokdemo]

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

[thonatos]

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

[kokdemo]

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

[thonatos]

@kokdemo

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

[kokdemo]

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

[thonatos]

@kokdemo

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

[kokdemo]

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

[thonatos]

@kokdemo

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

[kokdemo]

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

[thonatos]

@kokdemo

那我把改的删掉了~

[caoyue]

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

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

[RyuZheng]

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

[hester]

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

[jemyzhang]

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

[kokdemo]

@caoyue 很棒！

[kokdemo]

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

[up76733]

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

[up76733]

@up76733 使用https就起作用了

[doufenger]

赞赞的

[break]

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

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

[kokdemo]

@break 这个吊！

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

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

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

[jacob]

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