构建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

jquery easyui 推荐博客 （MVC+EF+EasyUI+Bootstrap）的更多相关文章

  1. python抓取51CTO博客的推荐博客的全部博文，对标题分词存入mongodb中

    原文地址: python抓取51CTO博客的推荐博客的全部博文,对标题分词存入mongodb中

  2. linq 书籍推荐 博客汇总 （经典）

    1.博客推荐 博客园linq专区 https://kb.cnblogs.com/zt/linq/ LINQ体验系列文章导航 https://www.cnblogs.com/lyj/archive/20 ...

  3. 实现网上大神的asp.net mvc + ef +easyui

    大神开源博客: http://www.cnblogs.com/ymnets/p/3424309.html 系统更换UI:本人喜欢基于bootstrap的adminlteUI,所以后面会将UI更换为ad ...

  4. 第一篇博客-MVC路由简述

    一直念叨着写博客,可是迟迟不见下笔,工作到现在,技术长进了一点,但是记的东西都很杂,也没个思路,也不知道怎么去写一遍博客,现在在做MVC,写一点跟MVC有关的吧. 我们都知道MVC程序的所有请求都是先 ...

  5. iOS 推荐博客

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Franz Fang链接:http://www.zhihu.com/question/20264108/answer/3026 ...

  6. .NET 推荐博客

    燎原之星的博客 农码一生博文索引 http://www.cnblogs.com/zhaopei/p/Indexes.html 那些年搞不懂的术语.概念:协变.逆变.不变体 http://www.cnb ...

  7. 【第十一篇】这一篇来说说MVC+EF+easyui datagrid的查询功能

    老规矩 直接上代码 <form class="form-horizontal"> <div class="box-body"> < ...

  8. 【第一篇】说说MVC+EF easyui dataGrid 动态加载分页表格

    首先上javascript的代码 <script type="text/javascript"> $(function () { LoadGrid(); }) //加载 ...

  9. 转 -- MVC+EF easyui dataGrid 动态加载分页表格

    首先上javascript的代码 <script type="text/javascript"> $(function () { LoadGrid(); }) //加载 ...

随机推荐

  1. [转载]Java web应用中的常见字符编码问题的解决方法

    以下是 Java web应用的常见编码问题 1. html页面的编码 在web应用中,通常浏览器会根据http header: Content-type的值来决定用什么encoding, 比如遇到Co ...

  2. SE16传输配置表数据

    SE16标准工具传输配置表数据 (上面说了配置表,所以并不是所有的表都能SE16传输.) 了解到: 1.如果是可维护的表,SE16,执行 然后:表条目->传输条目.选择请求: 2.对于不可维护的 ...

  3. Linux shell join命令详解

    Linux join命令 2012-02-09 17:49:00| 分类: SHELL | 标签:linux join 文件连接 |字号 订阅join命令 功能:“将两个文件里指定栏位同样的行连接起来 ...

  4. PHP网页导出Word文档的方法分离

    今天要探讨的是PHP网页导出Word文档的方法,使用其他语言的朋友也可以参考,因为原理是差不多的. 原理 一般,有2种方法可以导出doc文档,一种是使用com,并且作为php的一个扩展库安装到服务器上 ...

  5. HR_ROS 节点信息

    https://stackoverflow.com/questions/24638063/install-node-serialport-module-on-arm-linux https://blo ...

  6. awk过滤磁盘使用率

    过滤出大于某个值的磁盘使用率: #!/bin/bash diskspace=`df -Ph`IFS="\n" for line in $diskspace;do        ec ...

  7. Ogre场景编辑器Ogitor源代码的构建

    本文转自:http://blog.csdn.net/zhengkangchen/article/details/6000769 Ogitor-0.4.2源代码构建,不少时间,这里记录一下: 下载源代码 ...

  8. 介绍几款Web服务器性能压力测试工具

    一.http_load 程序非常小,解压后也不到100K http_load以并行复用的方式运行,用以测试web服务器的吞吐量与负载. 但是它不同于大多数压力测试工具,它可以以一个单一的进程运行,一般 ...

  9. IE和FireFox关于CSS的兼容性

    1. [代码][Java]代码 CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下.对于web2 ...

  10. Linux 网卡操作与安全初始化

    一.Linux网络相关概念和修改IP地址的方法 1.1 网卡命名方式 CENTOS6的网卡命名方式: 它会根据情况有所改变而非唯一且固定,在CENTOS6之前,网络接口使用连续号码命名: eth0. ...