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

2015-02-07 18:42:17 +08:00
 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项目有个特别亮眼的功能是夜间模式,我打算接下来实现一下,目前打算根据太阳下山的时间来自动切换夜间模式……
+ 右上角的那个搜索框太丑了……得想个办法解决掉。
+ 把提醒也做到左边快捷栏上。
13041 次点击
所在节点    分享创造
100 条回复
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上去拉最新的版本。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

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

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX