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

分享一个 Material design 风格的 V2EX 自定义 CSS

  zdhxiong ·
zdhxiong · 2015-02-14 23:28:26 +08:00 · 13498 次点击
这是一个创建于 3331 天前的主题,其中的信息可能已经有所发展或是发生改变。

代码

@import url("//dn-startplay.qbox.me/v2ex-material-theme/v2ex.min.css");

github: https://github.com/zdhxiong/v2ex-material-theme

使用方法

登录后进设置,在自定义CSS处填入代码保存即可。

预览图

第 1 条附言  ·  2015-07-08 14:46:04 +08:00
新版本:
第 2 条附言  ·  2015-07-08 14:48:55 +08:00
新版本:@import url("//dn-startplay.qbox.me/v2ex-material-theme2/v2ex.min.css");

其实老早就做好了,但是兼容性不好,本来想解决兼容性再发出来,可实在解决不了。所以不支持 Firefox。
第 3 条附言  ·  2016-12-11 16:46:39 +08:00

换了 cdn 域名:

v2ex material theme

@import url("//plays.b0.upaiyun.com/v2ex-material-theme/v2ex.min.css");

v2ex material theme2

@import url("//plays.b0.upaiyun.com/v2ex-material-theme2/v2ex.min.css");
第 4 条附言  ·  2019-06-13 10:52:06 +08:00
之前的测试域名被又拍云停用了,现在换了新域名:

* V2EX material theme *

```
@import url("//play.cdn.w3cbus.com/v2ex-material-theme/v2ex.min.css");
```

* V2EX material theme2 *
```
@import url("//play.cdn.w3cbus.com/v2ex-material-theme2/v2ex.min.css");
```
110 条回复    2019-10-10 19:24:24 +08:00
1  2  
vzch
    1
vzch  
   2015-02-14 23:30:18 +08:00
我看到了 Inbox 的影子
kokdemo
    2
kokdemo  
   2015-02-14 23:32:14 +08:00
右下角那些icon是写死的吗?
zdhxiong
    3
zdhxiong  
OP
   2015-02-14 23:33:14 +08:00
@kokdemo 那些是收藏的节点,取了前6个
xingo
    4
xingo  
   2015-02-14 23:37:31 +08:00
能不能告诉我为什么我点不到那个新主题的笔?。。。。。。。。。。一移动过去就收回去了。。。。。
zdhxiong
    5
zdhxiong  
OP
   2015-02-14 23:40:07 +08:00   ❤️ 1
@xingo 你用的什么浏览器?我只在Chrome和Firefox测试过。
xi4oh4o
    6
xi4oh4o  
   2015-02-14 23:40:21 +08:00
是的,无法点到新主题的笔 :)
xingo
    7
xingo  
   2015-02-14 23:41:17 +08:00
chrome 40 1366*768
Jays
    8
Jays  
   2015-02-14 23:44:10 +08:00
Firefox 34 测试 新主题笔有问题
ZhaoMiing
    9
ZhaoMiing  
   2015-02-14 23:50:08 +08:00
好棒,不过右下角的新建笔确实有问题
Jetso
    10
Jetso  
   2015-02-14 23:50:19 +08:00
nice
lingoys
    11
lingoys  
   2015-02-14 23:52:45 +08:00
