V2EX 极简自定义 CSS ： LIGHTER

[jkjoke]

LESS IS MORE

---

thanks @yanleijava
base on http://www.v2ex.com/t/167793

BEFORE:

AFTER:

CODE:

---

@import url("http://jkjoke.b0.upaiyun.com/css/v2ex.css");

How to use：

---

登录后进入设置，找到此处并填入保存设置即可。

已开启CDN的HTTPS功能，

可使用以下代码自适应http/https
```
@import url("//jkjoke.b0.upaiyun.com/css/v2ex.css");
```

或强制使用https：
```
@import url("https://jkjoke.b0.upaiyun.com/css/v2ex.css");
```

感谢以下几位以及其他朋友的建议和帮助：
@abelyao @zzutmebwd @kookxiang

还要感谢 @DearTanker @picasso250

优化了几处地方和首页节点的显示样式
微调了背景颜色，欢迎继续指出问题

今天看到@kamil 的帖子http://www.v2ex.com/t/168669，起了一点灵感，于是把现在的LIGHTER加了自定义背景，微量的透明，菜单栏顶部浮动，隐藏掉底栏。

新的样式命名为MODERN，希望大家喜欢。


@import url("//jkjoke.b0.upaiyun.com/css/modern.css");

body{
background-image: url(http://jkjoke.b0.upaiyun.com/img/v2ex_bg2.jpg);
/*此处自定义背景*/
}
#Bottom{
display:none;
/*隐藏底部栏*/
}
#Top{
position: fixed;
height: 50px;
width: 100%;
z-index: 999;
/*菜单栏顶部浮动*/
}

忘了补上一张效果图，实际用起来感觉还不错



#2015.02.09

修复一个bug：
在回复里面看不到感谢数

主题已更新，请在设置中加入时间戳以更新 css~~

@import url("//jkjoke.b0.upaiyun.com/css/v2ex.css?time=20160331.css");

[ihwa]

表现不是太明显，关键是V2EX本身就没有太多多余的东西

[Majirefy]

相当不错的感觉～～～～立刻使用了～～～

[geew]

1. 太亮了
2. 为啥https那里有个红x

[Ansonyi]

赞！！

[hahastudio]

拍扁拍扁！

[jkjoke]

@ihwa
为了更好地获取标题信息，做了一点小小的“优化”

@Majirefy
祝你使用愉快

@geew 没开又派云CDN的https，那里写的是可以免费开，但是我开通的时候提示要交2000大洋（跪

[shallyy]

感谢分享 Yosemite即视感.

[haopic]

感觉好像快了很多啊

[zzutmebwd]

赞！

[abelyao]

@jkjoke 换到七牛去，七牛那个 qbox.me 的域名是自带 https 支持的

[abelyao]

@jkjoke 另外 css 的 url 要用 //domain.xxx 这样就可以自适应 http 和 https 了

[jkjoke]

@abelyao 原来可以这样，3Q

[zzutmebwd]

自己下载粘贴不就得了 调用CSS有时候会抽风

[jimmy]

感谢，用上了。

[zzutmebwd]

提个建议 头像居中之后 无法占满一排又左居中的“创作新主题”会略有尴尬吧 干脆隐藏图标和新提醒并做一排(好吧我看那个突兀的图标不顺眼许久了)

[xavierskip]

把标题栏的背景图片去掉就扁平了。

#Top{background-image: url("");};

[jkjoke]

@zzutmebwd
是呢，可是那个位置没有固定特征，通过CSS修改的话会影响到其他共用的部分

[jkjoke]

@haopic
我感觉也快了，是错觉吗（

@xavierskip
好评

[zzutmebwd]

@jkjoke 那把创作新主题做个极简的按钮如何？类似purecss那种~

[zzutmebwd]

@zzutmebwd 好吧 还真是...居然没有class之类的。。。

[RoshanWu]

