V2EX 首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
V2EX  ›  分享创造

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

  kokdemo · 2015-02-07 18:42:17 +08:00 · 9693 次点击
这是一个创建于 1114 天前的主题,其中的信息可能已经有所发展或是发生改变。
最近看大家分享了不少很棒的自定义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版本的插件发出来。
100 回复  |  直到 2015-02-10 19:20:55 +08:00
    1
rainy3636   2015-02-07 18:49:06 +08:00
已用
    2
kokdemo   2015-02-07 18:50:06 +08:00
@rainy3636 记得给点反馈……
    3
thinkxen   2015-02-07 18:52:35 +08:00 via Android
不错哦
    4
sunsol   2015-02-07 18:54:15 +08:00   ♥ 1
配色不好看
    5
yrom   2015-02-07 18:58:23 +08:00
快速阅读模式不能滚动的呀
    6
loading   2015-02-07 19:00:06 +08:00
@yrom 快速阅读模式,同样不能滚。帖子不能滚,滚动还是主题列表。。。

osx chrome 38.0.2125.111(比较旧)
    7
rainy3636   2015-02-07 19:01:28 +08:00
1、浅绿色看久了感觉刺眼,不知是不是我眼睛的问题
2、希望主页面的快速阅读改一下,当点击标题时直接进主题(现在是要先显示快速阅读),点击非标题任意区域开启快速阅读。不知能不能做到?非程序员,不了解。
    8
loading   2015-02-07 19:08:35 +08:00
建议提供一个功能:

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

效果:方便大家折腾。
    9
rainy3636   2015-02-07 19:11:25 +08:00
    10
romotc   2015-02-07 19:11:45 +08:00
快速阅读模式不能滚动 +1
另外快速阅读的时候,能把文章列表页中当前文章条目标注/变色一下吗?
    11
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范围有点大……我会考虑自定义颜色这种的
    12
vimutt   2015-02-07 19:40:23 +08:00
快速阅读用鼠标中间点击 然后拖动就可以滚动了
    13
kokdemo   2015-02-07 19:45:38 +08:00
@vimutt ……这是一个bug,我只是想把滚动条收起来……没想到在其他平台上都不能滚动了……
    14
Jreen   2015-02-07 19:55:39 +08:00
建议支持自定义颜色,这个颜色太亮了。
    15
ericdiao   2015-02-07 19:57:56 +08:00
求ff版~
    16
233   2015-02-07 20:00:13 +08:00
已用,不过改了下颜色,感觉太扎眼了



    17
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;
}
    18
kokdemo   2015-02-07 20:06:05 +08:00
@yrom
@loading
@romotc
@rainy3636
你们反馈的bug我已经做了修正,感谢你们的反馈

@233 我把绿色稍微调整了一下,现在应该好一些了
    19
233   2015-02-07 20:26:22 +08:00
@kokdemo 该怎么开启更快速阅读模式呢
    20
kokdemo   2015-02-07 20:28:00 +08:00
@233 点击帖子链接旁边的空白……

看来这个设计不够好……
    21
jason52   2015-02-07 20:39:35 +08:00
有点类似于孢子响马的孢子社区
    22
romotc   2015-02-07 20:40:24 +08:00
快速阅读里面 鼠标移上楼层用户头像 和 @xxx 没有浮动提示了。

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

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

这个和v2ex.ext一点都不矛盾啊,两个都装着都行的。
    24
Jreen   2015-02-07 20:46:11 +08:00
@kokdemo 其实我还想问怎么开启快速阅读……
建议弄个图标开关?一眼明了。
    25
kokdemo   2015-02-07 20:47:29 +08:00
@Jreen 现在这种使用快速阅读的方案已经挺明显了,现在考虑加一个新手向导的东西告诉大家怎么用
    26
hiluluke   2015-02-07 20:49:27 +08:00
配色太丑。
    27
kokdemo   2015-02-07 20:52:03 +08:00
@hiluluke 额……

你可以按照上面17楼的办法自定义颜色……
    28
romotc   2015-02-07 20:52:49 +08:00
@kokdemo 前端盲表示原来如此
现在就是两个插件都装着,只不过快速阅读的时候习惯性的鼠标移上@xxx 看被回复的原文..

表示大爱你做的这个插件,v2有你更精彩~
    29
kokdemo   2015-02-07 20:53:37 +08:00
@romotc 谢谢你的支持
    30
jinyang656   2015-02-07 21:12:51 +08:00
不错 不错

突然想到discuz有没有人做类似快速阅读的插件呢
    31
DennyDai   2015-02-07 21:18:24 +08:00
求Firefox
    32
kokdemo   2015-02-07 21:33:49 +08:00
@DennyDai 没研究过ff的插件怎么制作……
    33
ytf4425   2015-02-07 21:34:46 +08:00
Firefox党表示不高兴。。。
    34
branchzero   2015-02-07 22:49:45 +08:00   ♥ 1
基于 @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无效,难道是我的姿势不对么= =
    35
kokdemo   2015-02-07 22:51:37 +08:00
@branchzero 挺棒的搭配!如果你更新了新版插件……就按照新版的办法吧……我这里老的也都没有了……
    36