(好厉害,如果让我写我都不知道怎么实现。
ZhaoMiing
    12
ZhaoMiing  
   2015-02-14 23:54:09 +08:00
突然想到一个问题,这样 Livid 会不会不开心,赞助链接都没了啊 : (
liangdi
    13
liangdi  
   2015-02-15 00:06:56 +08:00
使用中 很不错 简洁
zdhxiong
    14
zdhxiong  
OP
   2015-02-15 00:37:45 +08:00
@xingo
@xi4oh4o
@Jays
@ZhaoMiing
发贴按钮已修复。
laincat
    15
laincat  
   2015-02-15 00:46:32 +08:00 via iPhone
试用去
pubby
    16
pubby  
   2015-02-15 01:22:07 +08:00
不错,用几天看看
max1525
    17
max1525  
   2015-02-15 02:07:19 +08:00
挺不错,点个赞
ligyxy
    18
ligyxy  
   2015-02-15 02:17:14 +08:00
好看,已经用上了
Unknwon
    19
Unknwon  
   2015-02-15 05:07:08 +08:00
不错!看起来新主题的笔需要高分辨率才能点到~
MajestySolor
    20
MajestySolor  
   2015-02-15 06:39:11 +08:00
已收藏,感谢楼主~
JonyOang
    21
JonyOang  
   2015-02-15 08:30:41 +08:00
感觉不错 哈 有inbox的影子
JonyOang
    22
JonyOang  
   2015-02-15 08:31:35 +08:00
不过如果能像inbox一样在当前页就可以浏览详细内容就更好了,不用来回跳转页面了
teddy1004
    23
teddy1004  
   2015-02-15 08:37:39 +08:00
样子不错,要是按钮能有那种点击的特效就好啦
cutehalo
    24
cutehalo  
   2015-02-15 08:46:03 +08:00
排行榜呢=。=
zzutmebwd
    25
zzutmebwd  
   2015-02-15 09:00:41 +08:00
右边一栏整个没有了 这真的好么 放页尾也行啊 有时候会用到 并且广告没有了livid会不会不高兴 毕竟人家也是要生活的嘛
zzutmebwd
    26
zzutmebwd  
   2015-02-15 09:02:20 +08:00
同时 靛蓝+黑色图标 看起来不太好 不过这也是没办法的事
DearTanker
    27
DearTanker  
   2015-02-15 09:07:26 +08:00
赞,这个屌。现在貌似还没有Material的WP主题,楼主可以试试~
lucky4
    28
lucky4  
   2015-02-15 09:18:04 +08:00
很漂亮
个人提一点小小的建议
顶部的搜索框是否可以变小,然后把上方的导航节点 技术,创意,好玩等放上去。
loading
    29
loading  
   2015-02-15 09:20:38 +08:00   ❤️ 1
Material design 没了动画,差很多啊。
jkjoke
    30
jkjoke  
   2015-02-15 09:22:50 +08:00
赞,确实吊
Tink
    31
Tink  
   2015-02-15 09:26:16 +08:00
略卡啊
songweibiao
    32
songweibiao  
   2015-02-15 09:27:58 +08:00
要是有inbox的动态效果就更好了!可能我想多了,嘿嘿。谢啦!有才!
Pete
    33
Pete  
   2015-02-15 09:28:07 +08:00 via Android
挺好看的
Mihuwa
    34
Mihuwa  
   2015-02-15 09:43:49 +08:00
试用了,感觉不错。
pljhonglu
    35
pljhonglu  
   2015-02-15 09:48:03 +08:00
感谢~很喜欢这个主题~
点击 『+』不管用。。。chrome 40.0.2214.111 (64-bit)
7654
    36
7654  
   2015-02-15 09:52:20 +08:00
稍微再窄一点点
aliuwr
    37
aliuwr  
   2015-02-15 09:55:25 +08:00
Logo 图片可以用我反色过的版本:
https://dn-cz-misc.qbox.me/v2ex/[email protected]
littlebena
    38
littlebena  
   2015-02-15 10:01:35 +08:00 via iPhone
赞(≧▽≦)
求支持一下 mobile
zdhxiong
    39
zdhxiong  
OP
   2015-02-15 10:01:41 +08:00
@Unknwon 笔已经修复了,不需要高分辨率
vinthony
    40
vinthony  
   2015-02-15 10:02:16 +08:00
@pljhonglu 估计是你没收藏过节点?
zdhxiong
    41
zdhxiong  
OP
   2015-02-15 10:03:45 +08:00
@JonyOang 因为不能用js,在当前页浏览也就实现不了。
zdhxiong
    42
zdhxiong  
OP
   2015-02-15 10:05:41 +08:00
@teddy1004
@loading
@songweibiao
那种按钮的动画效果貌似仅用CSS实现不了。
vinthony
    43
vinthony  
   2015-02-15 10:07:40 +08:00
试了一下 如果只有一个收藏结节 位置会出现在最上面 而不是+号之上
zdhxiong
    44
zdhxiong  
OP
   2015-02-15 10:09:01 +08:00
@lucky4 banner上链接太多的话就不够简洁。
zdhxiong
    45
zdhxiong  
OP
   2015-02-15 10:14:09 +08:00
@zzutmebwd
@ZhaoMiing
隐藏了广告确实会损害livid的利益,我会想想有没有合适的地方把广告显示出来。
zdhxiong
    46
zdhxiong  
OP
   2015-02-15 10:15:04 +08:00
@zzutmebwd 图标是白色的呀,你怎么会是黑色的呢?
zdhxiong
    47
zdhxiong  
OP
   2015-02-15 10:18:29 +08:00
@pljhonglu 那个+号确实没有作用的,鼠标移上去会浮现出发贴图标和收藏的节点。我之前试图把发贴图标放到 + 号上,可是做不到。
laomutuo
    48
laomutuo  
   2015-02-15 10:26:00 +08:00
楼主好像很熟悉css啊:)
laomutuo
    49
laomutuo  
   2015-02-15 10:27:20 +08:00
那个css是用less生成的么?
zdhxiong
    50
zdhxiong  
OP
   2015-02-15 10:28:55 +08:00
@laomutuo 是用的less
kokdemo
    51
kokdemo  
   2015-02-15 10:38:56 +08:00
@zdhxiong 感觉很给力啊!

我又有新灵感了……
lisonfan
    52
lisonfan  
   2015-02-15 10:42:08 +08:00
i like it !
就是左上角的V2EX的LOGO颜色改成白色的会更好一些吧?
lisonfan
    53
lisonfan  
   2015-02-15 10:43:00 +08:00


居中吧
zdhxiong
    54
zdhxiong  
OP
   2015-02-15 10:44:43 +08:00
@aliuwr 感谢提供logo,已换上。
zdhxiong
    55
zdhxiong  
OP
   2015-02-15 10:46:11 +08:00
@lisonfan logo已更换,之前的只是对原有黑色logo取了反色。
XueSeason
    56
XueSeason  
   2015-02-15 10:50:32 +08:00
已经用上了,不过不知道如何更改背景图片。我这里显示的是蓝白色的马赛克。
zdhxiong
    57
zdhxiong  
OP
   2015-02-15 10:53:45 +08:00
@XueSeason 这个背景应该是某些特殊节点的样式,不是我的主题加上去的。
farseer2014
    58
farseer2014  
   2015-02-15 11:03:44 +08:00
好看,已用。
Twinkle
    59
Twinkle  
   2015-02-15 11:05:12 +08:00
这个赞!
jkjoke
    60
jkjoke  
   2015-02-15 11:39:55 +08:00
有个问题,我收藏的帖子去哪看?
RichardQ
    61
RichardQ  
   2015-02-15 11:42:14 +08:00
顶栏求能自动隐藏
xingo
    62
xingo  
   2015-02-15 11:48:18 +08:00
真不错,重度google患者感谢楼主!
zdhxiong
    63
zdhxiong  
OP
   2015-02-15 12:07:15 +08:00
@jkjoke 现在没有收藏的帖子的链接,不过计划会把它放到banner里
zdhxiong
    64
zdhxiong  
OP
   2015-02-15 12:22:49 +08:00
@RichardQ 因为顶栏的图标都是用fixed定位的,就不好自动隐藏了。
Angdo
    65
Angdo  
   2015-02-15 12:34:42 +08:00
用上了,大爱,就是高分屏总感觉两边空旷啊(PS.还不习惯)
thinkdf
    66
thinkdf  
   2015-02-15 13:06:39 +08:00
右边栏咋被你阉割了
zzutmebwd
    67
zzutmebwd  
   2015-02-15 13:06:52 +08:00
@zdhxiong Get 缓存没刷新
donie
    68
donie  
   2015-02-15 14:42:18 +08:00
不错哎~~~ 感谢
herolee
    69
herolee  
   2015-02-15 14:58:04 +08:00
ID 和标题中间留白有点多,建议缩窄一点
599316527
    70
599316527  
   2015-02-15 16:43:33 +08:00
看起來不錯
fengxing
    71
fengxing  
   2015-02-15 22:29:28 +08:00
上面的这一条太宽了,尤其是在低分辨率笔记本上看,要占据好大的屏幕位置
zdhxiong
    72
zdhxiong  
OP
   2015-02-15 23:08:17 +08:00 via Android
@a540355686 感谢反馈,我会考虑用响应式来改变顶栏高度。
kawaiiushio
    73
kawaiiushio  
   2015-02-15 23:27:52 +08:00
好看多了

laoyang945
    74
laoyang945  
   2015-02-16 16:23:31 +08:00
请问如何找到收藏的主题
tony1016
    75
tony1016  
   2015-02-16 16:51:20 +08:00
这个真不赖
zdhxiong
    76
zdhxiong  
OP
   2015-02-16 16:53:24 +08:00 via Android
@laoyang945 这个版本没有,下个版本会加上。
laoyang945
    77
laoyang945  
   2015-02-16 19:56:47 +08:00
@zdhxiong 谢谢!那就只有等下个版本再用了,新年快乐!
Heracles
    78
Heracles  
   2015-02-17 02:21:23 +08:00 via iPad
回复、发帖按钮的样式没改过来
zdhxiong
    79
zdhxiong  
OP
   2015-02-17 10:45:05 +08:00 via Android
@Heracles 怎么没改,你看到的是怎么样的?
Heracles
    80
Heracles  
   2015-02-17 12:33:00 +08:00
@zdhxiong 哦 ,电脑上的chrome没问题,iPad的Safari就会有
philobscur
    81
philobscur  
   2015-02-17 14:00:24 +08:00
谢谢分享!
就是 Logo 在 retina 屏幕上有点糊糊的感觉
lifesurge
    82
lifesurge  
   2015-02-17 20:23:39 +08:00
牛,点赞
zdhxiong
    83
zdhxiong  
OP
   2015-02-17 22:32:05 +08:00
@philobscur 之前没考虑到retina屏,现在好了。
foccy
    84
foccy  
   2015-02-19 21:55:26 +08:00
看起来很棒~
smilingsun
    85
smilingsun  
   2015-02-21 10:03:41 +08:00
貌似不能responsive,求支持啊。
大爱楼主!
zdhxiong
    86
zdhxiong  
OP
   2015-02-21 10:56:56 +08:00 via Android
@smilingsun 手机上自定义CSS不生效的,所以就不做响应式了。
weicaizhi
    87
weicaizhi  
   2015-03-22 01:50:38 +08:00
今天的搜索框莫名变短。。。
zdhxiong
    88
zdhxiong  
OP
   2015-03-22 12:03:15 +08:00
@weicaizhi 屏幕宽度过小时,搜索框会变短
bdnet
    89
bdnet  
   2015-04-14 19:53:16 +08:00
已用上,待观察。
yxzblue
    90
yxzblue  
   2015-06-14 10:36:29 +08:00
立马高大上了!!
Stof
    91
Stof  
   2015-10-08 19:07:30 +08:00
用了这个 CSS 之后,右边的收藏节点也被隐藏了,内页也被隐藏了。。。
zdhxiong
    92
zdhxiong  
OP
   2015-10-08 19:09:14 +08:00
@Stof 看附言里的新版本,可以显示节点。
Stof
    93
Stof  
   2015-10-08 19:20:35 +08:00
@zdhxiong

Thanks

Firefox 路过。。。
laincat
    94
laincat  
   2015-10-12 11:55:17 +08:00
不支持 Firefox 。。。。。好惨。。。。
zdhxiong
    95
zdhxiong  
OP
   2015-10-12 14:24:59 +08:00
@laincat 就因为 firefox 不支持 -user-modify ,你可以用第一个版本,第一版是支持 firefox 的
laincat
    96
laincat  
   2015-10-12 14:27:46 +08:00
@zdhxiong 第二版好用太多了。。。。 T-T
xpsair
    97
xpsair  
   2016-05-12 13:57:44 +08:00
赞。。。只是代码,撸主排版一下就好了。。。(逃)
zdhxiong
    98
zdhxiong  
OP
   2016-05-12 14:05:05 +08:00
@xpsair 没压缩过的源码在 github 上有
xpsair
    99
xpsair  
   2016-05-12 14:54:29 +08:00
zdhxiong
    100
zdhxiong  
OP
   2016-05-12 14:57:10 +08:00
1  2  
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2450 人在线   最高记录 6543   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 35ms · UTC 15:56 · PVG 23:56 · LAX 08:56 · JFK 11:56
Developed with CodeLauncher
♥ Do have faith in what you're doing.