Nodebb调整紫色主题

已于 2023-06-05 16:56:23 修改
阅读量207 收藏
点赞数
分类专栏： web 文章标签： css html css3
于 2023-04-23 11:11:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27281247/article/details/130316946
版权
该文指导如何在NodeBB的Slick主题中插入自定义CSS代码，以改变字体、链接、复选框、按钮等元素的颜色和样式，并添加了鼠标悬浮时的动画效果，增强了用户体验，特别是主副标题的交互动画。
摘要由CSDN通过智能技术生成

准备说明

在nodebb中仪表盘界面选择 管理-> 主题-> Slick theme
然后插入自定义css代码

CSS

//body
body{
    font-size: 16px;
}

a {
    color: #8e43b7;
    text-decoration: none;
}

a:focus,a:hover {
    color: #b8aade;
    text-decoration: none
}

a.permalink{
    color: #8e43b7;
}


//复选框
.checkbox input:checked+.input-helper:before {
    background-color: #8e43b7;
}

.checkbox input:checked+.input-helper:before, .radio input:checked+.input-helper:before {
    border-color: #8e43b7;
}


i:hover {
    //outline: 0!important;
    //-webkit-tap-highlight-color: transparent!important;
    color:#b8aade;
}

.category [component="category/topic"].unread .title a {
    color: #b8aade
}

.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
    margin-bottom: 20px;
}

.fa,.fab,.fad,.fal,.far,.fas {
    margin-right: 15px;
}

.breadcrumb {
    margin-top: 20px;
}

//title 

.form-control:focus {
    border-color: #b8aade;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(175, 154, 230,.6)
}


.load-bar .bar{
    background-color: #b8aade;
}

.bar:nth-child(1) {
    background-color: #b8aade;
    animation: loading 3s linear infinite;
}

#content {
    transition: opacity 150ms linear;
    margin-bottom: 20px;
    margin-top:20px
}

//编辑栏头
.pull-left {
    color: #bba7cf;
}

.btn.btn-primary a{
    color:#fff !important;
}

.topic .post-bar .tags a {
    color: #8e43b7;
}

.btn-primary {
    background-color: #8674d6!important;
    border-color: #b8aade!important;
}

.composer .mobile-navbar {
    background: #8674d6;
}

.btn-primary:hover {
    color: #fff;
    background-color: #8674d6;
    border-color: #b8aade;
}


.btn-primary.focus,.btn-primary:focus {
    color: #fff;
    background-color: #694a9f;
    border-color: #b8aade
}

.btn-primary:hover {
    color: #fff;
    background-color: #694a9f;
    border-color: #b8aade
}

.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #694a9f;
    border-color: #204d74
}

.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,.open>.dropdown-toggle.btn-primary:hover {
    color: #fff;
    background-color: #694a9f;
    border-color: #8674d6
}

btn-primary.disabled.focus,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled].focus,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover {
    background-color: #694a9f;
    border-color: #8674d6
}

.btn-primary .badge {
    color: #6656c1;
    background-color: #fff
}

.btn-success {
    color: #fff;
    background-color: #8674d6;
    border-color: #8674d6
}
//编辑栏头
.btn-primary {
    background-color: #8674d6;
    border-color: #b8aade;
}

.composer .mobile-navbar {
    background: #8674d6;
}

.btn-primary:hover {
    color: #fff;
    background-color: #8674d6;
    border-color: #b8aade;
}


.btn-primary.focus,.btn-primary:focus {
    color: #fff;
    background-color: #694a9f;
    border-color: #b8aade
}

.btn-primary:hover {
    color: #fff;
    background-color: #694a9f;
    border-color: #b8aade
}

.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #694a9f;
    border-color: #204d74
}

.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,.open>.dropdown-toggle.btn-primary:hover {
    color: #fff;
    background-color: #694a9f;
    border-color: #8674d6
}

.btn-primary.disabled.focus,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled].focus,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover {
    background-color: #694a9f;
    border-color: #8674d6
}

.btn-primary .badge {
    color: #6656c1;
    background-color: #fff
}

.btn-success {
    color: #fff;
    background-color: #8674d6;
    border-color: #8674d6
}

.btn-success.focus,.btn-success:focus {
    color: #fff;
    background-color: #694a9f;
    border-color: #8674d6
}

.btn-success:hover {
    color: #fff;
    background-color: #694a9f;
    border-color: #8674d6
}

.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success {
    color: #fff;
    background-color: #694a9f;
    border-color: #8674d6
}

.btn-success.active.focus,.btn-success.active:focus,.btn-success.active:hover,.btn-success:active.focus,.btn-success:active:focus,.btn-success:active:hover,.open>.dropdown-toggle.btn-success.focus,.open>.dropdown-toggle.btn-success:focus,.open>.dropdown-toggle.btn-success:hover {
    color: #fff;
    background-color: #694a9f;
    border-color: #8674d6
}

.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success {
    background-image: none
}

.btn-success.disabled.focus,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled].focus,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover {
    background-color: #8674d6;
    border-color: #694a9f
}


.btn-success.focus,.btn-success:focus {
    color: #fff;
    background-color: #694a9f;
    border-color: #8674d6
}

.btn-success:hover {
    color: #fff;
    background-color: #694a9f;
    border-color: #8674d6
}

.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success {
    color: #fff;
    background-color: #694a9f;
    border-color: #8674d6
}

.btn-success.active.focus,.btn-success.active:focus,.btn-success.active:hover,.btn-success:active.focus,.btn-success:active:focus,.btn-success:active:hover,.open>.dropdown-toggle.btn-success.focus,.open>.dropdown-toggle.btn-success:focus,.open>.dropdown-toggle.btn-success:hover {
    color: #fff;
    background-color: #694a9f;
    border-color: #8674d6
}

.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success {
    background-image: none
}

.btn-success.disabled.focus,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled].focus,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover {
    background-color: #8674d6;
    border-color: #694a9f
}


//手机侧边栏
#menu a, #menu button {
    color: #9089b5;
}

.tag-list .tag-container a {
    color: #ffffff; 
    padding: 1px 3px;
    border-radius: 2px;
    border: 1px solid #9089b5;
    background-color:#694a9f
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: #fff;
    background-color: #694a9f;
}
//label
.label-info {
    background-color: #694a9f;
}

//-------------------------主题颜色-------------------------


.tag-list .tag-container a:hover {
    color: #d3cef5;
}

.navbar-default #main-nav li>a:hover {
    border-bottom-color: #b8aade;
}

.navbar-default .navbar-brand {
    font-weight: bold;
    color: #6a5acd;
    font-size: 48px;
}


.navbar-default #main-nav .active>a {
    color: #6a5acd;
    background: 0 0;
}

.category .topics-header .header-title {
    border-bottom: 2px solid #6a5acd;
}

.categories .categories-header .header-title {
    border-bottom: 2px solid #6a5acd;
}


.categories .category-info .category-info-content .category-icon {
    color: #6a5acd;
}

.categories .category-info .subcategories .subcategory .subcategory-icon {
    color:#8674d6;
}

//-------------------------主题颜色-------------------------END

a.category-title{
  position: relative;
}

a.category-title::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background-color: #6a5acd;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}

a.category-title:hover{
    color: #6a5acd;
}
//鼠标悬浮动画
a.category-title:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

a.subcategory-title {
  text-decoration: none;
  color: #6a5acd;
  font-weight: 700;
  position: relative;
}

a.subcategory-title::before {
  content: '';
  background-color: hsla(255,100%,80%,0.75);
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 3px;
  z-index: -1;
  transition: all .3s ease-in-out;
}

a.subcategory-title:hover{
    color: #6a5acd;
}

a.subcategory-title:hover::before {
  bottom: 0;
  height: 100%;
}

使用效果

  • 原版效果
    在这里插入图片描述
    纯静态页面

  • 紫色效果
    请添加图片描述

在主标题和副标题页加入了交互动画效果

分割线

上面的方法纯属犯蠢
详情请见 ： https://github.com/pichalite/nodebb-theme-slick/blob/master/less/variables.less#L23
但是动画效果还是可以用参考的

nodebb-theme-mff:Minecraft Forge France的NodeBB主题
05-26
适用于NodeBB的Minecraft Forge France主题 为构建的NodeBB主题。 这个主题取决于。
nodebb-theme-material:使用Google Material Design的NodeBB主题
05-23
使用Google Material Design的NodeBB主题 安装 * Install this theme using the "Plugins" page in NodeBB ACP * After installation switch to the theme using the "Themes" page in ACP * Restart NodeBB 学分 Animate.css- //daneden.me/animate Alfiana E.Sibuea的海浪 nodebb主题，角色由
nodebb-theme-slick:NodeBB的光滑主题
03-16
NodeBB的光滑主题
nodebb-theme-simple:nodebb简单主题，基于persona制作
04-07
NodeBB的简单主题 该存储库包含基于的主题的所有准备工作。 如果您希望基于另一个受支持的主题作为主题，请切换到相应的分支： 分叉它可以基于它创建您自己的主题！ 有些事情要改变 您应该将此主题从simple重命名为其他名称。 在以下文件中更改该单词的所有实例： package.json plugin.json theme.json 完成后... 确保将其他一些元数据添加到package.json ，如下所示： " author " : { " name " : " Your Name " , " email " : " Your Email " , " url " : " Your website " }, " repository " : { " type " : " git " , " url " : " https://github
nodebb-theme-material-old:使用 Google Material Design 的 NodeBB 主题
06-02
使用 Google Material Design 的 NodeBB 主题 安装 * Install this theme using the "Plugins" page in NodeBB ACP * After installation switch to the theme using the "Themes" page in ACP * Restart NodeBB 学分 nodebb主题淡紫色的 bootstrap-material-design 通过
nodebb-theme-lavender:NodeBB的简单主题。 查看此工作随附的主题指南
05-23
NodeBB的薰衣草主题 NodeBB的简单主题。 在查看该工作随附的主题指南。 屏幕截图 主视图 分类视图 主题检视 安装 npm install nodebb-theme-lavender 学分 由从“ White Plum”修改而来的
nodebb-theme-oxide
04-13
:party_popper: Nodebb-theme-oxide NodeBB主题看起来与GitHub设计相似。 主题本身尚未完全完成，可能仍有某些地方缺少CSS样式，此外，可能还需要根据您的喜好更改某些视觉组件。 :books: 安装 npm我nodebb-theme-oxide 安装非常简单，您要做的就是登录SSH，进入主nodebb目录，然后复制并粘贴以上命令。 它将自动为您安装主题。 完成此步骤后，您必须进入“ ACP”才能在“外观”>“主题”部分中启用它。 选择主题后，它将要求您重新启动并重建NodeBB实例，然后执行。 享受这个很棒的主题！ oo :ghost: :page_facing_up: 贡献 叉吧！ 创建功能分支：git checkout -b my-new-feature 提交更改：git commit -am'添加一些功能' 推送到分支：git push origin my-new-feature 建立公关！ :face_with_monocle:
nodebb-theme-ricequant:针对RiceQuant的NodeBB主题
05-25
《NodeBB主题“RiceQuant”详解：Smarty模板引擎的应用与实践》 在Web开发领域，社区论坛系统作为用户互动的重要平台，其界面设计和用户体验往往直接影响到用户的参与度。NodeBB是一款流行的开源论坛软件，以其高效...
nodebb-plugin-topic-color:一个 NodeBB 插件，为主题标题添加一些颜色
06-30
NodeBB 主题颜色 一个 NodeBB 插件，为主题标题添加一些颜色。 安装 就如此容易 ： npm install nodebb-plugin-topic-color 用法 安装后转到 ACP 并启用插件。 选择能够为其主题着色的组。 或者创建Bucket组并将...
nodebb-theme-rocket-redux:NodeBB论坛基于卡片设计的主题。 启用移动
05-02
NodeBB的火箭主题 NodeBB论坛基于卡片设计的主题。 已启用移动设备。 “ redux”版本是以为基础重写的原始火箭主题。 屏幕截图 安装 通过“ ACP /插件”页面npm install nodebb-theme-rocket-redux ，或执行npm install nodebb-theme-rocket-redux 学分 感谢提供的首页新闻提要设计。
nodebb-theme-awge:AWGE论坛的Nodebb主题
04-27
nodebb-主题-awge AWGE论坛的Nodebb主题 注意：某些功能尚未实现。 我做了完成AWGE论坛所需的一切，我并不是希望这成为一个完整的主题。 这也打算与我的自定义作曲家一起使用。 在这里找到： : 网站： ： 作者：亚历克斯·肖特 作者联系方式：@_alexshortt（Twitter） Github回购： : 检查files.text以查看从默认主题更改了哪些文件
nodebb-theme-llamamall:NodeBB 的 Llamamall 主题
06-24
NodeBB 的 Llamamall 主题 NodeBB 的 Llamamall 主题 这个主题是为一个客户端项目开发的，所以不要指望它是一个有效的 nodebb 主题或者干脆不要使用！
nodebb-theme-peace:基于角色的主题
05-03
NodeBB的和平主题 和平是基于角色的主题，它通过边栏修改主题视图 屏幕截图 ！[]（ ）
探索优雅的紫色调：purple.css 开源主题
最新发布
gitblog_00081的博客
05-22 341
探索优雅的紫色调：purple.css 开源主题 typora-purple-themeA purple theme for Typora项目地址:https://gitcode.com/gh_mirrors/ty/typora-purple-theme 项目简介 欢迎来到一个充满创意和技术魅力的世界，这里我们向您推荐一款名为purple.css的开源项目。这个项目提供了一系列以紫色为主调的CS...
使用nodebb搭建一个论坛
qq_36742720的博客
03-22 1420
由于现在手头上是mac，所以基于mac上搭建，下面讲具体搭建过程。当然其他操作系统用户可访问： https://www.kancloud.cn/a632079/nodebb-cn/372550 里面除了mac，还有其他操作系统的搭建过程。希望大家学习愉快～ 言归正传： OSX Mavericks 需要的软件 首先，安装以下程序： http://nodejs.org/ http://...
nodebb部署&开发记录
z_orz_d的博客
09-28 1226
nodebb论坛部署&二次开发过程记录
探秘 NodeBB-China：一个高效、可定制化的社区论坛平台
gitblog_00017的博客
03-29 970
探秘 NodeBB-China：一个高效、可定制化的社区论坛平台 去发现同类优质开源项目:https://gitcode.com/ 在寻找一款现代化、高性能且易于管理的社区论坛软件吗？那么， 可能正是你需要的答案。基于流行的 Node.js 框架构建，NodeBB-China 是 NodeBB 的中国本地化版本，它提供了一套强大且灵活的功能，适用于各种类型在线社群。 项目简介 NodeBB-Chi...
react中的antd-自定义antd的主题色
hello_helloworld的博客
08-31 1425
react中的antd-自定义antd主题色
nodeBB项目的目录结构简介（nodeBB系列三）
秋天未成熟的博客
01-30 2176
nodeBB项目的目录结构做一个简要讲解 项目基于目前最新的nodeBB 1.7.4的基础进行讲解 第一层级目录讲解 ├── app.js ├── build ├── config.json ├── Dockerfile ├── Gruntfile.js ├── install ├── LICENSE ├── loader.js ├── logs ├── nod
docker安装nodebb
10-20
使用Docker安装NodeBB可以简化安装过程并提高部署效率。以下是安装步骤： 1. 检查本地Docker环境，包括Docker版本、状态和Docker Compose版本。 2. 下载NodeBB镜像。 3. 编辑docker-compose文件，包括创建数据目录和容器。 4. 部署NodeBB，包括创建容器和查看容器状态。 5. 进行NodeBB的初始配置，包括配置管理员账号、设置数据库信息和进行初始化。 6. 访问NodeBB社区平台，包括进入登录页、后台和前台，以及设置中文。 另外，还可以使用以下命令安装NodeBB： docker run --restart always --name forum --network mongo-net -p 80:4567 -d nodebb/docker 或者使用以下命令： docker run --name my-forum-nodebb --link my-forum-redis:redis -P -t -i nickjanssen/nodebb 以上命令会要求您配置NodeBB实例，因为找不到配置文件。除了Redis主机名之外的所有设置只需按Enter键即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值