fresh模板风格使用教程

模板教程   © 文章版权由 admin 解释,禁止匿名转载

#楼主# 1个月前

在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 版本才能体验哦!赶紧更新吧~


沙发
渲染 29天前

这里推荐使用谷歌浏览器!别的浏览器貌似没有发现有这个功能,比如:火狐


板凳
陈念缘 29天前

大佬牛p,

4楼
冬阳 29天前

要想富先修路,少生孩子多修路

评论

登录后才可发表内容
  • 主题

    40

  • 帖子

    88

  • 关注者

    27

Copyright © 2019 凯特网.   Powered by HYBBS 2.3.3  

Runtime:0.0231s Mem:1939Kb