Mr丶冷文

文章 分类 评论
84 9 4649

站点介绍

冷文学习者(KEVINLU98.COM),记录一个北漂小码农的日常业余生活
顺带帮大家免费代下载IT教程吧的资源 传送门
友链申请地址(直接评论即可): 传送门

Freewind自定义配色

MR丶冷文 2021-11-24 901 8条评论 Freewind相关 freewind

首页 / 正文
Freewind主题v1.4版本已经发布,详情与下载请关注 Freewind1.4更新
抱歉:
年后因为工作和生活上的一系列不顺心的事情我无法去维护Freewind主题,目前也在思考一些问题,比如要不要继续工作,或者要不要去读硕士等,等这些事件都处理好了我会继续看Freewind主题的

发布于2022-05-26

说明

目前我提供了4套配色只有左侧栏有顶栏供大家使用,当然有很多朋友想自定义自已的自定义配色,这里就介绍一下如何自定义自定义配色

开始开发

首先在主题根目录/static/css/color下创建你的配色css文件,比如这里创建一个white.css

在文件头部按照如下规范写出注释,不然主题扫这到这个配色

/**
@color-name: 配色名称
@top-color: 前端更换配色的预览顶栏颜色
@left-color: 前端更换配色的预览侧栏颜色
 */

优雅白配色的注释

/**
@color-name: 优雅白
@top-color: #F9F9F9
@left-color: #F9F9F9
 */

然后在站点找到想要覆盖的组件颜色进行自定义css即可,只推荐换配色,不然换了其它样式有可能会让排版混乱

我这里提供几个觉见位置的css选择器

/*
左侧side-bar背景色
 */
.bg-left {
}

/*
站点顶栏logo
 */
.free-logo {
}

/*
站点信息
 */
.website-info {
}

/**
左侧导航两个字
 */
.nav-list ul li.nav-title {
}


/**
左侧导航栏文字
 */
.nav-list ul a {
}

/*
左侧导航激活颜色
 */
.nav-list .nav-active {
}

/*
左侧导航选中颜色
 */
.nav-list ul a:hover:not(.nav-active) {
}

/*
左侧分类与页面
 */
.nav-list .child-nav-list {
}

/*
左侧分类与页面激活
 */
.nav-list .child-nav-list a.child-active {
}

/*
左侧分类与页面选中
 */
.nav-list .child-nav-list li a:hover {
}

/*
左侧side-bar 下方联系站长
 */
#app-aside .user-footer {
}

/*
左侧side-bar 下方联系站长的a标签
 */
#app-aside .user-footer a {
}


/*
顶栏
 */
.bg-top {
}

/*
顶栏右侧文字
 */
.top-bar .top-list a {
}


/*
中部footer
 */
#app-footer {
}


/*
中部footer 中的a标签
 */
#app-footer a {
}

例如

我以优雅白为例给出css文件内容

/**
@color-name: 优雅白
@top-color: #F9F9F9
@left-color: #F9F9F9
 */

/**
top-color: 首页预览顶栏配色
left-color: 首页预览左侧配色
 */

/*
左侧side-bar背景色
 */
.bg-left {
    background-color: #F9F9F9;
}

/*
站点顶栏logo
 */
.free-logo {
    color: #111;
}

#app-header .sidebar-header {
    box-shadow: 5px 0 9px -5px rgba(0, 0, 0, .1);
}

/*
站点信息
 */
.website-info {
    color: #777;
    border-bottom: 1px solid #fff;
}


/**
左侧导航两个字
 */
.nav-list ul li.nav-title {
    color: #777777;
    font-weight: 900;
}

/**
左侧导航栏文字
 */
.nav-list ul a {
    color: #777777;
}

/*
左侧导航激活颜色
 */
.nav-list .nav-active {
    background-color: #E9E9E9;
    color: black;
}

/*
左侧导航选中颜色
 */
.nav-list ul a:hover:not(.nav-active) {
    background-color: #E9E9E9;
    color: black;
}

/*
左侧分类与页面
 */
.nav-list .child-nav-list {
    background-color: #E9E9E9;
}

/*
左侧分类与页面激活
 */
.nav-list .child-nav-list a.child-active {
    background-color: #d9d9d9 !important;
    color: black;
}

/*
左侧分类与页面选中
 */
.nav-list .child-nav-list li a:hover {
    background-color: #d9d9d9 !important;
    color: black;
}


/*
左侧side-bar 下方联系站长
 */
#app-aside .user-footer {
    background-color: #f1f1f1;
    color: #777777;
}

/*
左侧side-bar 下方联系站长的a标签
 */
#app-aside .user-footer a {
    color: #777777;
}

/*
顶栏
 */
.bg-top {
    background-color: #F9F9F9;
}

/*
顶栏右侧文字
 */
.top-bar .top-list a {
    color: #777777;
}

/*
中部footer
 */
#app-footer {
    background-color: #f9f9f9;
    color: #777777;
}

/*
中部footer 中的a标签
 */
#app-footer a {
    color: #777777;
}

使用

站点可以在后台控制->外观设置->外观设置->站点设置中更换配色

https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/2053/85af3af2a7d04ba59752004832d68ff2.png

用户可以在这里选择本地配色
https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/2053/11db0c616d8941848e5c435c8f2a0885.png

评论(8)

  1. 打瞌睡 游客 2022-05-13 14:07 回复

    报错啊,显示配色不能为空

    1. yuyu 游客 2022-06-04 22:01 回复

      @打瞌睡

      设置-永久链接-开启重写,必须成功

  2. 喜爱福 游客 2022-03-04 16:40 回复

    棒极了

  3. sadfasd 游客 2021-12-21 23:22 回复

    这个很不错        

  4. ㊣經de尐孩! 游客 2021-12-21 20:07 回复

    sdsafsda开工

  5. 黄爸爸 游客 2021-12-07 10:04 回复

    1111工

  6. joker 游客 2021-11-24 18:48 回复

    左侧导航页要如何设置

    1. MR丶冷文 管理员 2021-11-24 19:09 回复

      @joker

      可以参考上面的css代码,你到你想改的元素的css选择器去覆盖样式就好啦

最新评论

  • 2726QWQ

    下载看看

  • 2726QWQ

    大佬

  • 2726QWQ

    用用

  • rosin

    支持

  • 哈哈

    支持一波

日历

2022年08月

 123456
78910111213
14151617181920
21222324252627
28293031   

文章目录

站点公告
Freewind主题v1.4版本已经发布,详情与下载请关注 Freewind1.4更新
抱歉:
年后因为工作和生活上的一系列不顺心的事情我无法去维护Freewind主题,目前也在思考一些问题,比如要不要继续工作,或者要不要去读硕士等,等这些事件都处理好了我会继续看Freewind主题的
点击小铃铛关闭
配色方案