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

爱意满满的作品展示区。

This topic created in 4138 days ago, the information mentioned may be changed or developed.

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

Supplement 1 · Feb 7, 2015

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

Supplement 2 · Feb 8, 2015

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 replies • 2015-02-10 19:20:55 +08:00

rainy3636

Feb 7, 2015

已用

kokdemo

Feb 7, 2015

@rainy3636 记得给点反馈……

thinkxen

Feb 7, 2015 via Android

不错哦

sunsol

Feb 7, 2015

配色不好看

yrom

Feb 7, 2015

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

loading

Feb 7, 2015

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

osx chrome 38.0.2125.111（比较旧）

rainy3636

Feb 7, 2015

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

loading

Feb 7, 2015

建议提供一个功能：

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

效果：方便大家折腾。

rainy3636

Feb 7, 2015

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

Wy4q3489O1z996QO

Feb 7, 2015

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

kokdemo

Feb 7, 2015

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

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

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

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

vimutt

Feb 7, 2015

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

kokdemo

Feb 7, 2015

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

Jreen

Feb 7, 2015

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

ericdiao

Feb 7, 2015

求ff版~

233

Feb 7, 2015

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

kokdemo

Feb 7, 2015

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

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

kokdemo

Feb 7, 2015

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

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

233

Feb 7, 2015

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

kokdemo

Feb 7, 2015

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

看来这个设计不够好……

jason52

Feb 7, 2015

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

Wy4q3489O1z996QO

Feb 7, 2015

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

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

kokdemo

Feb 7, 2015

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

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

Jreen

Feb 7, 2015

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

kokdemo

Feb 7, 2015

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

hiluluke

Feb 7, 2015

配色太丑。

kokdemo

Feb 7, 2015

@hiluluke 额……

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

Wy4q3489O1z996QO

Feb 7, 2015

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

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

kokdemo

Feb 7, 2015

@romotc 谢谢你的支持

yufz

Feb 7, 2015

不错不错

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

DennyDai

Feb 7, 2015

求Firefox

kokdemo

Feb 7, 2015

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

ytf4425

Feb 7, 2015

Firefox党表示不高兴。。。

branchzero

Feb 7, 2015

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

Feb 7, 2015

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

branchzero

Feb 7, 2015

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

branchzero

Feb 7, 2015

@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

Feb 7, 2015

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

谢谢作者的付出。

branchzero

Feb 7, 2015

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

kokdemo

Feb 7, 2015

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

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

cwhong4399

Feb 7, 2015

这个屌，要收藏下

233

Feb 7, 2015

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

heliar

Feb 7, 2015

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

233

Feb 8, 2015

@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

Feb 8, 2015

你让Firefox用户怎么办？？

linchanx

Feb 8, 2015 via iPhone

求ff版，求lz实现ff版

imn1

Feb 8, 2015

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

kokdemo

Feb 8, 2015 via Android

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

kokdemo

Feb 8, 2015 via Android

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

Jreen

Feb 8, 2015

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

Tink

PRO

Feb 8, 2015 via iPhone

配色醉了

hansnow

Feb 8, 2015 via iPad

帅！

niko

Feb 8, 2015

帅，已用！

julijulilijuliju

Feb 8, 2015

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

heliar

Feb 8, 2015

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

233

Feb 8, 2015

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

sangsir

Feb 8, 2015

帅，感谢提供

branchzero

Feb 8, 2015

@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

Feb 8, 2015 via Android

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

jason52

Feb 8, 2015

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

tSQghkfhTtQt9mtd

Feb 8, 2015

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

yakiang

Feb 8, 2015

坐等 ff 版 (・o・)

heliar

Feb 8, 2015

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

lesswest

Feb 8, 2015

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

lesswest

Feb 8, 2015

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

chmlai

Feb 8, 2015

safari

codex

Feb 8, 2015

已用

kokdemo

Feb 8, 2015

@Jreen 说一下具体的情况吧

kokdemo

Feb 8, 2015

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

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

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

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

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

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

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

songz

Feb 8, 2015

乱入啊

elvba

Feb 8, 2015

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

rrfeng

Feb 8, 2015

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

表示支持

Jreen

Feb 8, 2015

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

kokdemo

Feb 8, 2015

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

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

heliar

Feb 8, 2015

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

kokdemo

Feb 8, 2015

@heliar 目前还没有……

kokdemo

Feb 8, 2015

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

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

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

life

Feb 9, 2015

@kokdemo 可以用在pb2上么?

kokdemo

Feb 9, 2015

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

SuYia

Feb 9, 2015

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

kokdemo

Feb 9, 2015

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

SuYia

Feb 9, 2015

@kokdemo

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

kokdemo

Feb 9, 2015

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

SuYia

Feb 9, 2015

@kokdemo

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

kokdemo

Feb 9, 2015

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

SuYia

Feb 9, 2015

@kokdemo

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

kokdemo

Feb 9, 2015

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

SuYia

Feb 9, 2015

@kokdemo

那我把改的删掉了~

caoyue

Feb 9, 2015

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

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

RyuZheng

Feb 9, 2015

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

hester

Feb 9, 2015

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

jemyzhang

Feb 9, 2015

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

kokdemo

Feb 9, 2015

@caoyue 很棒！

kokdemo

Feb 9, 2015

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

up76733

Feb 9, 2015

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

up76733

Feb 9, 2015

@up76733 使用https就起作用了

doufenger

Feb 10, 2015

赞赞的

break

Feb 10, 2015

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

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

kokdemo

Feb 10, 2015

@break 这个吊！

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

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

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

100

jacob

Feb 10, 2015

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