branchzero   2015-02-07 22:55:56 +08:00
@kokdemo 动手升级重新改ing,挺不错的扩展,大赞!
    37
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 ,疑似忘记去除,请检查。
    38
branchzero   2015-02-07 23:10:37 +08:00
@kokdemo
https://www.v2ex.com/member/{会员名} 即会员信息页内容缺失(左右空白)
接下来是建议
https://www.v2ex.com/ 请给右侧搜索框加个下边距
然后把下面的会员名显示去隐藏掉,应该会稍微谐调点

谢谢作者的付出。
    39
branchzero   2015-02-07 23:25:29 +08:00
四连回复了,管理啥的抱歉了 = =
搜索栏还有侧边栏的建议问题汇集成下面的 StyleSheet
.box {
margin: 10px 0;
}
用这个轻松解决问题。
    40
kokdemo   2015-02-07 23:43:17 +08:00
@branchzero 你说的对,那两行css确实是忘了删除了 [扶额……]
menber页面也已经修改好了,同是受到影响的还有登录,创作新主题等页面,也都显示正常了
搜索框那个也修改了。

感谢你的测试和建议……新的版本已经上传了,chrome商店可能稍微晚一点,你可以到github上去拉最新的版本。
    41
cwhong4399   2015-02-07 23:43:46 +08:00
这个屌,要收藏下
    42
233   2015-02-07 23:55:39 +08:00
@branchzero
#k_navbar a:hover 是首页/写新主题/……那列的
#k_tabbar a:hover 是节点的
    43
heliar   2015-02-07 23:56:59 +08:00
@233 求下第一个配色的方案
    44
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;
}
    45
binghe   2015-02-08 01:38:25 +08:00
你让Firefox用户怎么办??
    46
linchanx   2015-02-08 06:37:23 +08:00 via iPhone
求ff版,求lz实现ff版
    47
imn1   2015-02-08 07:43:04 +08:00
其他都没什么,不认同把 v2ex logo 也改成自己的
    48
kokdemo   2015-02-08 08:38:52 +08:00 via Android
@imn1 主要是我这里没有合适的v2 的logo……原来的logo是横向黑色的
    49
kokdemo   2015-02-08 08:39:22 +08:00 via Android
@binghe
@linchanx 会有的,都会有的……
    50
Jreen   2015-02-08 09:39:20 +08:00
头像下面的,首页上面的那个数字是什么意思? 我点进去是提醒消息。问题是消息已经读过了还显示2 35
    51
Tink   2015-02-08 10:13:41 +08:00 via iPhone
配色醉了
    52
hansnow   2015-02-08 10:36:54 +08:00 via iPad
帅!
    53
niko   2015-02-08 11:03:28 +08:00
帅,已用!
    54
julijulilijuliju   2015-02-08 11:04:11 +08:00
@romotc 关于“快速阅读里面 鼠标移上楼层用户头像 和 @xxx 没有浮动提示了”的浮动提示:
title属性直接实现太丑了,是用CSS定义title属性是吗,要怎么实现呢?谢谢!
    55
heliar   2015-02-08 11:04:11 +08:00   ♥ 1
@233自定义css中的 body #Wrapper应更正为#Wrapper.k_color_background(安装chrome插件情况下
    56
233   2015-02-08 11:06:46 +08:00
@heliar 哦 我用的是0.01版本,0.03得做些修改可能
    57
sangsir   2015-02-08 11:07:16 +08:00
帅,感谢提供
    58
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 应该也留一个标签来自定义颜色
然后头像下面的数字有点意味不明,能够解释下这个是什么神秘数字么,很好奇~
建议增加设置,增加配色方案选择,然后内置进几套合适的配色方案。

这个版本比昨天晚上已经好很多了,加油~
    59
liwanglin12   2015-02-08 11:19:04 +08:00 via Android
快速阅读模式14吋的屏可能有压力吧-_-||
    60
jason52   2015-02-08 11:27:11 +08:00
我发现了,这样改右边的广告快要没了。。。。
    61
