修改 XIuno BBS 4.0 风格简易版,无需 SASS,直接撸 CSS

axiuno 7月前 5154

通过 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 看看。



如果想更加深度的修改,请了解 CSS3 SASS:

http://bbs.xiuno.com/thread-20040.htm

最新回复 (5)
返回
发新帖