通过 SASS 修改是最方便的,但是需要安装 nodejs 和 node-sass,有小伙伴觉得麻烦,那来一种简单版本的吧,直接撸 CSS。
1. 在插件开发的时候,先修改 index.php,设置 DEBUG 为 2
!defined('DEBUG') AND define('DEBUG', 2);
2. 后台安装 xn_theme_paopao 这个主题
3. 新建自己的插件目录:myname_theme_xxx,名字按照规律取一个
然后复制 plugin/xn_theme_paopao 下所有的文件到 plugin/myname_theme_xxx 目录
4. 修改 hook/header_link_after.htm:
<style>
body { background: #196e95 !important; background-image: url(plugin/myname_theme_xxx/img/body_bg.jpg) !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 #dfeef2;}
.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
5. 修改 conf.json:
{
"name": "插件名字",
"brief": "插件介绍。",
"version": "1.0",
"bbs_version": "4.0",
"installed": 1,
"enable": 1,
"hooks_rank": [],
"dependencies": []
}
6. 修改 plugin/xn_theme_paopao/conf.json,手工禁用刚才安装的泡泡插件,否则两个插件样式会冲突
"enable": 0
7. 到前台 CTRL+F5 看看。