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

V2EX 极简自定义 CSS : LIGHTER

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

    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");
    129 条回复    2020-04-08 12:55:47 +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:36: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
    solupro
        53
    solupro  
       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
    tSQghkfhTtQt9mtd
        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   ·   实用小工具   ·   1009 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 22:00 · PVG 06:00 · LAX 14:00 · JFK 17:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.