Docker系列 深度使用nextcloud (十一) 特效
本文最后更新于 98 天前,如有失效请评论区留言。

本博客由ZGOCLOUD大力赞助!如何更快地访问本站?有需要可加电报群获得更多帮助。本博客用什么VPS?创作不易,请支持苯苯!推荐购买本博客的VIP喔,10元/年即可畅享所有VIP专属内容!

日志

  • 2024-02-09:新增“其它半透明”的额外CSS代码以适应27.x.x28.x.x版本的升级。
  • 2023-07-30:优化隐藏主页按钮代码以避免删除文件界面中的功能按钮缺失。
  • 2023-06-13:新增隐藏公共脚注的特效代码。
  • 2023-06-11:新增Task应用的特效代码。

前言

今天咱又来Nextcloud里玩点花样了 (ฅ´ω`ฅ) 作为一个WordPress博主,我深谙额外CSS对于博客自定义样式的重要性。因此有一天我忽发奇想,Nextcloud是否支持自定义CSS呢?我简单地找了一下,还真有!该功能由一个名为Custom CSS的APP来支持。下面我们就来看看它怎么用!

测试环境

Docker Nextcloud 25.0.2

安装Custom CSS插件

进入应用界面,搜索Custom CSS即可。

msedge_pr8Rec3msz

然后,在主题——Custome CSS里即可添加自定义CSS。用法和WordPress的额外CSS差不多:

msedge_Gr5LMEVYTz

特效

不定期更新

分享页面半透明

访问分享文件:https://nextcloud.hwb0307.com/s/zWRSHCMkzPmw73B,效果变化如下,个人感觉还阔以 (ฅ´ω`ฅ) :

背景一:

image-20230131214844885

背景二:

image-20230131215734662

具体CSS代码如下:

此隐藏内容仅限VIP查看。包年VIP仅10元,建议升级。VIP可享有哪些特权

其它半透明

多在v28后开始需要。 具体如下:

/*file tfoot半透明*/
.files-list__tfoot {
    background-color: transparent !important;
}

/*照片的导航栏透明*/
/*.photos-navigation[data-v-b0f7cf46] {
    background: transparent  !important;
}*/
.photos-navigation {
    background: transparent  !important;
}

隐藏主页按钮

如果你想要一个非常干净的nextcloud首页,没有任何提示:

msedge_Z3nvU7i17W

那么可以这样做:

此隐藏内容仅限VIP查看。包年VIP仅10元,建议升级。VIP可享有哪些特权

登陆框

和博客一样,我不太喜欢登陆框太居中。我设置的效果如下:

msedge_L6PG4epzJU

看上去比较美观些。代码如下:

此隐藏内容仅限VIP查看。包年VIP仅10元,建议升级。VIP可享有哪些特权

Task应用

默认效果如下:

msedge_7r4evDAfRU

修改后效果如下:

msedge_IigrbAVkDl

代码如下:

此隐藏内容仅限VIP查看。包年VIP仅10元,建议升级。VIP可享有哪些特权

隐藏公共脚注

我不太喜欢在分享文件时携带脚注:

msedge_EAARZBv1Sc

应用效果之后:

msedge_w00tZbyHer

感觉界面更加清爽一些!具体代码如下:

此隐藏内容仅限VIP查看。包年VIP仅10元,建议升级。VIP可享有哪些特权

小结

Nextcloud的特效自定义也挺简单的。以后有什么好玩的特效会及时更新 (~ ̄▽ ̄)~

这是一个VVIP的测试模块,不包含任何结果:

此隐藏内容仅限VIP查看。包年VIP仅10元,建议升级。VIP可享有哪些特权

---------------
完结,撒花!如果您点一下广告,可以养活苯苯😍😍😍

感谢ZGOCLOUD友情赞助 (ฅ´ω`ฅ) 本博客基于m2w创作。版权声明:除特殊说明,博客文章均为Bensz原创,依据CC BY-SA 4.0许可证进行授权,转载请附上出处链接及本声明。VIP内容严禁转载!由于可能会成为AI模型(如chatGPT)的训练样本,本博客禁止将AI自动生成内容作为文章上传(特别声明时除外)。如有需要,请至学习地图系统学习本博客的教程。加Telegram群可获得更多帮助喔! | 博客订阅:RSS | 广告招租请留言 | 博客VPS | 致谢渺软公益CDN |

评论

  1. Mouyase
    Windows Chrome 119.0.0.0
    7 月前
    2023-11-09 1:42:12

    大佬,想跟您请教一下,这类让底栏标语半透明的方式,可以使用CSS插件来实现吗?尝试了几次都失败了,于是特来求教。
    😘😘


    查看图片
    Snipaste_2023-11-09_01-36-090179aed419e122b1.md.png

    • 博主
      Mouyase
      Windows Edge 119.0.0.0
      7 月前
      2023-11-10 21:36:28

      看不到这个图片喔!

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