神代綺凜

[已完结] 哔哩哔哩 Nekopara B站网页萌化主题
終わりました。
扫描右侧二维码阅读全文
02
2017/09

[已完结] 哔哩哔哩 Nekopara B站网页萌化主题

終わりました。

Bilibili萌化 ネコパラ

最后更新时间:2019-09-08

过去和未来

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

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

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

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

附加功能

  • 去页面推广、广告
  • 隐藏了旧版视频播放器顶部消息栏
  • 对导航栏应用了一些人性化调整
  • 在旧版视频播放界面播放器全屏网页全屏状态下,将鼠标放在右侧边缘可呼出播放器右侧面板

安装

使用前还需要先安装 Stylus 插件

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

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

搬瓦工VPS优惠套餐,建站稳如狗,支持支付宝,循环出账94折优惠码BWH3HYATVBJW
年付$47CN2线路,1核/1G内存/20G硬盘/1T@1Gbps【点击购买】($28套餐已经不再销售)
年付$47CN2 GIA线路,1核/512MB内存/10G硬盘/500G@1Gbps【点击购买】(可能已售罄)
Last modification:September 8th, 2019 at 06:13 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment Cancel reply

486 comments

  1. claymore  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
    ヾ(≧∇≦*)ゝ博客做的挺漂亮
  2. 惠痴君  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
    自定义总是会卡在那里
  3. 阿福坐飞鸡  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
    真·萌新。还有这种好东西
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
  4. 抵着幽蓝  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
    stylish被chrome提示违反了 Chrome 网上应用店政策是什么原因呢
    1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
      @抵着幽蓝 背地收集用户的浏览行为,违反隐私条例
  5. 清晨的小麋鹿  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.84(Google Chrome 68.0.3440.84)
    在视频播放界面播放器全屏下,在右侧有一块白色的区域,刚好与呼出播放器右侧的面板一样大小,那白色区域隐藏不了 全屏时看着有点不舒服
    请问楼主可以隐藏了这块白色的区域么?(看到回复一下)
    谢谢啦(ฅ´ω`ฅ)
  6. 学习笔记Blog  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
    哇,好二次元的博客呀!厉害呀!
  7. 清晨的小麋鹿  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.84(Google Chrome 68.0.3440.84)
    用stylus显示不了 背景图
    1. 清晨的小麋鹿  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.84(Google Chrome 68.0.3440.84)
      @清晨的小麋鹿 用Stylish我会换背景图 但是用stylus就换不行了
      1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
        @清晨的小麋鹿 请说明
        1、你进行的操作
        2、你期望的效果
        3、实际的效果
        1. 清晨的小麋鹿  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.84(Google Chrome 68.0.3440.84)
          @神代綺凜 我在Stylish网站中已经设置好想要上传的图片,然后安装风格。打开B站背景是白色的,不知道为什么。
          那我重新在安装,不用自定义的图片用风格自带的背景,一样是白色的。

          我之前是用tylish这个的时候是,上传图片获取URL然后填进去的这个方法修改背景的
          但是用Stylus填进去 在打开B站一样是白色的背景(填进去的URL是显示红色的)

  8. edpage  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
    emmm,为啥在我21:9的屏幕上猫耳会被顶部挡住啊!
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
      @edpage 超宽屏……因为壁纸等比缩放的缘故会这样,因为没钱所以没考虑到这种情况23333
  9. 贫僧不是和尚  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.84(Google Chrome 68.0.3440.84)
    300条评论看完了QAQ,小白一枚,膜拜一下φ( ̄∇ ̄o)
  10. 清晨的小麋鹿  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 66.0.3359.139(Google Chrome 66.0.3359.139)
    楼主我想自定义我自己喜欢的图片 但是自定义不了 不知道为什么
    楼主看到请回复一下 谢谢
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.75(Google Chrome 68.0.3440.75)
      @清晨的小麋鹿 使用图床上传图片获取URL然后填进去
      1. 清晨的小麋鹿  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.84(Google Chrome 68.0.3440.84)
        @神代綺凜 嗯嗯已经解决了 谢谢楼主啦
        那 楼主知道为什么在stylish里自定义不了么? 我用stylish其他的也是这样自定义不了
        想在你这里注册个号但是打开注册页面就显示404
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.75(Google Chrome 68.0.3440.75)
          @清晨的小麋鹿 读题啊读题,请去样式页面读 Notes from latest update

          本博客不开放注册

          1. 清晨的小麋鹿  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.84(Google Chrome 68.0.3440.84)
            @神代綺凜 好吧 背景已经搞定了 谢谢啦
  11. 爱的温度  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 61.0(Firefox 61.0)
    大佬最近B站网页版新版本Bilitube上线了,要不考虑下添加一个自动切换到新版的功能?OωO
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.75(Google Chrome 68.0.3440.75)
      @爱的温度 还在试用阶段吧,在没有正式更换UI之前我是不会动的 (懒炸了
      1. 爱的温度  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 61.0(Firefox 61.0)
        @神代綺凜 (滑稽滑稽滑稽|´・ω・)ノ
  12. shine  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
    发现b站新板式评论区会变透明,原来的是白板。感觉透明的这种还可以OωO
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
      @shine 希望我的工作量会越来越轻(
  13. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
    期待你考完试后带来B站新界面的萌化ヾ(≧∇≦*)ゝ
    虽然肯定很辛苦了
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
      @seasmogchan 当然已经考完试了(等b站正式使用我才会去做
      1. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
  14. ~魔法使之家~  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
    可以,非常萌!
  15. 君华  Windows 7 x64 Edition(Windows 7 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 67.0.3396.99(Google Chrome 67.0.3396.99)
      @君华 网页第三方样式
      自行浏览 https://userstyles.org
      1. 黑天SkuKaLaurt  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 67.0.3396.99(Google Chrome 67.0.3396.99)
          @黑天SkuKaLaurt 没听懂
  16. 君华  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
    不懂这是什么东西....请教下
  17. 咸鱼  Windows 7 x64 Edition(Windows 7 x64 Edition) / Maxthon 5.1.5.2000(Maxthon 5.1.5.2000)
    我的妈,今天打开B站整个页面都变样了什么情况.新版?
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
      @咸鱼 目前可以试用新版页面,以后有的改了
  18. Sk_god  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.26(Google Chrome 63.0.3239.26)
    我想问问那个TG频道是啥呀,不科学上网还过不去
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.87(Google Chrome 67.0.3396.87)
  19. antiope  Android 8.0.0(Android 8.0.0) / Google Chrome 67.0.3396.87(Google Chrome 67.0.3396.87)
    stylish因为窃取用户历史浏览数据被Firefox和chrome下架了。。。。。
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.87(Google Chrome 67.0.3396.87)
      @antiope 立即更换Stylus
      1. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
        @神代綺凜 stylus可以导入stylish的样式吗?|´・ω・)ノ
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
          @seasmogchan 一直都可以
      2. Deeran  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
        @神代綺凜 我当时觉得推广这个插件是对的..(官方没给我费用 ) stylish强制更新然后覆盖全屏提示需要获取权限的时候我就知道这货是啥玩意了..
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.87(Google Chrome 67.0.3396.87)
          @Deeran 人人喊打
  20. 油条  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
    B站有了新版页面,ヾ(≧∇≦*)ゝヾ(≧∇≦*)ゝ
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.87(Google Chrome 67.0.3396.87)
      @油条 哪儿?(不过要改什么也等考完试再说
      1. 油条  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
        @神代綺凜 还在测试,现在可以用
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.87(Google Chrome 67.0.3396.87)
          @油条 有一种要推倒重写的不详预感
          1. MingzZ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
            @神代綺凜 视频播放界面右侧有个粉红“试用新版”按钮,变化确实很大