在0.5版本起，fresh模板正式上线模板皮肤了！

通过修改CSS实现模板不同颜色，不同样式，来美化模板！

那么要如何来自定义使用自己的皮肤样式呢？？

这篇帖子将告诉大家如何创建属于自己独一无二的皮肤样式！

【第一步】

首先进入网站根目录找到如下文件：

文本文档
/View/xr_fresh/static/wap/style/default.css

这个文件是什么文件呢？这个文件是一套模板的默认的样式文件，

我们复制这份文件，在网站目录的

public/fresh_style/

创建一个test目录，这里以test来做演示！

然后把default.css复制到这个新创建的目录内，改名为：fresh_style.css

【第二步】

打开这个css文件修改！如下代码：

Css
:root{
    /* 主题默认配色 */
    --default: #53bcf5;
    --default-50: #e7f6fe;
    --default-100: #ceedfd;
    --default-200: #9ddcfb;
    --default-300: #6ccaf9;
    --default-400: #3bb8f7;
    --default-500: #0aa7f5;
    --default-600: #0885c4;
    --default-700: #066493;
    --default-800: #044362;
    --default-900: #022131;

    /*全局渐变色*/
    --linear-gradient-right: #00aaff;
    --linear-gradient-left: #00dafd;
}

一般不懂的，只需要修改上面的几个参数的颜色基本就OK了！

那么颜色如何改呢？

第一个参数--default这个是主题的默认颜色值

如果你喜欢红色就改成：--default: red

那么主题的整体颜色就会全部变成红色的了！

那么下面的50,100,200这些参数怎么配置呢？

【第三步】

打开《谷歌浏览器》，按下键盘的F12按键在新弹出的窗口依次如图点击，并找到:root这个颜色表：

然后如下图操作，这里以某个颜色为例演示：

我们选择完自己的颜色值之后，例如：#ff5722

这个值，我们把它复制粘贴到fresh_style.css的--default参数，改为--default: #ff5722！

然后再点击如下按钮：

将HEX模式切换成 HSLA模式 如下图的：

切换成功后，我们将L的参数改为95%

然后在点击旁边的按钮，切换回HEX模式，然后复制16进制颜色值

那么这个颜色值就是--default-50的颜色值了。

那么

--default-100就是90%

--default-200就是80%

--default-300就是70%

.......后面的呢以此类推！

【第四步】

渐变颜色值

/*全局渐变色*/

    --linear-gradient-right: #00aaff;

    --linear-gradient-left: #00dafd;

这两个参数是什么呢？目前可以见到的就是顶部的nav导航栏了！

如果不喜欢渐变颜色可以将这两个参数设置为默认颜色值，例如：#ff5722

那么顶部的颜色值就会变成如下图的颜色了：

当然还有登陆按钮的渐变颜色：

当然这里是针对不懂CSS的同学，的简单DIV教学！

如果你懂CSS！那么就牛逼了！

你可以通过这个CSS文件来自定义模板全局的大部分颜色，背景图，等等等等！！

例如下面就是通过修改CSS文件，来为模板设计的一款《新年的春节》皮肤！

当然，这其中涉及的一些图片文件，可以直接放在之前创建的test目录内，由各位自己决定！

【第五步】

那么皮肤设计好后，如何保存到模板呢？我们进入后台，找到模板配置，风格管理，点击添加！如下图：

其中

名字：就是下面图片颜色下面的名字，例如：经典绿

颜色：就是名字上面的颜色方块的颜色，可以对应主题演示

css名：就是你一开始创建的目录的名字这里以test作为演示用

填写好后点击保存！然后我们前台端进入个人中心，底部有一个皮肤设置，点击进去就能找到如上图所示的皮肤设置看！

点击指定的方块，切换颜色保存，就OK了！如果不点击下方保存，则默认本次有效，如果刷新网站，会恢复为默认颜色~！

保存后，将永久为用户保存，登陆后会自动替换成保存的颜色！除非删除了指定的皮肤fresh_style.css文件！

目前该功能需要更新程序到 0.5 版本才能体验哦！赶紧更新吧~