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

爱意满满的作品展示区。

This topic created in 3566 days ago, the information mentioned may be changed or developed.

最近在学习 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 replies • 2020-03-18 12:27:37 +08:00

Droog

Jan 28, 2017 via iPhone

不错👍

Unknwon

Jan 28, 2017

厉害了！正好用上

Unknwon

Jan 28, 2017

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

ecmadao

Jan 28, 2017

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

DearTanker

Jan 28, 2017

终于等到了。

mtnveu

Jan 28, 2017

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

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

mtnveu

Jan 28, 2017

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

quericy

Jan 28, 2017

这个看起来很不错啊

levywang

Jan 28, 2017

不错噢，正准备搭个

sisylocke

Jan 28, 2017

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

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

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

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

run2

Jan 28, 2017

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

run2

Jan 28, 2017

@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

Jan 28, 2017 via iPhone

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

mtnveu

Jan 28, 2017

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

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

暂时这么多。

mtnveu

Jan 28, 2017

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

run2

Jan 28, 2017

@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

Jan 28, 2017

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

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

mtnveu

Jan 28, 2017

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

mtnveu

Jan 28, 2017

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