构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(52)-美化EasyUI皮肤和图标
構建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
總結
以上是生活随笔為你收集整理的构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(52)-美化EasyUI皮肤和图标的全部內容,希望文章能夠幫你解決所遇到的問題。