好用，赞👍
不顺便把评论框和按钮也拍扁么？

[expkzb]

才知道v2是可以这么玩的，再去找找别的

[jkjoke]

@zzutmebwd
修改成功了，刷新看看：）

[gauzeehom]

试下

[zzutmebwd]

@jkjoke 嘿嘿 TKS

[kookxiang]

左边那个头像要是能垂直居中就好了……强迫症受不了啊
vertical-align: middle !important

[incrediblink]

@jkjoke BAKA 不用购买那个服务，只要在设置里面点击开启就好啦

[jkjoke]

@kookxiang 加还是不加，这是一个问题。。。
@incrediblink 刚刚找到，已开启XD

[loading]

用 import 方法不错，省流量加速，哈哈

[bkmi]

为何你们都那么钟爱圆形头像

[jkjoke]

@geew 现在可以用https啦~

[loading]

给个建议，把一些例如时间信息的颜色改成和背景色一样而不是隐藏，这样平时看不见，要看的时候还能 ctrl+a 看一眼。

[kookxiang]

@jkjoke 发现列表页好看了，内容页又蛋疼了

[jkjoke]

@kookxiang 23333，共用一个style，改起来太蛋疼，有好的方法吗

[jkjoke]

@kookxiang
居中成功，但是回复里面的头像也跟着居中了，这样感觉如何

[syswow]

感觉非常好，赞！

[ven]

不错

[shuax]

总会先显示原来的界面，然后才变成新界面

[kookxiang]

@jkjoke
发现可以用 Div 的 ID 来判断：
[id*="r_"].cell 可以选择到回复页的cell
回复头像居中总有点怪怪的……

[happywowwow]

TKS 不错

[jkjoke]

@kookxiang
嗯呢，CDN更新缓存好慢啊，待会应该就能看到效果了

[yxt]

耳目一新:)

[markyangd]

很不错，但是内容显示不够紧凑，最好把空白区域调小点。

[DearTanker]

标题2行的时候，就和头像不搭了。。标题有点偏重的感觉。。

[jkjoke]

@DearTanker
已经调整了，等待CDN缓存刷新ing~

[jkjoke]

右上角再改了改

[ceclinux]

已经用上了，感谢～

[twoyuan]

挺不错（楼主头像也挺不错）

[lcxz]

[jkjoke]

@lcxz CSS解析出了问题？还是P的图。。。

[KentY]

挺好，其实v2ex页面最上面那个条可以在滚动页面的时候保留再最上面。　我不懂UI设计，但觉得那样方便点吧？　不知道这个通过css能不能弄

[lcxz]

@jkjoke 忘了删除一行css

[solupro]

不错呀呀。不过 创作新主题 没居中可能受到图片库的影响

[jkjoke]

@KentY
在@include那行代码下面加上这几行，导航栏就可以悬浮在顶部了~

#Top{

position:fixed;
height:50px;
width:100%;
}
#Wrapper{
padding-top:60px;
}

[KentY]

@jkjoke 谢谢，管用。　CSS还挺厉害。

[jkjoke]

@solupro 我给新主题按钮加了底边距，加上这一行消掉它就可以垂直居中了

.cell table tr td:nth-child(3) a[href="/new"] {
margin-bottom: 0px;
}

[jkjoke]

@KentY
XD 不用谢，CSS确实挺好玩的

[branchzero]

看起来不错，决定一试

[xiangyuc]

赞！

[coolicer]

#reply_content{
margin-bottom:10px;
}
加了这个感觉好多了

[dengs1993]

已经使用，高手做得不错

[dofine]

弱弱问下字体怎么改呢。。 Windows 下页面的宋体太难看了，Chrome 里设置了思源但是 v2ex 没有效果。

[dofine]

@dofine 好吧 自定义css里改好了。。

[jkjoke]

@dofine
对的，可以添加自己喜欢的字体

body{
font-family: arial,"Microsoft Yahei","Hiragino Sans GB",sans-serif !important;
}

