神代綺凜

[Bilibili-Style] 哔哩哔哩 Nekopara B站网页萌化主题
最后更新时间:2019-03-05 这一天,我终于想起了自己的 userstyles 帐号,并增加了新版播放器页面的样式
扫描右侧二维码阅读全文
02
2017/09

[Bilibili-Style] 哔哩哔哩 Nekopara B站网页萌化主题

最后更新时间:2019-03-05

这一天,我终于想起了自己的 userstyles 帐号,并增加了新版播放器页面的样式

Bilibili萌化 ネコパラ

过去和未来

这个样式原本是我开始学 CSS 的时候 xjb 写的一个东西,其实仅仅是为了熟悉各种属性的运用以及积累一些实际经验

差不多三年过去了,回头再看,样式本身其实十分臃肿,另外,B站样式频繁的改版是必然的,并且也使得我很难维护并维持当时的自己写出来的大杂烩的样子

而且B站新版播放页面 UI 很好,我挑不出什么刺来,我觉得我的 xjb 改很多地方都是多余的

所以我决定重新开始做一些微小的工作,仅仅为了 nekopara 而做一个很简单的附加式的皮肤,只保留我之前做的一些 UI 图片资源,剩下的,原来的B站是什么样的,就是什么样的

目前状态

已经基本稳定√
大部分萌化已完成,今后有时间有新点子会一点点添加并完善。

如果发现了什么问题,或者有好的功能及外观建议,可以在这里反馈,这样我就能第一时间收到。
由衷感谢发现问题和提出意见建议的各位,以及正在使用这个萌化的你我TA。

使用

需要先安装 Stylus 插件

并建议在 Stylus 插件设置中开启“通过 HTML[stylus-iframe] 方式改变 iframes 的 css”,可解决本样式造成的部分 iframe 背景问题

插件设置可通过 右击 Stylus 插件图标 - 选项 来进入

查看截图/更新日志以及安装:

样式目前应用的情况

  • 大部分UI
  • B站主页(暂不包括视频分类主页)
  • 视频播放界面(普通视频 & 番剧 & 稍后再看)
  • 动态
  • 空间
  • 搜索
  • 消息

主要功能

  • 可自定义背景 (new)
  • 去页面推广、广告
  • 隐藏了视频顶部消息栏
  • 在视频播放界面(旧版播放器) 全屏网页全屏 状态下,将鼠标放在右侧边缘可呼出播放器右侧面板
  • 隐藏了早已失效的lolivector插件UI
搬瓦工VPS优惠套餐,建站稳如狗,支持支付宝,循环出账94折优惠码BWH26FXH3HIQ
年付$28CN2线路,1核/512M内存/10G硬盘/500GB@1Gbps【点击购买】(经常售罄,请抓紧机会)
年付$47CN2线路,1核/1G内存/20G硬盘/1T@1Gbps【点击购买
Last modification:July 21st, 2019 at 07:25 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

