V2EX = way to explore

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

现在注册

已注册用户请登录

爱意满满的作品展示区。

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

LESS IS MORE

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

BEFORE:

BEFORE

AFTER:

AFTER

CODE:

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

How to use：

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

setting

第 1 条附言 · 2015-02-04 11:55:15 +08:00

已开启CDN的HTTPS功能，

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

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

第 2 条附言 · 2015-02-04 17:19:07 +08:00

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

第 3 条附言 · 2015-02-05 10:08:58 +08:00

还要感谢 @DearTanker @picasso250

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

第 4 条附言 · 2015-02-06 17:27:33 +08:00

今天看到@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;
/*菜单栏顶部浮动*/
}

第 5 条附言 · 2015-02-06 17:29:08 +08:00

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

第 6 条附言 · 2015-02-09 10:42:34 +08:00

#2015.02.09

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

第 7 条附言 · 2016-03-31 10:58:00 +08:00

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

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

V2EX

lighter

CSS

129 条回复 • 2020-04-08 12:55:47 +08:00

1 2

❮

❯

ihwa

2015-02-04 10:33:29 +08:00

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

Majirefy

2015-02-04 10:33:40 +08:00

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

geew

2015-02-04 10:36:32 +08:00

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

Ansonyi

2015-02-04 10:43:37 +08:00

赞！！

hahastudio

2015-02-04 10:45:52 +08:00

拍扁拍扁！

jkjoke

2015-02-04 10:46:21 +08:00

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

@Majirefy
祝你使用愉快

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

shallyy

2015-02-04 10:46:29 +08:00

感谢分享 Yosemite即视感.

haopic

2015-02-04 10:49:37 +08:00

感觉好像快了很多啊

zzutmebwd

2015-02-04 10:54:41 +08:00 via Android

赞！

abelyao

2015-02-04 10:55:23 +08:00

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

abelyao

2015-02-04 10:55:58 +08:00

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

jkjoke

2015-02-04 10:56:44 +08:00

@abelyao 原来可以这样，3Q

zzutmebwd

2015-02-04 10:57:27 +08:00 via Android

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

jimmy

2015-02-04 10:58:11 +08:00

感谢，用上了。

zzutmebwd

2015-02-04 11:01:00 +08:00 via Android

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

xavierskip

2015-02-04 11:13:10 +08:00

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

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

jkjoke

2015-02-04 11:14:45 +08:00

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

jkjoke

2015-02-04 11:15:54 +08:00

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

@xavierskip
好评

zzutmebwd

2015-02-04 11:17:07 +08:00

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

zzutmebwd

2015-02-04 11:20:20 +08:00

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

RoshanWu

2015-02-04 11:20:51 +08:00

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

expkzb

2015-02-04 11:26:20 +08:00

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

jkjoke

2015-02-04 11:31:55 +08:00

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

gauzeehom

2015-02-04 11:33:40 +08:00

试下

zzutmebwd

2015-02-04 11:36:33 +08:00

@jkjoke 嘿嘿 TKS

kookxiang

2015-02-04 11:49:05 +08:00

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

incrediblink

2015-02-04 11:49:40 +08:00

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

jkjoke

2015-02-04 11:52:00 +08:00

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

loading

2015-02-04 11:52:47 +08:00

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

bkmi

2015-02-04 11:55:33 +08:00

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

jkjoke

2015-02-04 11:57:15 +08:00

@geew 现在可以用https啦~

loading

2015-02-04 11:58:26 +08:00

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

kookxiang

2015-02-04 11:58:30 +08:00

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

jkjoke

2015-02-04 12:02:08 +08:00

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

jkjoke

2015-02-04 12:15:03 +08:00

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

syswow

2015-02-04 13:24:03 +08:00

感觉非常好，赞！

ven

2015-02-04 13:27:14 +08:00

不错

shuax

2015-02-04 13:31:22 +08:00

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

kookxiang

2015-02-04 13:41:49 +08:00

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

happywowwow

2015-02-04 13:47:28 +08:00

TKS 不错

jkjoke

2015-02-04 13:49:32 +08:00

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

yxt

2015-02-04 13:52:48 +08:00

耳目一新:)

markyangd

2015-02-04 13:54:47 +08:00

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

DearTanker

2015-02-04 14:00:28 +08:00

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

jkjoke

