不仅仅是自定义 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://tanronggui.xyz/t/168103 感谢 @jkjoke 同学

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

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

##接下来要做的:

+ V2EX Next项目有个特别亮眼的功能是夜间模式,我打算接下来实现一下,目前打算根据太阳下山的时间来自动切换夜间模式……
+ 右上角的那个搜索框太丑了……得想个办法解决掉。
+ 把提醒也做到左边快捷栏上。
13094 次点击
所在节点    分享创造
100 条回复
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
求ff版,求lz实现ff版
imn1
2015-02-08 07:43:04 +08:00
其他都没什么,不认同把 v2ex logo 也改成自己的
kokdemo
2015-02-08 08:38:52 +08:00
@imn1 主要是我这里没有合适的v2 的logo……原来的logo是横向黑色的
kokdemo
2015-02-08 08:39:22 +08:00
@binghe
@linchanx 会有的,都会有的……
Jreen
2015-02-08 09:39:20 +08:00
头像下面的,首页上面的那个数字是什么意思? 我点进去是提醒消息。问题是消息已经读过了还显示2 35
Tink
2015-02-08 10:13:41 +08:00
配色醉了
hansnow
2015-02-08 10:36:54 +08:00
帅!
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
快速阅读模式14吋的屏可能有压力吧-_-||
jason52
2015-02-08 11:27:11 +08:00
我发现了,这样改右边的广告快要没了。。。。

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

https://tanronggui.xyz/t/169091

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

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

© 2021 V2EX