431 comments

  1. 大大王  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.94(Google Chrome 62.0.3202.94)

    博主你的萌图库咋做的,用的啥主题

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
      @大大王

      Chevereto,一个开源免费的图床程序

  2. summerlemon  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 62.0.3202.75(Google Chrome 62.0.3202.75)

    emmm~很棒哦!为什么这网址非HTTPS不可啊,难道你没有部署HTTPS么?

    1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
      @summerlemon

      ?抱歉我没懂什么意思

      1. summerlemon  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 51.0.2704.106(Google Chrome 51.0.2704.106)
        @神代綺凜

        就是说你这个评论框的输入网址非要在网址前面先输一个前缀HTTPS才可以发评论。。。。。

        1. PrajnaSmoke  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.108(Google Chrome 63.0.3239.108)
          @summerlemon

          正常啊

        2. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
          @summerlemon

          应该是表单验证限制的。。。

          1. PrajnaSmoke  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.108(Google Chrome 63.0.3239.108)
            @神代綺凜

            http地址表单测试~

  3. 哆啦有个梦  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.89(Google Chrome 62.0.3202.89)
      @哆啦有个梦

      已修复,更新即可
      由于页面结构改了所以有些地方样式套用之后不是很好看还需要微调,目前期末有点忙所以没太多时间细改……等放假了会整体调整样式_(:3」∠)_

      1. 哆啦有个梦  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
        @神代綺凜

        已解决,谢谢

  4. 哈哈哈  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.94(Google Chrome 62.0.3202.94)

    老哥你这个worldpress主题可以给我吗

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.89(Google Chrome 62.0.3202.89)
      @哈哈哈

      这是个Typecho的主题,不是WP的,而且是付费主题,需要的话看footer有作者主题网址

  5. 夜之哀伤  Mac OS X 10.12.6(Mac OS X 10.12.6) / Safari 11.0.1(Safari 11.0.1)

    搜索结果的列表页上面的搜索框好小啊,能不能调大一些,辛苦了.

    1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
      @夜之哀伤

      这个部分是准备大改的,由于最近学业繁忙所以没有时间大改,最多只会修复一些影响比较大的bug什么的……等放寒假的时候会彻底改一遍,还请先忍耐下

  6. smogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.94(Google Chrome 62.0.3202.94)

    你的这个样式不用退休啊!做得那么好!

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.89(Google Chrome 62.0.3202.89)
      @smogchan

      23333只是调侃的说法啦,你能喜欢这个样式我就很开心了。以后当然也会一直做下去的

  7. kissoul  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.94(Google Chrome 62.0.3202.94)

    播放界面工具栏, 放左边
    有个问题, 会有一个透明的框遮住右边的视频5分之一
    同时还会遮住播放按钮, 弹幕选择, 弹幕颜色
    请修复一下

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.89(Google Chrome 62.0.3202.89)
      @kissoul

      虽然是修复了但是由于我这个设计问题……当你将鼠标移出工具栏的时候需要移出超过那五分之一的距离之后,那部分才会脱离遮挡状态(实际上就是hover控制了下宽度

      1. kissoul  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.94(Google Chrome 62.0.3202.94)
        @神代綺凜

        还是因为那个伸缩效果的原因吧. 能不能给个去掉工具栏的选项, 因为本身的工具栏更好用, 已收藏和稍后再看会实时显示出来.

        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.89(Google Chrome 62.0.3202.89)
          @kissoul

          行,我已经在设置里加了一项使用原版功能栏的选项了

    2. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.89(Google Chrome 62.0.3202.89)
      @kissoul

      已修复,不好意思现在才看到这条评论,21号晚上我在赶实验报告所以没注意评论提醒

  8. USHIO  Windows 7 x64 Edition(Windows 7 x64 Edition) / Firefox 57.0(Firefox 57.0)

    背景没有图片一片空白怎么办?

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.89(Google Chrome 62.0.3202.89)
      @USHIO

      试一下你是否能打开这个图片
      如果可以的话就有可能是你无意中在自定义选项中开启了“使用自定义背景图片”,而且选择的还是无背景

      1. USHIO  Windows 7 x64 Edition(Windows 7 x64 Edition) / Firefox 57.0(Firefox 57.0)
        @神代綺凜

        能打开,但是怎么解决呢

        1. USHIO  Windows 7 x64 Edition(Windows 7 x64 Edition) / Firefox 57.0(Firefox 57.0)
          @USHIO

          打开了这个图片之后刷新一下背景图就出来了

          1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
            @USHIO

            挺迷的

  9. 飞翔的企鹅  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)

    艹猫背景图好评

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.89(Google Chrome 62.0.3202.89)
      @飞翔的企鹅

      是艹猫真爱粉

      1. 飞翔的企鹅  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
        @神代綺凜

        原来如此

  10. smogchan  Windows 7(Windows 7) / Google Chrome 62.0.3202.89(Google Chrome 62.0.3202.89)

    稍后再看 页面小黑屋的图标 又被挤下来了ヾ(≧∇≦*)ゝ

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.89(Google Chrome 62.0.3202.89)
      @smogchan

      修复了√

  11. admin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 56.0(Firefox 56.0)

    报告三个bug:
    1、所有界面下,我的稍后再看的按钮都变成乱码了。
    2、播放页面的“分享”、“收藏”、“稍后再看”、“充电”的按钮内容是乱码。
    3、1366×768的分辨率下,鼠标停留在“分享”按钮上的时候,展开的菜单会到屏幕外面去。

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
      @admin

      1&2:请看注意事项第二条,如果不能解决再跟我说明
      3:低分辨率用户可以尝试我最新添加的“视频播放界面工具栏显示在视频左侧”功能

      头像会变成QQ头像是因为有QQ邮箱自动解析头像的功能

      1. admin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 56.0(Firefox 56.0)
        @神代綺凜

        好好,谢谢。

    2. admin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 56.0(Firefox 56.0)
      @admin

      好神奇,为什么头像自动变成了我的QQ头像

  12. kissoul  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 61.0.3163.100(Google Chrome 61.0.3163.100)

    报告个小bug
    在视频播放, 如果浏览器用了页面缩放, 我习惯用150%
    那么左右会多出来一节, 就是按鼠标中键后可以往左右拖动页面, 下方会有横向的滚动条
    这个问题在哔哩哔哩首页是没有的

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
      @kissoul

      已更新,你可以在 Advance Setting 里设置显示在左侧

      1. kissoul  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 61.0.3163.100(Google Chrome 61.0.3163.100)
        @神代綺凜

        谢谢
        因为之前的那个问题, 我关闭了几天脚本
        感觉除了有背景图片
        其他功能我都没察觉到改进了什么

        1. 神代綺凜  Mac OS X(Mac OS X) / Mozilla Compatible(Mozilla Compatible)
          @kissoul

          其实主要就是给b站换个样子啦

    2. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
      @kissoul

      这个……是正常现象
      是因为我的侧边栏按钮显示是往右弹的,div是有一定宽度的,你放大之后这个div的最右端超出了页面原本宽度的范围,所以就变得可滑动了
      如果我强行缩小宽度的话,会导致弹出的文字不能正常显示
      这个问题要解决的话,我一会做多一个选项,让工具栏显示在左侧,以应对放大或者是低宽度屏幕的这种情况

  13. smogchan  Windows 7(Windows 7) / Google Chrome 62.0.3202.75(Google Chrome 62.0.3202.75)

    你好!"稍后再看“列表下点进具体视频页面啥官方导航条不居中显示
    系统win7 浏览器chrome 62.0.3202.75(正式版本) (32 位)

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
      @smogchan

      已修复,更新即可

    2. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
      @smogchan

      噢导航条说的是上面那个,了解了,我去修一下

  14. 失足少女  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 60.0.3112.78(Google Chrome 60.0.3112.78)

    问一下自定义背景是怎么做到的OωO

    1. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
      @失足少女

      你的意思是,在样式中怎么做到的?这个你需要了解css,用background-image设置一个div的背景

      1. 失足少女  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 60.0.3112.78(Google Chrome 60.0.3112.78)
        @kilin

        去百度了一下,一头雾水哇

        1. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
          @失足少女

          这个至少需要html和css知识。。。感兴趣可以靠w3cschool自学一下

          1. 失足少女  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 60.0.3112.78(Google Chrome 60.0.3112.78)
            @kilin

            我选择放弃。。。技术宅是真的可怕

            1. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
              @失足少女

              23333我一开始也是去年底才开始研究网页相关的东西的

              1. 失足少女  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 60.0.3112.78(Google Chrome 60.0.3112.78)
                @kilin

                如果可以的话能发个教程传到b站上吗

                1. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
                  @失足少女

                  这种东西不好做教程,因为涉及到的东西太多了,不是一个教程能讲的完的,我也没有那么多时间做系列教程。只能靠自学或者看html和css相关教程

  15. smogchan  Windows 7(Windows 7) / Google Chrome 61.0.3163.100(Google Chrome 61.0.3163.100)

    9月28号 B站视频页 小黑屋的图标被挤下来

    1. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
      @smogchan

      I see. 我去修复一下

      1. smogchan  Windows 7(Windows 7) / Google Chrome 61.0.3163.100(Google Chrome 61.0.3163.100)
        @kilin

        回复的好快!很喜欢你制作的这个样式,赞!φ( ̄∇ ̄o)

        1. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
          @smogchan

          已更新

        2. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
          @smogchan

          谢谢w,因为是Nekopara真爱粉୧(๑•̀⌄•́๑)૭

          1. smogchan  Windows 7(Windows 7) / Google Chrome 61.0.3163.100(Google Chrome 61.0.3163.100)
            @kilin

            视频播放页小黑屋还是挤下来了!
            系统 win7 32 浏览器 chrome 61.0.3163.100(正式版本) (32 位)

            1. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
              @smogchan

              修复了

            2. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
              @smogchan

              好像确实是这样,今天凌晨明明修复了。。。(B站到底干了什么

              1. smogchan  Windows 7(Windows 7) / Google Chrome 61.0.3163.100(Google Chrome 61.0.3163.100)
                @kilin

                我这里“广场”“直播”“小黑屋”3个都挤下来了。不知道是不是我的电脑问题

              2. smogchan  Windows 7(Windows 7) / Google Chrome 61.0.3163.100(Google Chrome 61.0.3163.100)
                @kilin

                我这里“广场”“直播”“小黑屋”3个都挤下来了。不知道是不是我的电脑问题,你那里正常显示?

                1. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
                  @smogchan

                  这下应该是修复了。。不好意思刚才改完就光想着写作业了忘记检查低分辨率的时候的情况了(:3」∠)

                  1. smogchan  Windows 7(Windows 7) / Google Chrome 61.0.3163.100(Google Chrome 61.0.3163.100)
                    @kilin

                    修复了!你道歉什么呀,我应该感谢你才对!ヾ(≧∇≦*)ゝ

                    1. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
                      @smogchan

                      23333反正还是要感谢你及时发现问题

  16. TT  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 61.0.3141.7(Google Chrome 61.0.3141.7)

    ⌇●﹏●⌇这么咔咔,博主哪的?

    1. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
      @TT

      哪的指的是。。?