写了一个 Flarum 风格的 V2EX 自定义 CSS

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2861 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近在学习 CSS ，仿照 flarum 写了一个 V2EX 的自定义 CSS

截图

f.v2ex

HOW

@import url("https://okdsl96uw.qnssl.com/v.flarum.css");

或者使用 stylish

https://userstyles.org/styles/138175/f-v2ex

推荐使用 stylish 哈，@import 的话限制太多，有些页面显示不太正常，我还没想清楚怎么弄才好(*´Д`)

还有 github 地址啦：github

由于是刚刚学习这个，可能有很多地方写得不好，请大家多多指教

最后祝新年快乐，鸡年大吉~~

52 条回复 • 2020-03-18 12:27:37 +08:00

Droog

2017-01-28 10:06:02 +08:00 via iPhone

不错👍

Unknwon

2017-01-28 10:51:28 +08:00

厉害了！正好用上

Unknwon

2017-01-28 10:53:43 +08:00

一点小小的建议。。在首页列表鼠标悬浮到标题的时候。。最好能加点颜色变化加深或者变淡一些都行

ecmadao

2017-01-28 11:05:10 +08:00

反馈个 bug ，为主题增加附言时无法显示输入框

DearTanker

2017-01-28 11:09:18 +08:00

终于等到了。

mtnveu

2017-01-28 11:19:08 +08:00

已用上，不错，只是感觉一些地方的字号感觉不太协调。

@import 的问题主要是因为用户自定义的 CSS 被放到了 HTML 的底部，所以会先加载 V2EX 原来的 CSS ，然后再渲染用户自定义的 CSS ，每打开一个页面都会闪一下，体验很糟糕。跟 Livid 说过这件事，其实只要把用户自定义的 CSS 提前到 head tag 里面， V2EX CSS 之后就行了吧，但一直没解决。

mtnveu

2017-01-28 11:24:59 +08:00

好吧，用 Stylish 也会有这样的问题......

quericy

2017-01-28 11:50:06 +08:00

这个看起来很不错啊

levywang

2017-01-28 12:55:54 +08:00

不错噢，正准备搭个

sisylocke

2017-01-28 13:04:36 +08:00

谢谢大家的喜欢(づ￣ 3 ￣)づ

@Unknwon 有道理，我试试换点颜色看下效果，不错的话我就去更新

@ecmadao 之前没用上，我待会儿就去改~~

@mtnveu 字号的问题我倒是没太注意，我再试着调整一下好了，至于 @import 的问题是没法解决了吗？

sobigfish

2017-01-28 13:13:06 +08:00

好看，喜欢并已安装-。- 谢谢
v2ex plus 兼容性也不错

sobigfish

2017-01-28 13:23:06 +08:00

@sciooga 的 V2EX plus 在列表页加入了一个预览功能，可能这个 span 显示不是很兼容，不知道两位哪个兼容一下谢谢
<td width="auto" valign="middle"><span class="item_title"><a href="/t/337230#reply11">写了一个 Flarum 风格的 V2EX 自定义 CSS</a></span>
<div class="sep5"></div>
<span class="small fade"><strong><a href="/member/sisylocke">sisylocke</a></strong>  •  6 分钟前  •  最后回复来自 <strong><a href="/member/sobigfish">sobigfish</a></strong>  •  <span class="preview">预览</span></span>
</td>

这个[预览] 另一了一行， hover 时候有个下划线，会使行高抖动。
ref: https://github.com/sciooga/v2ex-plus/blob/master/v2ex_tab.js

Kilerd

2017-01-28 13:27:27 +08:00 via iPhone

看起来还行，色调不是喜欢的那种，先 mark ，到时候再自己改😃

mtnveu

2017-01-28 13:30:26 +08:00

@sisylocke #10 看了下 Stylish 也是通过在 </html> 前加 <style> 来实现的......

反馈下已知的问题：
通知页面消息无法显示，该页侧栏显示有问题；
@sobigfish 我这里装了 V2EX Plus 后楼层的回复按钮不见了，还有首页签到按钮也错位了；
帖子侧栏的 li 间距可以改大点，以及白色用的太多了，层次感不强也很晃眼，可以在一些地方加点阴影或线条（我自己的建议哈）；
一些地方的配色也还很奇怪，橙色配灰色感觉不太对，像回复按钮 hover 上去回复两个字的灰色就跟背景橙色很不搭；
还有 Workspace 炸了......

暂时这么多。

mtnveu

2017-01-28 13:34:15 +08:00

@sobigfish #12 CSS 加一句 .preview { display: inline; } 即可。

sobigfish

2017-01-28 13:42:51 +08:00

@mtnveu #13 楼层回复， lz 主动 display none 了，虽然不知道为什么

img[src="//cdn.v2ex.com/static/img/reply.png"] {
display: none;
}

#14 chrome 里检查器直接加 display: inline; 到.preview 上不行
要 inline !important 才行，但“貌似”不是好多人都建议避免!important 么？

mtnveu

2017-01-28 13:53:25 +08:00

@sobigfish #16 Line 1245 的 #Main div[class="cell item"] span 改为 #Main div[class="cell item"] span:first-child 即可。

不用 !important 的原因是因为后期维护起来太麻烦了吧，确实不应该用。（然而 @sisylocke 用了挺多的样子......）

mtnveu

2017-01-28 13:55:55 +08:00

@sobigfish #16 他是把原来的这个按钮换成自己的了，原来的自然要隐藏掉。现在问题是好像 V2EX Plus 把新加的按钮给弄没掉了......

mtnveu

2017-01-28 14:11:35 +08:00

@sobigfish #16 刚刚再看了下，应该是 V2EX Plus 在评论按钮区加了些链接，导致 CSS Line 1536 #Main .box:nth-child(4) table[width="100%"] td:nth-child(3) .thank_area + a:before 就定位错了， FontAwesome 图标就没有显示出来。