V2EX 极简自定义 CSS : LIGHTER - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
jkjoke
V2EX    分享创造

V2EX 极简自定义 CSS : LIGHTER

  •  4
     
  •   jkjoke 2015-02-04 10:29:40 +08:00 16007 次点击
    这是一个创建于 3905 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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");
    132 条回复    2025-06-16 15:41:57 +08:00
    1  2  
    ihwa
        1
    ihwa  
       2015-02-04 10:33:29 +08:00
    表现不是太明显,关键是V2EX本身就没有太多多余的东西
    Majirefy
        2
    Majirefy  
       2015-02-04 10:33:40 +08:00
    相当不错的感觉~~~~立刻使用了~~~
    geew
        3
    geew  
       2015-02-04 10:36:32 +08:00
    1. 太亮了
    2. 为啥https那里有个红x
    Ansonyi
        4
    Ansonyi  
       2015-02-04 10:43:37 +08:00
    赞!!
    hahastudio
        5
    hahastudio  
       2015-02-04 10:45:52 +08:00
    拍扁拍扁!
    jkjoke
        6
    jkjoke  
    OP
       2015-02-04 10:46:21 +08:00
    @ihwa
    为了更好地获取标题信息,做了一点小小的“优化”

    @Majirefy
    祝你使用愉快

    @geew 没开又派云CDN的https,那里写的是可以免费开,但是我开通的时候提示要交2000大洋(跪
    shallyy
        7
    shallyy  
       2015-02-04 10:46:29 +08:00
    感谢分享 Yosemite即视感.
    haopic
        8
    haopic  
       2015-02-04 10:49:37 +08:00
    感觉好像快了很多啊
    zzutmebwd
        9
    zzutmebwd  
       2015-02-04 10:54:41 +08:00 via Android
    赞!
    abelyao
        10
    abelyao  
       2015-02-04 10:55:23 +08:00
    @jkjoke 换到七牛去,七牛那个 qbox.me 的域名是自带 https 支持的
    abelyao
        11
    abelyao  
       2015-02-04 10:55:58 +08:00
    @jkjoke 另外 css 的 url 要用 //domain.xxx 这样就可以自适应 http 和 https 了
    jkjoke
        12
    jkjoke  
    OP
       2015-02-04 10:56:44 +08:00
    @abelyao 原来可以这样,3Q
    zzutmebwd
        13
    zzutmebwd  
       2015-02-04 10:57:27 +08:00 via Android
    自己下载粘贴不就得了 调用CSS有时候会抽风
    jimmy
        14
    jimmy  
       2015-02-04 10:58:11 +08:00
    感谢,用上了。
    zzutmebwd
        15
    zzutmebwd  
       2015-02-04 11:01:00 +08:00 via Android
    提个建议 头像居中之后 无法占满一排又左居中的“创作新主题”会略有尴尬吧 干脆隐藏图标和新提醒并做一排(好吧我看那个突兀的图标不顺眼许久了)
    xavierskip
        16
    xavierskip  
       2015-02-04 11:13:10 +08:00
    把标题栏的背景图片去掉就扁平了。

    #Top{background-image: url("");};
    jkjoke
        17
    jkjoke  
    OP
       2015-02-04 11:14:45 +08:00
    @zzutmebwd
    是呢,可是那个位置没有固定特征,通过CSS修改的话会影响到其他共用的部分
    jkjoke
        18
    jkjoke  
    OP
       2015-02-04 11:15:54 +08:00
    @haopic
    我感觉也快了,是错觉吗(

    @xavierskip
    好评
    zzutmebwd
        19
    zzutmebwd  
       2015-02-04 11:17:07 +08:00
    @jkjoke 那把创作新主题做个极简的按钮如何?类似purecss那种~
    zzutmebwd
        20
    zzutmebwd  
       2015-02-04 11:20:20 +08:00
    @zzutmebwd 好吧 还真是...居然没有class之类的。。。
    RoshanWu
        21
    RoshanWu  
       2015-02-04 11:20:51 +08:00
    好用,赞
    不顺便把评论框和按钮也拍扁么?
    expkzb
        22
    expkzb  
       2015-02-04 11:26:20 +08:00
    才知道v2是可以这么玩的,再去找找别的
    jkjoke
        23
    jkjoke  
    OP
       2015-02-04 11:31:55 +08:00
    @zzutmebwd
    修改成功了,刷新看看:)

    gauzeehom
        24
    gauzeehom  
       2015-02-04 11:33:40 +08:00
    试下
    zzutmebwd
        25
    zzutmebwd  
       2015-02-04 11:3:33 +08:00
    @jkjoke 嘿嘿 TKS
    kookxiang
        26
    kookxiang  
       2015-02-04 11:49:05 +08:00
    左边那个头像要是能垂直居中就好了……强迫症受不了啊
    vertical-align: middle !important
    incrediblink
        27
    incrediblink  
       2015-02-04 11:49:40 +08:00
    @jkjoke BAKA 不用购买那个服务,只要在设置里面点击开启就好啦
    jkjoke
        28
    jkjoke  
    OP
       2015-02-04 11:52:00 +08:00
    @kookxiang 加还是不加,这是一个问题。。。
    @incrediblink 刚刚找到,已开启XD
    loading
        29
    loading  
       2015-02-04 11:52:47 +08:00
    用 import 方法不错,省流量加速,哈哈
    bkmi
        30
    bkmi  
       2015-02-04 11:55:33 +08:00
    为何你们都那么钟爱圆形头像
    jkjoke
        31
    jkjoke  
    OP
       2015-02-04 11:57:15 +08:00
    @geew 现在可以用https啦~
    loading
        32
    loading  
       2015-02-04 11:58:26 +08:00
    给个建议,把一些例如时间信息的颜色改成和背景色一样而不是隐藏,这样平时看不见,要看的时候还能 ctrl+a 看一眼。
    kookxiang
        33
    kookxiang  
       2015-02-04 11:58:30 +08:00
    @jkjoke 发现列表页好看了,内容页又蛋疼了
    jkjoke
        34
    jkjoke  
    OP
       2015-02-04 12:02:08 +08:00
    @kookxiang 23333,共用一个style,改起来太蛋疼,有好的方法吗
    jkjoke
        35
    jkjoke  
    OP
       2015-02-04 12:15:03 +08:00
    @kookxiang
    居中成功,但是回复里面的头像也跟着居中了,这样感觉如何
    syswow
        36
    syswow  
       2015-02-04 13:24:03 +08:00
    感觉非常好,赞!
    ven
        37
    ven  
       2015-02-04 13:27:14 +08:00
    不错
    shuax
        38
    shuax  
       2015-02-04 13:31:22 +08:00
    总会先显示原来的界面,然后才变成新界面
    kookxiang
        39
    kookxiang  
       2015-02-04 13:41:49 +08:00
    @jkjoke
    发现可以用 Div 的 ID 来判断:
    [id*="r_"].cell 可以选择到回复页的cell
    回复头像居中总有点怪怪的……
    happywowwow
        40
    happywowwow  
       2015-02-04 13:47:28 +08:00
    TKS 不错
    jkjoke
        41
    jkjoke  
    OP
       2015-02-04 13:49:32 +08:00
    @kookxiang
    嗯呢,CDN更新缓存好慢啊,待会应该就能看到效果了
    yxt
        42
    yxt  
       2015-02-04 13:52:48 +08:00
    耳目一新:)
    markyangd
        43
    markyangd  
       2015-02-04 13:54:47 +08:00
    很不错,但是内容显示不够紧凑,最好把空白区域调小点。
    DearTanker
        44
    DearTanker  
       2015-02-04 14:00:28 +08:00
    标题2行的时候,就和头像不搭了。。标题有点偏重的感觉。。
    jkjoke
        45
    jkjoke  
    OP
       2015-02-04 14:01:50 +08:00
    @DearTanker
    已经调整了,等待CDN缓存刷新ing~
    jkjoke
        46
    jkjoke  
    OP
       2015-02-04 14:43:37 +08:00
    右上角再改了改

    ceclinux
        47
    ceclinux  
       2015-02-04 14:50:52 +08:00
    已经用上了,感谢~
    twoyuan
        48
    twoyuan  
       2015-02-04 15:50:59 +08:00
    挺不错(楼主头像也挺不错)
    lcxz
        49
    lcxz  
       2015-02-04 15:59:34 +08:00
    jkjoke
        50
    jkjoke  
    OP
       2015-02-04 16:09:37 +08:00
    @lcxz CSS解析出了问题?还是P的图。。。
    KentY
        51
    KentY  
       2015-02-04 16:14:34 +08:00
    挺好,其实v2ex页面最上面那个条可以在滚动页面的时候保留再最上面。 我不懂UI设计,但觉得那样方便点吧? 不知道这个通过css能不能弄
    lcxz
        52
    lcxz  
       2015-02-04 16:15:09 +08:00
    @jkjoke 忘了删除一行css
    solu
        53
    solu  
       2015-02-04 16:23:22 +08:00


    不错呀呀。不过 创作新主题 没居中可能受到图片库的影响
    jkjoke
        54
    jkjoke  
    OP
       2015-02-04 16:25:17 +08:00
    @KentY
    在@include那行代码下面加上这几行,导航栏就可以悬浮在顶部了~

    #Top{

    position:fixed;
    height:50px;
    width:100%;
    }
    #Wrapper{
    padding-top:60px;
    }
    KentY
        55
    KentY  
       2015-02-04 16:28:03 +08:00
    @jkjoke 谢谢,管用。 CSS还挺厉害。
    jkjoke
        56
    jkjoke  
    OP
       2015-02-04 16:29:02 +08:00   1
    @solupro 我给新主题按钮加了底边距,加上这一行消掉它就可以垂直居中了

    .cell table tr td:nth-child(3) a[href="/new"] {
    margin-bottom: 0px;
    }
    jkjoke
        57
    jkjoke  
    OP
       2015-02-04 16:29:51 +08:00
    @KentY
    XD 不用谢,CSS确实挺好玩的
    branchzero
        58
    branchzero  
       2015-02-04 16:31:03 +08:00
    看起来不错,决定一试
    xiangyuc
        59
    xiangyuc  
       2015-02-04 16:31:21 +08:00
    赞!
    coolicer
        60
    coolicer  
       2015-02-04 17:41:22 +08:00
    #reply_content{
    margin-bottom:10px;
    }
    加了这个感觉好多了
    dengs1993
        61
    dengs1993  
       2015-02-04 17:50:01 +08:00
    已经使用,高手做得不错
    dofine
        62
    dofine  
       2015-02-04 18:03:39 +08:00
    弱弱问下字体怎么改呢。。 Windows 下页面的宋体太难看了,Chrome 里设置了思源但是 v2ex 没有效果。
    dofine
        63
    dofine  
       2015-02-04 18:04:49 +08:00
    @dofine 好吧 自定义css里改好了。。
    jkjoke
        64
    jkjoke  
    OP
       2015-02-04 18:10:18 +08:00
    @dofine
    对的,可以添加自己喜欢的字体

    body{
    font-family: arial,"Microsoft Yahei","Hiragino Sans GB",sans-serif !important;
    }
    DearTanker
        65
    DearTanker  
       2015-02-04 18:44:22 +08:00


    感觉这边不是很美观?( ̄(エ) ̄)
    picasso250
        66
    picasso250  
       2015-02-04 19:18:22 +08:00
    a.item_node:hover {
    color: #969595;
    background-color: #D6DBDF;
    }
    建议左边的按钮改成这个
    acgeo
        67
    acgeo  
       2015-02-04 19:36:18 +08:00
    请把广告统统都去掉吧
    zrp1994
        68
    zrp1994  
       2015-02-04 19:44:21 +08:00
    不错,已经在用,赞一个!
    jkjoke
        69
    jkjoke  
    OP
       2015-02-04 19:46:42 +08:00
    @DearTanker
    嗯呢,标题给点右边距就不会跟头像撞到一起了
    头像调整到跟标题平行应该不错?

    @picasso250
    收到,我猜是在说右边?现在指过去是蓝色高亮的
    jkjoke
        70
    jkjoke  
    OP
       2015-02-04 19:47:26 +08:00
    @acgeo
    嘿嘿,你需要ADB
    tSQghkfhTtQt9mt
        71
    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
        72
    acgeo  
       2015-02-04 20:02:31 +08:00
    @jkjoke 用CSS直接将广告的标签display:none;
    blue7wings
        73
    blue7wings  
       2015-02-04 20:10:38 +08:00
    不错,不错。。。
    jkjoke
        74
    jkjoke  
    OP
       2015-02-04 20:55:49 +08:00   1
    @DearTanker @picasso250
    感谢建议,已添加进CSS,稍后Ctrl+F5刷新即可
    mikezy123
        75
    mikezy123  
       2015-02-04 21:29:10 +08:00
    瞬间平了,赞!
    thinkxen
        76
    thinkxen  
       2015-02-04 22:02:32 +08:00 via Android
    不错,不错
    DearTanker
        77
    DearTanker  
       2015-02-04 22:08:34 +08:00
    @jkjoke

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

    jkjoke
        78
    jkjoke  
    OP
       2015-02-04 22:15:48 +08:00
    @DearTanker
    又找到bug了,真厉害,解决方法加padding
    DearTanker
        79
    DearTanker  
       2015-02-04 22:21:20 +08:00
    @jkjoke 强迫症,职业病。。
    muziyue
        80
    muziyue  
       2015-02-05 00:19:51 +08:00
    挺好的,的确是有点亮 尤其是列表页
    WhyLiam
        81
    WhyLiam  
       2015-02-05 00:43:58 +08:00
    用了一天真心越看越喜
    sandtears
        82
    sandtears  
       2015-02-05 09:14:03 +08:00 via Android
    效果不错哦
    bjhyyc
        83
    bjhyyc  
       2015-02-05 10:25:25 +08:00
    试用了一下,马上换回来了。
    留白的地方都很奇怪,强迫症表示怎么感觉画面是歪的呢。。
    picasso250
        84
    picasso250  
       2015-02-05 10:39:00 +08:00
    @jkjoke 嗯, 我说的是右边...
    mikemikemike
        85
    mikemikemike  
       2015-02-05 21:41:26 +08:00
    我想看妹子
    5night
        86
    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
        87
    jkjoke  
    OP
       2015-02-06 00:22:34 +08:00
    @mikemikemike
    哪里有妹子
    DearTanker
        88
    DearTanker  
       2015-02-12 23:04:26 +08:00   1
    看这里看这里。。



    win8.1 Chrome
    jkjoke
        89
    jkjoke  
    OP
       2015-02-13 00:08:02 +08:00
    @DearTanker
    已OK,原来是有一个板块间隔用在了这里,隐藏掉就会出现这个问题
    * UPDATE: 2015.02.13 00:05
    DearTanker
        90
    DearTanker  
       2015-02-13 09:02:03 +08:00
    @jkjoke 干的漂亮~
    yxzblue
        91
    yxzblue  
       2015-06-14 10:40:13 +08:00
    本菜看到此贴,才觉得css果然挺有用挺强大~
    gauzeehom
        92
    gauzeehom  
       2015-06-19 10:59:03 +08:00
    不错哦
    outing
        93
    outing  
       2015-09-22 08:38:34 +08:00
    主题的高度是不是有点大?
    如果利用起来显示 po 的信息 例如 所在节点 最终回复 什么的是不是能好一些
    jkjoke
        94
    jkjoke  
    OP
       2015-09-22 10:08:44 +08:00
    @outing 原意就是省略掉这些信息,加上就不是原意了,实际上也是考虑到有一部分 v2er 喜欢通过标题快速寻找信息的情况~
    outing
        95
    outing  
       2015-09-22 10:16:10 +08:00   1
    @jkjoke 哈哈 被效果吸引了 竟然没看到粗大的 less is more 失礼了
    MrZephyrus
        96
    MrZephyrus  
       2015-10-15 10:39:52 +08:00
    赞赞赞
    hatcloud
        97
    hatcloud  
       2016-03-17 15:50:41 +08:00
    打扰了,我在使用你的 CSS 的时候碰到一个问题,就是发帖人的头像会被拉伸,想问下该怎么解决。

    如图所示
    hatcloud
        98
    hatcloud  
       2016-03-17 15:53:20 +08:00
    我测试了一下,
    Safari 和 Edge 下是没这个问题的
    只有 Chrome 出现了这个问题
    jkjoke
        99
    jkjoke  
    OP
       2016-03-17 19:03:27 +08:00
    @hatcloud 可能是样式有残留或者冲突, chrome 45 下没问题

    hatcloud
        100
    hatcloud  
       2016-03-17 20:43:40 +08:00
    @jkjoke 好吧,原来是因为 V2EX plus 这个插件导致的。
    算了,不理它了
    1  2  
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     1048 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 33ms UTC 18:29 PVG 02:29 LAX 11:29 JFK 14:29
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86