1. Previous article: https://www.shuijingwanwq.com/2017/11/30/2084/
2. The current default interface is shown in Figure 1.
3. The designed UI interface needs to be implemented as shown in Figure 2.
4. Copy \vendor\bower\admin-lte\build\less\variables.less to \backend\web\themes\default\css\variables.less, and clear all its contents.
5. Create \backend\web\themes\default\css\_all-skins.less, as shown in Figure 3.
@admin-lte-path: "../../../../../vendor/bower/admin-lte";
@import "@{admin-lte-path}/build/less/skins/_all-skins.less";
@import "variables.less";
6. Create \backend\web\themes\default\css\AdminLTE.less, as shown in Figure 4.
@admin-lte-path: "../../../../../vendor/bower/admin-lte";
@import "@{admin-lte-path}/build/less/AdminLTE.less";
@import "variables.less";
7. Create \backend\assets\AdminLte.php, which inherits from \common\assets\AdminLte, and set $css to an empty array. Because we need to set Less variables and regenerate the corresponding CSS files, the default CSS files must be removed, as shown in Figure 5.
namespace backend\assets;
class AdminLte extends \common\assets\AdminLte
{
public $css = [
];
}
8. Based on steps 5 and 6, the corresponding CSS files have been automatically compiled. Reference URL: https://www.shuijingwanwq.com/2017/12/07/2108/ , as shown in Figure 6.
9. Edit \backend\assets\BackendAsset.php to adjust the array of CSS files for this asset bundle, as shown in Figure 7.
public $css = [
'css/AdminLTE.css',
'css/_all-skins.css',
'css/style.css'
];
10. Analyze the sidebar background color, which is set in \vendor\bower\admin-lte\dist\css\skins\_all-skins.min.css, as shown in Figure 8.
11. Get the sidebar background color from the UI design, as shown in Figure 9.
12. Search for #222d32 in \vendor\bower\admin-lte\build\less\variables.less, as shown in Figure 10.
13. Copy @sidebar-dark-bg: #222d32; to \backend\web\themes\default\css\variables.less, and change it to: @sidebar-dark-bg: #293e50;. Adjust the other variables similarly, as shown in Figure 11.
14. Check the adjusted interface. The sidebar background color, top bar background color, and sidebar width (changed from 230px to 280px) have all been updated and are consistent with the design, as shown in Figure 12.
15. View the source code. AdminLTE.css and _all-skins.css have now been themed, as shown in Figure 13.
16. Besides recompiling everything into brand-new CSS files based on Less variables, there is another theming approach. This involves extracting the Less code that uses the Less variables needing adjustment, and compiling only the code that needs to be overridden. However, this approach requires analyzing the source code, making extraction somewhat difficult. Therefore, I recommend adopting the full recompilation approach.