[DearTanker]

感觉这边不是很美观？(￣(エ)￣)ゞ

[picasso250]

a.item_node:hover {
color: #969595;
background-color: #D6DBDF;
}
建议左边的按钮改成这个

[acgeo]

请把广告统统都去掉吧

[zrp1994]

不错，已经在用，赞一个！

[jkjoke]

@DearTanker
嗯呢，标题给点右边距就不会跟头像撞到一起了
头像调整到跟标题平行应该不错？

@picasso250
收到，我猜是在说右边？现在指过去是蓝色高亮的

[jkjoke]

@acgeo
嘿嘿，你需要ADB

[tSQghkfhTtQt9mtd]

@import url("//jkjoke.b0.upaiyun.com/css/v2ex.css");
#Top{
position:fixed;
height:50px;
width:100%;
}
#Wrapper{
padding-top:60px;
}
#reply_content{
margin-bottom:10px;
}
body{
font-family: arial,"Microsoft Yahei","Hiragino Sans GB",sans-serif !important;
}

我目前的CSS大概这样啦~等楼主不改css了我就转到自己的七牛上免得楼主流量超了，哈哈

[acgeo]

@jkjoke 用CSS直接将广告的标签display:none;

[blue7wings]

不错，不错。。。

[jkjoke]

@DearTanker @picasso250
感谢建议，已添加进CSS，稍后Ctrl+F5刷新即可

[mikezy123]

瞬间平了，赞！

[thinkxen]

不错，不错

[DearTanker]

@jkjoke

提醒系统这边的头像和右边的灰色背景是贴在一起的，感觉这样也不合理。

[jkjoke]

@DearTanker
又找到bug了，真厉害，解决方法加padding

[DearTanker]

@jkjoke 强迫症，职业病。。

[muziyue]

挺好的，的确是有点亮 尤其是列表页

[WhyLiam]

用了一天真心越看越喜歡

[sandtears]

效果不错哦

[bjhyyc]

试用了一下，马上换回来了。
留白的地方都很奇怪，强迫症表示怎么感觉画面是歪的呢。。

[picasso250]

@jkjoke 嗯, 我说的是右边...

[mikemikemike]

我想看妹子

[5night]

菜单栏颜色浅了点，建议：

a.top:link, a.top:visited {
color: #555!important;
}
a.top:hover{
color:#385f8a!important;
}

[jkjoke]

@mikemikemike
哪里有妹子

[DearTanker]

看这里看这里。。



win8.1 Chrome

[jkjoke]

@DearTanker
已OK，原来是有一个板块间隔用在了这里，隐藏掉就会出现这个问题
* UPDATE: 2015.02.13 00:05

[DearTanker]

@jkjoke 干的漂亮~

[yxzblue]

本菜看到此贴，才觉得css果然挺有用挺强大~

[gauzeehom]

不错哦

[outing]

主题的高度是不是有点大？
如果利用起来显示 po 的信息 例如 所在节点 最终回复 什么的是不是能好一些

[jkjoke]

@outing 原意就是省略掉这些信息，加上就不是原意了，实际上也是考虑到有一部分 v2er 喜欢通过标题快速寻找信息的情况~

[outing]

@jkjoke 哈哈 被效果吸引了 竟然没看到粗大的 less is more 失礼了

[MrZephyrus]

赞赞赞

[hatcloud]

打扰了，我在使用你的 CSS 的时候碰到一个问题，就是发帖人的头像会被拉伸，想问下该怎么解决。

如图所示

[hatcloud]

我测试了一下，
Safari 和 Edge 下是没这个问题的
只有 Chrome 出现了这个问题

[jkjoke]

@hatcloud 可能是样式有残留或者冲突， chrome 45 下没问题

[hatcloud]

@jkjoke 好吧，原来是因为 V2EX plus 这个插件导致的。
算了，不理它了