神代綺凜

[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. LelaGuerri  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 99.9.9999.999(Google Chrome 99.9.9999.999)

    您好大佬 可否在这个 B站主题的评论区位置增加一个 像 您网站 评论区这种乳白色半透明的遮罩图层呢
    因为 用了自定义壁纸 壁纸的颜色 一多 或者图案 太暗 或者太复杂 评论区的字就很难识别了
    我附上一张图.. 您看下... https://i.imgur.com/OMptVY9.jpg

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

      这是因为我还没写新版页面的样式

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

        嗯 嗯 能传达到 给大佬看到 就好-.-

  2. 子痕  Windows 10 x64 Edition(Windows 10 x64 Edition) / Sogou Explorer(Sogou Explorer)

    作为中年大叔,不太习惯年轻人又萌又这么多动画图片的网站。

  3. 教书先生  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.181(Google Chrome 65.0.3325.181)

    我可以申请一下友链吗

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @教书先生

      因为目前友链太多所以不考虑再加,很抱歉

  4. 鸟叔  Windows 7 x64 Edition(Windows 7 x64 Edition) / Maxthon 5.2.5.4000(Maxthon 5.2.5.4000)

    网站主题真萌

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @鸟叔

      |´・ω・)ノ 谢谢夸奖

  5. cakeyui  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)

    稍后再看时也有标签栏
    直播和小黑屋跑到第二排去了∠( ᐛ 」∠)_(才发现)

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

      可我这里也是没有问题的啊……

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

        ∠( ᐛ 」∠)_没法发图 我丢外链了 http://www.tzr.me/image/h8Iw9 就很奇怪。。。

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

          这就是没更新啊……或者 userstyle 出了什么 bug 你没更新到
          自行检查样式代码1这部分

          如果和图片中不一致就自行替换

          .bili-header-m > .bili-wrapper{
              width: 1285px;
          }
          @media screen and (max-width: 1400px){
          .bili-header-m > .bili-wrapper{
              width: 1055px;
          }
          }
          1. cakeyui  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
            @神代綺凜

            感谢 因为首页修复了。。我以为代码更新到最全了 现在都能正常显示了

  6. OASIS  GNU/Linux x64(GNU/Linux x64) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)

    大佬..很喜欢您主页的样式 于是偷偷借用了下css 但是主页一行只能显示一篇文章,请问我缺少了什么修改?

    1. OASIS  GNU/Linux x64(GNU/Linux x64) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @OASIS

      刚刚才仔细看了大佬的注释
      就不麻烦大佬啦~

  7. ss  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)

    突然间Stylish被视为恶意脚本后 改用油猴子 版本的Stylish轻捷 然后发现评论区的留白 是尖角 不是圆角 老版界面的播放器边上白色 遮住了背景

    1. ss  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
      @ss

      不知 油猴子版的Stylish 会不会造成显示异常

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

        用Stylus

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

          试了一下 Stylus 和 Stylish的插件浏览器都安装不了显示恶意插件555

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

            你要是 Chrome 的话从第三方网站直接下 crx 装扩展肯定装不了啊,都提示恶意
            https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

  8. cakeyui  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)

    标签栏的直播和小黑屋跑到第二排去了。。能修改下吗

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

      已修复

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

        奇怪,明明已经是最新版,但是我还是存在这个问题耶。。

  9. AppleMiku  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)

    dalao厉害哇,bilibli好看多了

  10. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)

    B站这两天就要把“数码”提为一级分区了。看来你的样式要稍微修改一哈了ヾ(≧∇≦*)ゝ

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

      已改

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

        B站现在一级分区多了那么多个,上面导航栏一大排其实也不好看了╮(╯▽╰)╭

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

          到时候推倒重写,做个收纳

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

            期待

  11. 梨子  GNU/Linux x64(GNU/Linux x64) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)

    喵~

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @梨子

      OωO

      1. 梨子  GNU/Linux x64(GNU/Linux x64) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
        @神代綺凜

        主题好漂亮!

        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
          @梨子

          |´・ω・)ノ谢谢夸奖

  12. 小芋头  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)

    博主,你的博客主题是什么呀 好想要噢qwq

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @小芋头

      Footer有

  13. 木名小威  Windows 10 x64 Edition(Windows 10 x64 Edition) / Opera 56.0.3051.116(Opera 56.0.3051.116)

    建议添加文本描边以及改色选项,不然壁纸颜色太深会看不清字(๑•̀ㅁ•́ฅ)

  14. ArrayCat  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)

    看番的时候倒是没问题了,但是在看视频的时候就会出现标题栏下面没有留白造成标题文字看不清楚问题,咋搞呢

    1. ArrayCat  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)
      @ArrayCat

      我试了下好像是因为B站新版播放器的问题??

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

        因为最近事情多还没有为新版播放器编写样式

        以后会完全重写

  15. uiiiiii  Windows 7 x64 Edition(Windows 7 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 70.0.3538.102(Google Chrome 70.0.3538.102)
      @uiiiiii

      coding pages 服务器不知道出什么问题了,目前暂时换回 github pages 了,应该正常了

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

        感谢,可以了,就是图片刷出来需要等一点点时间

  16. 失足少女  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.33(Google Chrome 68.0.3440.33)

    大佬啊,今天艹猫的背景莫得了

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.102(Google Chrome 70.0.3538.102)
      @失足少女

      coding pages 服务器不知道出什么问题了,目前暂时换回 github pages 了,应该正常了

  17. 阿飞  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.67(Google Chrome 70.0.3538.67)

    你好,我的博客也是用的这个主题,但是访问速度很慢,怎样做优化,才能提升速度呢?OωO

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.102(Google Chrome 70.0.3538.102)
      @阿飞

      抱歉,我也没有什么好的意见,最基本的就是选个线路好的主机吧

  18. 月がきれい  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)

    不知道有没有可能出一个黑暗模式呢

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
      @月がきれい

      不存在的(当然如果仅仅只改配色而不去做其他特效的话是很容易的

      1. 月がきれい  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
        @神代綺凜

        就是背景颜色改为深灰啊黑色啊之类的吧

        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
          @月がきれい

          差不多

  19. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.67(Google Chrome 70.0.3538.67)

    这几天首页在线人数下面那张小猫的图被插件uBlock屏蔽了。是因为B站在这个位置放置了广告吗?(ó﹏ò。)

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

      是的,我特地把广告图片隐藏,换成了这个
      你可以直接针对b站不开启uBlock,本样式已经屏蔽了所有广告

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

        我目前在试用新版播放器,不开uBlock。在相关视频列表上面会出现广告。好纠结啊23333
        话说新播放器总体还不错,就是目前bug好多٩(ˊᗜˋ*)و

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

          我一直没用懒得切,大概都有什么bug

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

            主要还是全屏时鼠标指针不隐藏 默认清晰度经常不能选择最高清晰度等等。话说有人基于你的萌化主题先行弄了个新版本的样式出来了 https://userstyles.org/styles/163004/bilibili 不过感觉他搞了太多div之类的使得整体都是一块一块的割裂感严重

            1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
  20. vfw  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)

    博主我想知道这个动图二维码怎么做

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)