Xiuno BBS 4.0 模板制作入门教程(更换背景、修订颜色)

Xiuno BBS 模板也是模板按照插件的制作流程来做的。

1. 首先我们要找到插入点:view/htm/header.inc.htm 文件中的制作 header_link_after.htm

2. 新建 plugin/xn_theme_paopao,这是入门云服务器一般选多大带宽够用我自己取的名字,你可以用你名字 youname_theme_xxx 这样的教程方法命名你的插件。注意,更换如果是背景风格插件,必须要用 xx_theme_xxx 这种格式,修订这样的颜色主题风格插件会具有排他性,装配的模板同时自动移除其他主题风格插件。

3. header_link_after.htm 这个插入点要注意,制作云服务器一般选多大带宽够用我们的入门 CSS 代码写到这里:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <style> body { background: #196e95 !important; background-image: url(plugin/xn_style_paopao/body_bg.jpg?v=2) !important; background-repeat: no-repeat !important;} #header { background: rgba(0,0,0,0.5) !important; } #footer { background: rgba(0,0,0,0.5) !important; } .card > .card-header { background-image: linear-gradient(0deg, #c4d9e3, #fcfdfd); } .card { background: #f4fbfe !important; } .thread:hover { background-color: rgba(255,255,255,0.6) !important; } .text-grey { color: #90a9b6 !important;} .thread, .post { border-bottom: 1px solid #c3d8e2;} .input-group .form-control, .input-group .custom-select, .input-group .custom-file { background: rgba(255,255,255,0.7);} .card-header-tabs > .nav-item > .nav-link.active { background-image: linear-gradient(0deg, #dfedf4, #f2f2f2); border-color: #c9dce5; border-bottom-color: #dfebf1;} .nav_tag_list a { color: #c5dbe4; } .nav_tag_list a.active { color: #6fd2ff; } .btn-secondary { background-color:#405763; border-color:#3b515d; } .btn-secondary:hover { background-color: #374b55; border-color: #344751; } .blockquote { background: #e0eaef;} </style>

4. 相关文件介绍:

body_bg.jpg:是 CSS 用到的背景图片,我会用附件传上来。教程

icon.png:是更换插件的 ICON 文件,宽高 64x64 像素

conf.json:是背景插件的配置文件,内容:

conf.json:是修订插件的配置文件,内容:

1 2 3 4 5 6 7 8 9 10 { "name": "官方皮肤:蓝色背景泡泡", "brief": "蓝色背景泡泡,更换了一张背景图,导航改了个半透明背景。", "version": "1.1", "bbs_version": "4.0", "installed": 1, "enable": 1, "hooks_rank": [], "dependencies": [] }

试试看,是不是很简易?

如果要获取该插件也很简易,后台装配 xn_theme_paopao,装完以后 plugin/xn_theme_paopao 目录就是该插件了。

内容看完了
皖ICP备2025077989号-141