构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(52)-美化EasyUI皮肤和图标

系列目录

我很久以前就想更新系统的皮肤功能,Easyui 自带的皮肤已经无法满足客户的审美。

皮肤颜色来源于AdminLTE系统。我的颜色全部都这里取的。,所以一共取了11个颜色。1个皮肤=2个banner颜色和1个侧边栏颜色

利用chome的元素查看器可以获取AdminLTE颜色,或者用VS2013自带的吸色器(我是用后者)

我是怎么做的???

我用了原EasyUI 的Gray作为基础皮肤。里面只有这套皮肤我觉得最适合作为基础皮肤

图中为文件结构,skin开头为自己的皮肤。

皮肤里面一定要覆盖基础皮肤的样式。

基础皮肤的样式主要来源于panel-body title  window  tree。一个一个写,我大约覆盖了70个class就可以完成。几kb的东东,100行代码

就可以。下面这个重要,图标哪里来。图标库我引用的是 Font Awesome;这个不是指图片库,而是一个字体库

图标585不够用可以自己定义图标(http://font.baidu.com/editor/) 先导入,然后编辑后导出。或者删除一些无用的来减少带宽

但是我觉得585够用了,目前最新版好像是4.5又多了很多图标。

编辑图标后最后导处woff

不知道Font Awesome 点我进入了解

9个牛B的特性,满足日常需求。只要引入一个CSS文件就可以font-awesome.min.css

--------------------------

上面都是废话:

1.怎么改变我的图标。

只要加更改为fa fa-adjust就会直接显示上面第一个图标

以前的工具栏:是icon-search,现在是 fa fa-search。基本无缝接入

2.Easyui 的Tree如果改变

easyui的Tree默认是有图标的,为了符合皮肤,tree的默认样式我的这样改变的

这是图标组,直接替换原代码里面的tree-folder tree-folder-open分别对应 fa fa-folder和 fa fa-folder-open

替换大约十几处按ctrl+h替换

效果如下

其实改变一个EASYUI 的皮肤并非难事,我只是做了一套red的皮肤,其他全部复制,成批替换2个颜色。

可以下载17讲源码试下感受下视角的改变,或者直接更改你的项目

17讲源码下载   访问密码 15d3

时间: 2024-11-03 21:55:31

构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(52)-美化EasyUI皮肤和图标的相关文章

构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(51)-系统升级

系统很久没有更新内容了,最近花了2个月的时间每天一点点,从原有系统 MVC4+EF5+UNITY2.X+Quartz 2.0+easyui 1.3.4无缝接入 MVC5+EF6+Unity4.x+Quartz 2.3 +easyui 1.4.3. 并以easyui 1.4.3的gray皮肤为基础,升级10个扁平化皮肤 皮肤查看地址 更新的主要目的:新的MVC5特性和更好的性能 记录一下升级过程. 1.除了web层,其他全部提取. 2.新建解决方案.以前命名空间为App.现在更名为Apps. 3.

构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(66)-MVC WebApi 用户验证 (2)

前言: 构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(65)-MVC WebApi 用户验证 (1) 回顾上一节,我们利用webapi简单的登录并进行了同域访问与跨域访问来获得Token,您可以跳转到上一节下载代码来一起动手. 继续上一篇的文章,我们接下来演示利用拿到的Token来访问接口,管理接口,利用系统权限管理接口,对每个接口进行授权(管理接口为选读部分,因为你需要阅读最开始权限管理部分(18-27节),才能阅读这部分) 开发环境: V

构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(1)-前言与目录(持续更新中...)

开篇:从50开始系统已经由MVC4+EF5+UNITY2.X+Quartz 2.0+easyui 1.3.4无缝接入 MVC5+EF6+Unity4.x+Quartz 2.3 +easyui 1.4.3. 从50节起为MVC5+EF6+Unity4.x+Quartz 2.3 +easyui 1.4.3.的特性文章 所以你们也要更新你们的环境 功能不变属于无缝接入,最大改变只在UI,初学同学,直接使用MVC5 开发工具:VS2013+SQL2012 相关代码:演示地址暂时关闭   第2讲源码下载 

构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(54)-工作流设计-所有流程监控

系列目录 先补充一个平面化登陆页面代码,自己更换喜欢的颜色背景 @using Apps.Common; @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta content="IE=11.0000" http-equiv="X-UA-Compatible"> <meta http-equiv="Content-Type" content

构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(65)-MVC与ECharts

ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表. ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化. 丰富的图表类型 ECharts 提供了常规的折线图,柱状图,散点图,

构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(60)-系统总结

前言: 起初写这个框架的时候,可以说在当时来说并不是很流行的设计模式,那是在2012年,面向对象的编程大家都很熟悉, 但是“注入.控制反转(DI,IOC,依赖注入).AOP切面编程”新兴名词 很多人并不知道特别是从事.NET开发的人,至少在当时 是这么样的,但是在今天它们却是非常流行的技术指标,很多大牛也承认,这是主流的开发模式,你们可以从招聘网的技术岗 位看出. 嘿嘿... 我从事过MVC2.0到5.0的相关开发工作,见证了MVC的成熟演变过程,就像本框架一样,设计模式未曾改变,但是代码一直在

构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(55)-工作流设计-表单布局

前言:这一节比较有趣.基本纯UI,但是不是很复杂 有了实现表单的打印和更加符合流程表单方式,我们必须自定义布局来适合业务场景打印!我们想要什么效果?看下图 (我们没有布局之前的表单和设置布局后的表单) 改变后的布局 本节知识点: easyui draggable 与 resizable 的结合使用(拖动与设置大小) 在Form添加Action Action提取来自48节的Create代码.改下名称 [SupportFilter(ActionName = "Edit")] public

构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(64)-WebApi与Unity注入

前言: 有时候我们系统需要开放数据给手机App端或其他移动设备,不得不说Asp.net WebApi是目前首选 本节记录Asp.net MVC WebApi怎么利用Unity注入.系列开头已经讲解了普通的Asp.net MVC如何用Unity注入容器 不明白什么是IOC,DI,控制反转的自行百度补脑,否则无法阅读本文 其实这也是一次技术上的记录,因为找遍大百度居然没有可以用的利用Unity注入的WebApi!感谢随风朋友的提醒.才能完成本节的指导 为了更好的理解,请下载代码 示例代码下载   h

构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(57)-插件---ueditor使用

目录: 前言 开发环境 知识点 初始使用 自定义工具栏 设置和读取编辑器内容 文件上传 ueditor加水印 ------------------------------------------------ 下载地址在尾部 1.前言:之前一直用KingEditor富文本编辑器,在国产编辑器中算是顶尖的插件.但是这个编辑器集成度较差,也很久没有更新了,今天学习百度产品UEeditor使用! 2.开发环境:VS2013+MVC5 3.知识点:上传加水印功能 下载编辑器 各自选择自己语言的版本.我这里