liwanglin12   2015-02-08 11:47:20 +08:00
![感觉那个234意义不明...](https://geekpics.net/images/2015/02/08/7ycfb52.png)
## 感觉那个234意义不明...
    62
yakiang   2015-02-08 12:39:03 +08:00
坐等 ff 版 (・o・)
    63
heliar   2015-02-08 13:01:20 +08:00
@branchzero 头像下面的那个数字是你的余额
    64
lesswest   2015-02-08 13:07:58 +08:00
我这里不能用快速阅读模式啊,chrome DEV 最新版
    65
lesswest   2015-02-08 13:10:11 +08:00
原来不能点击链接啊,那好吧,无视我吧
    66
chmlai   2015-02-08 13:48:23 +08:00
safari
    67
codex   2015-02-08 16:08:32 +08:00
已用
    68
kokdemo   2015-02-08 17:53:26 +08:00
@Jreen 说一下具体的情况吧
    69
kokdemo   2015-02-08 18:02:28 +08:00
统一解释一下头像下面的数字的含义吧。

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

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


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

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

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

@imn1 ……这个logo问题希望能给我发一个好看的竖版logo,原来的横向logo不太适合放到导航条上
    70
songz   2015-02-08 18:06:57 +08:00
乱入啊
    71
elvba   2015-02-08 18:14:33 +08:00
安装使用了下挺棒的!
不过有个问题,为什么不做成不刷新跳转呢?
内容的展示不都是在中间区域么,用 ajax 的方式来实现不刷新跳转感觉体验会更好。
    72
rrfeng   2015-02-08 18:20:08 +08:00
说不上来哪里不好。。反正是有些操作感觉怪怪的。

表示支持
    73
Jreen   2015-02-08 19:03:48 +08:00
那么能不能做到头像下面的数字区分金银?要不然看数字很别扭阿
    74
kokdemo   2015-02-08 20:17:41 +08:00
@elvba ajax这个我还没有研究过接口,下一个大版本升级可以有这个。0.1.0之前应该还是bug修复


@Jreen 头像下面那个本来不是金银来着,我得像个办法分辨出来……
    75
heliar   2015-02-08 22:33:10 +08:00
有个问题。。如何退出快速阅读模式(不刷新的情况下
    76
kokdemo   2015-02-08 22:58:23 +08:00
@heliar 目前还没有……
    77
kokdemo   2015-02-08 23:03:50 +08:00   ♥ 1
@ericdiao
@DennyDai
@ytf4425
@binghe
@linchanx
@yakiang 真的不好意思……研究了两个小时ff插件的制作,看到调试插件那里实在是崩溃的不行……

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

我自己现在其实是产品经理的思维,脑子里总有各种各样的点子要去试试,移植的工作相信总会有人来做的。(毕竟已经开源了吗)
    78
life   2015-02-09 07:57:35 +08:00
@kokdemo 可以用在pb2上么?
    79
kokdemo   2015-02-09 09:42:59 +08:00
@life pb2我还没有试过,不太清楚
    80
thonatos   2015-02-09 09:44:28 +08:00
fork了,一会改改,我也不是很习惯用现在的那个颜色~
    81
kokdemo   2015-02-09 09:48:35 +08:00   ♥ 1
@thonatos 看来我的审美真是没有救了……
    82
thonatos   2015-02-09 09:56:35 +08:00
@kokdemo

T.T,原谅我给上面那句...给了个“感谢”....
    83
kokdemo   2015-02-09 10:06:01 +08:00
@thonatos 没关系,至少有5个人吐槽这个事情了……
    84
thonatos   2015-02-09 10:08:25 +08:00
@kokdemo

仔细看了,感觉问题在左边的文字上,看起来难受~
    85
kokdemo   2015-02-09 10:09:44 +08:00
@thonatos 友情告诉你,我正在开发的0.1.0版本,左边已经全是icon啦!
    86
thonatos   2015-02-09 10:19:47 +08:00
@kokdemo

感觉还是v2ex放在dribble上得那张图比较耐看...T.T,嗯,加油喽。
    87
kokdemo   2015-02-09 10:20:29 +08:00
@thonatos 下个版本的颜色已经是那个样子了……
    88
thonatos   2015-02-09 10:21:35 +08:00
@kokdemo

那我把改的删掉了~
    89
caoyue   2015-02-09 12:07:25 +08:00
@kokdemo
Firefox 的插件太麻烦了= =
导出了一个 GreaseMonkey 的版本,代码木有什么改动
一切权利归原作者 :)

https://github.com/caoyue/userjs/blob/master/v2ex.k.user.js
    90
RyuZheng   2015-02-09 13:13:58 +08:00
已用,很不错,就是绿色的配色确实扎眼,昨晚用的,今天反馈一下
    91
hester   2015-02-09 13:21:29 +08:00
感谢LZ,很棒的方案!
PS:如果点击Link的话,快速阅读就不好使了,这里的逻辑可以改善下。
    92
jemyzhang   2015-02-09 13:26:54 +08:00
真不错~!感谢楼主,and v2ex ext
    93
kokdemo   2015-02-09 13:50:50 +08:00
@caoyue 很棒!
    94
kokdemo   2015-02-09 13:51:54 +08:00
@RyuZheng 绿色配色会改掉的……会改掉的……
@hester 正在考虑把快速阅读改成hover而非click的模式……
    95
up76733   2015-02-09 16:20:20 +08:00
有人在猎豹浏览器上使用成功吗,猎豹也是基于chrome的核心,但是插件无法在猎豹上打开设置页面
    96
up76733   2015-02-09 16:28:55 +08:00
@up76733 使用https就起作用了
    97
doufenger   2015-02-10 10:37:58 +08:00
赞赞的
    98
break   2015-02-10 15:30:20 +08:00   ♥ 1
[https://github.com/jShi-git/purple-v2ex](https://github.com/jShi-git/purple-v2ex)

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

    99
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内核的。
DigitalOcean
关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   1828 人在线   最高记录 3541   ·  
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.0 · 87ms · UTC 11:32 · PVG 19:32 · LAX 03:32 · JFK 06:32
♥ Do have faith in what you're doing.
沪ICP备16043287号-1