在 Yii2 Starter Kit 的后台应用中,基于一套主题,调整其样式,以与设计一致

1、上一篇:http://www.shuijingwanwq.com/2017/11/30/2084/

2、现有的默认界面,如图1

现有的默认界面

图1

3、设计的UI界面,需要如此实现,如图2

设计的UI界面,需要如此实现

图2

4、复制:/vendor/bower/admin-lte/build/less/variables.less 至:/backend/web/themes/default/css/variables.less,清空其中的所有内容

5、新建:/backend/web/themes/default/css/_all-skins.less,如图3

新建:/backend/web/themes/default/css/_all-skins.less

图3

@admin-lte-path: "../../../../../vendor/bower/admin-lte";
@import "@{admin-lte-path}/build/less/skins/_all-skins.less";
@import "variables.less";

6、新建:/backend/web/themes/default/css/AdminLTE.less,如图4

新建:/backend/web/themes/default/css/AdminLTE.less

图4

@admin-lte-path: "../../../../../vendor/bower/admin-lte";
@import "@{admin-lte-path}/build/less/AdminLTE.less";
@import "variables.less";

7、新建:/backend/assets/AdminLte.php,继承至 /common/assets/AdminLte,设置$css为空数组,因为需要设置less变量,重新生成对应的CSS文件,所以默认的CSS文件需要去掉,如图5

新建:/backend/assets/AdminLte.php,继承至 /common/assets/AdminLte,设置$css为空数组,因为需要设置less变量,重新生成对应的CSS文件,所以默认的CSS文件需要去掉

图5

namespace backend/assets;

class AdminLte extends /common/assets/AdminLte
{
    public $css = [
    ];
}

8、基于第5、6步骤,已经自动编译出对应的CSS文件,参考网址:http://www.shuijingwanwq.com/2017/12/07/2108/ ,如图6

基于第5、6步骤,已经自动编译出对应的CSS文件,参考网址:http://www.shuijingwanwq.com/2017/12/07/2108/

图6

9、编辑:/backend/assets/BackendAsset.php,调整该资源包CSS文件的数组,如图7

编辑:/backend/assets/BackendAsset.php,调整该资源包CSS文件的数组

图7

    public $css = [
        'css/AdminLTE.css',
        'css/_all-skins.css',
        'css/style.css'
    ];

10、分析侧边栏背景颜色,在 /vendor/bower/admin-lte/dist/css/skins/_all-skins.min.css 中设置的,如图8

分析侧边栏背景颜色,在 /vendor/bower/admin-lte/dist/css/skins/_all-skins.min.css 中设置的

图8

11、获取设计UI的侧边栏背景颜色,如图9

获取设计UI的侧边栏背景颜色

图9

12、在 /vendor/bower/admin-lte/build/less/variables.less 中搜索 #222d32,如图10

在 /vendor/bower/admin-lte/build/less/variables.less 中搜索 #222d32

图10

13、将 @sidebar-dark-bg: #222d32; 复制至 /backend/web/themes/default/css/variables.less,调整为:@sidebar-dark-bg: #293e50;,其他几个变量类似地调整,如图11

将 @sidebar-dark-bg: #222d32; 复制至 /backend/web/themes/default/css/variables.less,调整为:@sidebar-dark-bg: #293e50;,其他几个变量类似地调整

图11

14、查看调整后的界面,侧边栏背景颜色、顶栏背景颜色、侧边栏宽度(从230px变化为280px),皆已经发生变化了,且与设计一致,如图12

查看调整后的界面,侧边栏背景颜色、顶栏背景颜色、侧边栏宽度(从230px变化为280px),皆已经发生变化了,且与设计一致

图12

15、查看源代码,AdminLTE.css、_all-skins.css,已经实现主题化了,如图13

查看源代码,AdminLTE.css、_all-skins.css,已经实现主题化了

图13

16、除了基于less变量全部重新编译为全新的CSS文件,还有另外一种主题化的方案,便是提取出对应的使用了需要调整的less变量的less代码,仅编译部分需要覆盖的代码,不过此种方案,需要分析源代码,提取是存在一定的难度的了。因此,建议采用全部重新编译的方案。

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/250388.html

(0)
上一篇 2022年4月29日
下一篇 2022年4月29日

相关推荐

发表回复

登录后才能评论