In the background application of Yii2 Starter Kit, adjust its style based on a set of themes to conform to the design

1. Previous:https://www.shuijingwanwq.com/2017/11/30/2084/

2. The existing default interface, as shown in Figure 1

Figure 1

3. The designed UI interface needs to be implemented in this way, as shown in Figure 2

Figure 2

4. Copy:\vendor\bower\admin-lte\build\less\variables.less To: \backend\web\themes\default\css\variables.less, clear all the contents

5. Create a new one: \backend\web\themes\default\css\_all-skins.less, as shown in Figure 3

Figure 3

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

6. Create a new one: \backend\web\themes\default\css\adminlte.less, as shown in Figure 4

Figure 4

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

7. New: \backend\assets\adminlte.php, inherit to \common\assets\adminlte, set $css to an empty array, because the less variable needs to be set to regenerate the corresponding css file, so the default css file needs to be removed, as shown in Figure 5

Figure 5

namespace backend\assets;

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

8. Based on steps 5 and 6, the corresponding CSS file has been automatically compiled, refer to the URL:https://www.shuijingwanwq.com/2017/12/07/2108/, as shown in Figure 6

Figure 6

9. Edit: \backend\assets\backendsset.php, adjust the array of the css file of the resource package, as shown in Figure 7

Figure 7

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

10. Analyze the background color of the sidebar, set in \vendor\bower\admin-lte\dist\css\skins\_all-skins.min.css, as shown in Figure 8

8

11. Get the background color of the sidebar of the design UI, as shown in Figure 9

Figure 9

12. Search #222d32 in \Vendor\Bower\Admin-Lte\Build\less\variables.less, as shown in Figure 10

Figure 10

13. Copy @sidebar-dark-bg: #222d32; to \backend\web\themes\default\css\variables.less, adjusted to: @sidebar-dark-bg: #293e50;, several other variables are similarly adjusted, as shown in Figure 11

Figure 11

14. Check the adjusted interface, the background color of the sidebar, the background color of the top bar, and the width of the sidebar (change from 230px to 280px), all have changed, and are consistent with the design, as shown in Figure 12

Figure 12

15. Check the source code, adminlte.css, _all-skins.css, which has been the theme, as shown in Figure 13

Figure 13

16. In addition to recompiling all new CSS files based on the LESS variable, there is another theme-based solution, which is to extract the corresponding use and use the adjustment. The less code of the whole less variable is only compiled with the code that needs to be covered, but this kind of scheme needs to analyze the source code, and there is a certain difficulty in extracting. Therefore, it is recommended to use a fully recompiled scheme.