2015-02-04 14:01:50 +08:00

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

jkjoke

2015-02-04 14:43:37 +08:00

右上角再改了改

ceclinux

2015-02-04 14:50:52 +08:00

已经用上了，感谢～

twoyuan

2015-02-04 15:50:59 +08:00

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

lcxz

2015-02-04 15:59:34 +08:00

jkjoke

2015-02-04 16:09:37 +08:00

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

KentY

2015-02-04 16:14:34 +08:00

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

lcxz

2015-02-04 16:15:09 +08:00

@jkjoke 忘了删除一行css

solupro

2015-02-04 16:23:22 +08:00

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

jkjoke

2015-02-04 16:25:17 +08:00

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

#Top{

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

KentY

2015-02-04 16:28:03 +08:00

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

jkjoke

2015-02-04 16:29:02 +08:00

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

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

jkjoke

2015-02-04 16:29:51 +08:00

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

branchzero

2015-02-04 16:31:03 +08:00

看起来不错，决定一试

xiangyuc

2015-02-04 16:31:21 +08:00

赞！

coolicer

2015-02-04 17:41:22 +08:00

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

dengs1993

2015-02-04 17:50:01 +08:00

已经使用，高手做得不错

dofine

2015-02-04 18:03:39 +08:00

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

dofine

2015-02-04 18:04:49 +08:00

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

jkjoke

2015-02-04 18:10:18 +08:00

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

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

DearTanker

2015-02-04 18:44:22 +08:00

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

picasso250

2015-02-04 19:18:22 +08:00

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

acgeo

2015-02-04 19:36:18 +08:00

请把广告统统都去掉吧

zrp1994

2015-02-04 19:44:21 +08:00

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

jkjoke

2015-02-04 19:46:42 +08:00

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

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

jkjoke

2015-02-04 19:47:26 +08:00

@acgeo
嘿嘿，你需要ADB

tSQghkfhTtQt9mtd

2015-02-04 19:56:41 +08:00

@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

2015-02-04 20:02:31 +08:00

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

blue7wings

2015-02-04 20:10:38 +08:00

不错，不错。。。

jkjoke

2015-02-04 20:55:49 +08:00

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

mikezy123

2015-02-04 21:29:10 +08:00

瞬间平了，赞！

thinkxen

2015-02-04 22:02:32 +08:00 via Android

不错，不错

DearTanker

2015-02-04 22:08:34 +08:00

@jkjoke

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

jkjoke

2015-02-04 22:15:48 +08:00

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

DearTanker

2015-02-04 22:21:20 +08:00

@jkjoke 强迫症，职业病。。

muziyue

2015-02-05 00:19:51 +08:00

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

WhyLiam

2015-02-05 00:43:58 +08:00

用了一天真心越看越喜歡

sandtears

2015-02-05 09:14:03 +08:00 via Android

效果不错哦

bjhyyc

2015-02-05 10:25:25 +08:00

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

picasso250

2015-02-05 10:39:00 +08:00

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

mikemikemike

2015-02-05 21:41:26 +08:00

我想看妹子

5night

2015-02-05 22:37:54 +08:00

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

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

jkjoke

2015-02-06 00:22:34 +08:00

@mikemikemike
哪里有妹子

DearTanker

2015-02-12 23:04:26 +08:00

看这里看这里。。

win8.1 Chrome

jkjoke

2015-02-13 00:08:02 +08:00

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

DearTanker

2015-02-13 09:02:03 +08:00

@jkjoke 干的漂亮~

yxzblue

2015-06-14 10:40:13 +08:00

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

gauzeehom

2015-06-19 10:59:03 +08:00

不错哦

outing

2015-09-22 08:38:34 +08:00

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

jkjoke

2015-09-22 10:08:44 +08:00

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

outing

2015-09-22 10:16:10 +08:00

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

MrZephyrus

2015-10-15 10:39:52 +08:00

赞赞赞

hatcloud

2016-03-17 15:50:41 +08:00

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

如图所示

hatcloud

2016-03-17 15:53:20 +08:00

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

jkjoke

2016-03-17 19:03:27 +08:00

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

100

hatcloud

2016-03-17 20:43:40 +08:00

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

1 2

❮

❯

V2EX 极简自定义 CSS ： LIGHTER

LESS IS MORE

BEFORE:

AFTER:

CODE:

How to use：