{"id":1592,"date":"2022-02-04T16:52:06","date_gmt":"2022-02-04T16:52:06","guid":{"rendered":"https:\/\/adminlte.io\/?p=1592"},"modified":"2022-02-04T17:21:49","modified_gmt":"2022-02-04T17:21:49","slug":"customizing-and-downsizing-adminlte-to-match-your-businsess","status":"publish","type":"post","link":"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/","title":{"rendered":"Customizing and Downsizing AdminLTE to Match Your Business"},"content":{"rendered":"\n<p>AdminLTE is now used by tens of thousands of users around the world.<br>It is critical that AdminLTE provides an easy method to rebrand and customize<br>the original design to match that of the rest of the business. Luckily, it<br>already is super simple to make AdminLTE look really different from other<br>implementations. In this post, we&#8217;ll learn how to use these features to<br>change the colors of the entire framework and remove code that we may not need<br>without deleting files. We&#8217;ll utilize LESS variables and imports to achieve our<br>goal.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"less\">LESS<\/h2>\n\n\n\n<p>The LESS framework is a great CSS preprocessing tool that allows us to use<br>variables and functions, import other files and more. If you are not familiar<br>with LESS, take a look at their <a href=\"http:\/\/lesscss.org\/\" target=\"_blank\" rel=\"noopener\">documentation<\/a><br>to gain an extensive understanding of its features. If you are familiar with CSS,<br>learning less won&#8217;t take more than 30 minutes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"compiling-less\">Compiling LESS<\/h2>\n\n\n\n<p>In order for us to be able to use LESS, we need to learn how to compile our LESS<br>code into pure CSS. One way to do this is to use a graphical tool such as<br><a href=\"http:\/\/koala-app.com\/\" target=\"_blank\" rel=\"noopener\">Koala<\/a>, which works on Windows, Mac and Linux.<br>However, this is not my favorite option. I prefer using <a href=\"http:\/\/gruntjs.com\/\" target=\"_blank\" rel=\"noopener\">Grunt<\/a>,<br>which is a JS framework that runs JavaScript tasks from the command line. For the purposes<br>of this tutorial, we will be using Grunt since AdminLTE has ready Grunt configuration. If you are<br>a Windows user, take a look at<br><a href=\"http:\/\/gruntjs.com\/frequently-asked-questions#does-grunt-work-on-windows\" target=\"_blank\" rel=\"noopener\">this question<\/a><br>to get up an running. All other users should be fine using the<br><a href=\"http:\/\/gruntjs.com\/getting-started\" target=\"_blank\" rel=\"noopener\">normal procedure<\/a> for installing<br>and using Grunt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"rebranding-adminlte\">Rebranding AdminLTE<\/h2>\n\n\n\n<p>Rebranding means changing the colors of a template to match that of your entire business.<br>Before we begin, download a fresh copy of <a href=\"https:\/\/almsaeedstudio.com\" target=\"_blank\" rel=\"noopener\">AdminLTE<\/a>.<br>In the main folder, you will find the <code>build\/less<\/code> folder, which contains our LESS<br>files. The only files we will need to customize are <code>variables.less<\/code> and<br><code>AdminLTE.less<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"getting-grunt-ready\">Getting Grunt Ready<\/h3>\n\n\n\n<p>Now that we have both Grunt and AdminLTE, we should run the install command in AdminLTE&#8217;s<br>main directory.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"pln\">sudo npm install<\/span><\/code><\/pre>\n\n\n\n<p>The above command will install all the dependencies needed to develop features for<br>AdminLTE. It will also warn you if there is something missing or needs updating.<br>From now on, Grunt will watch for file changes, compile less files into CSS and compress<br>the pure CSS files to minimize their size. All of that with a minimal amount of effort!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"choosing-colors-and-customizing-adminlte\">Choosing Colors and Customizing AdminLTE<\/h3>\n\n\n\n<p>So now we are ready to choose new colors for our dashboard. I found<br><a href=\"https:\/\/coolors.co\/browser\" target=\"_blank\" rel=\"noopener\">Coolors<\/a> to be a good source<br>for nice color palettes. We chose<br><a href=\"https:\/\/coolors.co\/5bc0eb-fde74c-9bc53d-e55934-fa7921\" target=\"_blank\" rel=\"noopener\">this color palette.<\/a><\/p>\n\n\n\n<p>Open <code>variables.less<\/code> in your favorite code editor. In this file,<br>there are all sorts of variables that could dramatically change the look and feel<br>of AdminLTE if customized. So, explore the file to see what is there to be customized.<br>We are gonna concern ourselves with the colors section in this part. Here is what the<br>section looks like.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"scss\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/COLORS\n\/\/--------------------------------------------------------\n\/\/Primary\n@light-blue: #3c8dbc;\n\/\/Danger\n@red: #dd4b39;\n\/\/Success\n@green: #00a65a;\n\/\/Info\n@aqua: #00c0ef;\n\/\/Warning\n@yellow: #f39c12;\n        \n@blue: #0073b7;\n@navy: #001F3F;\n@teal: #39CCCC;\n@olive: #3D9970;\n@lime: #01FF70;\n@orange: #FF851B;\n@fuchsia: #F012BE;\n@purple: #605ca8;\n@maroon: #D81B60;\n@black: #111;\n@gray: #d2d6de;<\/pre>\n\n\n\n<p>The brand colors are the first five colors in the list. The rest are only a set of colors<br>that you could use for accenting certain elements. So let&#8217;s replace these values with our<br>new color palette. Here is what mine looks like after the changes.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/COLORS\n\/\/--------------------------------------------------------\n\/\/Primary\n@light-blue: #FA7921;\n\/\/Danger\n@red: #E55934;\n\/\/Success\n@green: #9BC53D;\n\/\/Info\n@aqua: #5BC0EB;\n\/\/Warning\n@yellow: #FDE74C;\n\n@blue: #0073b7;\n@navy: #001F3F;\n@teal: #39CCCC;\n@olive: #3D9970;\n@lime: #01FF70;\n@orange: #FF851B;\n@fuchsia: #F012BE;\n@purple: #605ca8;\n@maroon: #D81B60;\n@black: #111;\n@gray: #d2d6de;<\/pre>\n\n\n\n<p>Once the changes have been made, type the following command to compile and compress the<br>less files. The command will create <code>adminlte.css<\/code>, <code>adminlte.min.css<\/code><br>and all the skin files, which will reflect the new changes too.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>grunt less<\/code><\/pre>\n\n\n\n<p>Alternatively, you could run the <code>grunt watch<\/code> command and grunt will compile the<br>LESS files automatically every time you save. Neat!<\/p>\n\n\n\n<p>Here is how the new colors look using the <code>.skin-blue<\/code> skin.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/uploads\/images\/adminlte-custom-colors.png\" alt=\"Customized Colors for AdminLTE\"\/><\/figure>\n\n\n\n<p>Let&#8217;s do one more thing with the variables just to reinforce the idea. This time, we<br>will change the size of the sidebar to become 300 pixels. In the <code>variables.less<\/code><br>file, find the variable <code>@sidebar-width<\/code> and change its value to <code>300px<\/code>.<br>This is how the line should look like.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@sidebar-width: 300px<\/code><\/pre>\n\n\n\n<p>Then once more, run the <code>grunt less<\/code> command if you don&#8217;t have <code>grunt watch<\/code> running.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>grunt less<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/uploads\/images\/adminlte-custom-sidebar-width.png\" alt=\"AdminLTE customized sidebar width\"\/><\/figure>\n\n\n\n<p>See how simple it is? I think this is extremely useful and I hope you get to enjoy these features.<br>Since we changed all the primary colors, now the skins are automatically updated to present these<br>changes. Let&#8217;s take a look at the new skins.<\/p>\n\n\n\n<figure><img decoding=\"async\" class=\"img-responsive\" src=\"\/uploads\/images\/adminlte-custom-skin-1.png\" alt=\"green skin\"><\/figure><div class=\"col-sm-6\"><a href=\"\/uploads\/images\/adminlte-custom-skin-1.png\" target=\"_blank\" rel=\"noopener\"><br><br><\/a><\/div>\n<figure><img decoding=\"async\" class=\"img-responsive\" src=\"\/uploads\/images\/adminlte-custom-skin-2.png\" alt=\"red skin\"><\/figure><div class=\"col-sm-6\"><a href=\"\/uploads\/images\/adminlte-custom-skin-2.png\" target=\"_blank\" rel=\"noopener\"><br><br><\/a><\/div>\n<figure><img decoding=\"async\" class=\"img-responsive\" src=\"\/uploads\/images\/adminlte-custom-skin-3.png\" alt=\"yellow skin\"><\/figure><div class=\"col-sm-6\"><a href=\"\/uploads\/images\/adminlte-custom-skin-3.png\" target=\"_blank\" rel=\"noopener\"><br><br><\/a><\/div>\n<figure><img decoding=\"async\" class=\"img-responsive\" src=\"\/uploads\/images\/adminlte-custom-skin-4.png\" alt=\"purple skin\"><\/figure><div class=\"col-sm-6\"><a href=\"\/uploads\/images\/adminlte-custom-skin-4.png\" target=\"_blank\" rel=\"noopener\"><br><br><\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"downsizing\">Downsizing<\/h2>\n\n\n\n<p>The second part of this tutorial is about removing the parts that may be useless to us in<br>our app. AdminLTE comes with many components and sometimes we don&#8217;t need all of them. But,<br>since we are using LESS to modulate AdminLTE, we can simply remove the undesired components.<br>To do this, open <code>build\/less\/AdminLTE.less<\/code> and take a look at the imports. Each line<br>is importing a specific component. To remove a component, simply comment out (or delete) the<br>line. Use <code>\/\/<\/code> to comment out a line. Once done, run <code>grunt less<\/code>. You<br>will immediately notice that the size of the <code>dist\/css\/adminlte.min.css<\/code> file was reduced.<br>Thus, very simply and effectively reducing the loading time for your app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>In this tutorial we learned how to use LESS variables to customize AdminLTE and rebrand it<br>to fit our business&#8217;s style. We also learned how to remove components that we won&#8217;t need<br>in our app. The methods we learned here can be used in many other frameworks that utilize<br>CSS preprocessors such as Bootstrap and other templates.<\/p>\n\n\n\n<p>I hope you have enjoyed this tutorial and found it useful. Drop us a line below and share<br>your thoughts.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>AdminLTE is now used by tens of thousands of users around the world.It is critical that AdminLTE provides an easy method to rebrand and customizethe original design to match that of the rest of the business. Luckily, italready is super simple to make AdminLTE look really different from otherimplementations. In this post, we&#8217;ll learn how [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":1596,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1592","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-templates"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Customizing and Downsizing AdminLTE to Match Your Business - AdminLTE.IO<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customizing and Downsizing AdminLTE to Match Your Business - AdminLTE.IO\" \/>\n<meta property=\"og:description\" content=\"AdminLTE is now used by tens of thousands of users around the world.It is critical that AdminLTE provides an easy method to rebrand and customizethe original design to match that of the rest of the business. Luckily, italready is super simple to make AdminLTE look really different from otherimplementations. In this post, we&#8217;ll learn how [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/\" \/>\n<meta property=\"og:site_name\" content=\"AdminLTE.IO\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-04T16:52:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-04T17:21:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/adminlte.io\/cdn-cgi\/image\/width=1390,height=724,quality=80,format=auto,onerror=redirect,metadata=none\/cdn-cgi\/image\/quality=80,format=auto,onerror=redirect,metadata=none\/wp-content\/uploads\/2022\/02\/adminlte-custom-skin-1-header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1390\" \/>\n\t<meta property=\"og:image:height\" content=\"724\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Aigars Silkalns\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aigars Silkalns\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/\"},\"author\":{\"name\":\"Aigars Silkalns\",\"@id\":\"https:\/\/adminlte.io\/#\/schema\/person\/7f1e110d045bd4b0cd5efbc0fd6e6715\"},\"headline\":\"Customizing and Downsizing AdminLTE to Match Your Business\",\"datePublished\":\"2022-02-04T16:52:06+00:00\",\"dateModified\":\"2022-02-04T17:21:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/\"},\"wordCount\":876,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/adminlte.io\/#organization\"},\"image\":{\"@id\":\"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/adminlte.io\/wp-content\/uploads\/2022\/02\/adminlte-custom-skin-1-header.png\",\"articleSection\":[\"Templates\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/\",\"url\":\"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/\",\"name\":\"Customizing and Downsizing AdminLTE to Match Your Business - AdminLTE.IO\",\"isPartOf\":{\"@id\":\"https:\/\/adminlte.io\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/adminlte.io\/wp-content\/uploads\/2022\/02\/adminlte-custom-skin-1-header.png\",\"datePublished\":\"2022-02-04T16:52:06+00:00\",\"dateModified\":\"2022-02-04T17:21:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/#primaryimage\",\"url\":\"https:\/\/adminlte.io\/wp-content\/uploads\/2022\/02\/adminlte-custom-skin-1-header.png\",\"contentUrl\":\"https:\/\/adminlte.io\/wp-content\/uploads\/2022\/02\/adminlte-custom-skin-1-header.png\",\"width\":1390,\"height\":724,\"caption\":\"how to customize adminlte\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/adminlte.io\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Customizing and Downsizing AdminLTE to Match Your Business\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/adminlte.io\/#website\",\"url\":\"https:\/\/adminlte.io\/\",\"name\":\"AdminLTE.IO\",\"description\":\"Most popular Bootstrap admin dashboard template in the world with 5M users. Download it now!\",\"publisher\":{\"@id\":\"https:\/\/adminlte.io\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/adminlte.io\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/adminlte.io\/#organization\",\"name\":\"AdminLTE.IO\",\"url\":\"https:\/\/adminlte.io\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/adminlte.io\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/adminlte.io\/wp-content\/uploads\/2021\/03\/logo.png\",\"contentUrl\":\"https:\/\/adminlte.io\/wp-content\/uploads\/2021\/03\/logo.png\",\"width\":160,\"height\":27,\"caption\":\"AdminLTE.IO\"},\"image\":{\"@id\":\"https:\/\/adminlte.io\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/adminlte.io\/#\/schema\/person\/7f1e110d045bd4b0cd5efbc0fd6e6715\",\"name\":\"Aigars Silkalns\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/adminlte.io\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/69f34259a9d0b7df04f0b50893c469ed?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/69f34259a9d0b7df04f0b50893c469ed?s=96&d=mm&r=g\",\"caption\":\"Aigars Silkalns\"},\"sameAs\":[\"https:\/\/colorlib.com\/wp\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Customizing and Downsizing AdminLTE to Match Your Business - AdminLTE.IO","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/","og_locale":"en_US","og_type":"article","og_title":"Customizing and Downsizing AdminLTE to Match Your Business - AdminLTE.IO","og_description":"AdminLTE is now used by tens of thousands of users around the world.It is critical that AdminLTE provides an easy method to rebrand and customizethe original design to match that of the rest of the business. Luckily, italready is super simple to make AdminLTE look really different from otherimplementations. In this post, we&#8217;ll learn how [&hellip;]","og_url":"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/","og_site_name":"AdminLTE.IO","article_published_time":"2022-02-04T16:52:06+00:00","article_modified_time":"2022-02-04T17:21:49+00:00","og_image":[{"width":1390,"height":724,"url":"https:\/\/adminlte.io\/cdn-cgi\/image\/width=1390,height=724,quality=80,format=auto,onerror=redirect,metadata=none\/cdn-cgi\/image\/quality=80,format=auto,onerror=redirect,metadata=none\/wp-content\/uploads\/2022\/02\/adminlte-custom-skin-1-header.png","type":"image\/png"}],"author":"Aigars Silkalns","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Aigars Silkalns","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/#article","isPartOf":{"@id":"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/"},"author":{"name":"Aigars Silkalns","@id":"https:\/\/adminlte.io\/#\/schema\/person\/7f1e110d045bd4b0cd5efbc0fd6e6715"},"headline":"Customizing and Downsizing AdminLTE to Match Your Business","datePublished":"2022-02-04T16:52:06+00:00","dateModified":"2022-02-04T17:21:49+00:00","mainEntityOfPage":{"@id":"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/"},"wordCount":876,"commentCount":2,"publisher":{"@id":"https:\/\/adminlte.io\/#organization"},"image":{"@id":"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/#primaryimage"},"thumbnailUrl":"https:\/\/adminlte.io\/wp-content\/uploads\/2022\/02\/adminlte-custom-skin-1-header.png","articleSection":["Templates"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/","url":"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/","name":"Customizing and Downsizing AdminLTE to Match Your Business - AdminLTE.IO","isPartOf":{"@id":"https:\/\/adminlte.io\/#website"},"primaryImageOfPage":{"@id":"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/#primaryimage"},"image":{"@id":"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/#primaryimage"},"thumbnailUrl":"https:\/\/adminlte.io\/wp-content\/uploads\/2022\/02\/adminlte-custom-skin-1-header.png","datePublished":"2022-02-04T16:52:06+00:00","dateModified":"2022-02-04T17:21:49+00:00","breadcrumb":{"@id":"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/#primaryimage","url":"https:\/\/adminlte.io\/wp-content\/uploads\/2022\/02\/adminlte-custom-skin-1-header.png","contentUrl":"https:\/\/adminlte.io\/wp-content\/uploads\/2022\/02\/adminlte-custom-skin-1-header.png","width":1390,"height":724,"caption":"how to customize adminlte"},{"@type":"BreadcrumbList","@id":"https:\/\/adminlte.io\/blog\/customizing-and-downsizing-adminlte-to-match-your-businsess\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/adminlte.io\/"},{"@type":"ListItem","position":2,"name":"Customizing and Downsizing AdminLTE to Match Your Business"}]},{"@type":"WebSite","@id":"https:\/\/adminlte.io\/#website","url":"https:\/\/adminlte.io\/","name":"AdminLTE.IO","description":"Most popular Bootstrap admin dashboard template in the world with 5M users. Download it now!","publisher":{"@id":"https:\/\/adminlte.io\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/adminlte.io\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/adminlte.io\/#organization","name":"AdminLTE.IO","url":"https:\/\/adminlte.io\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/adminlte.io\/#\/schema\/logo\/image\/","url":"https:\/\/adminlte.io\/wp-content\/uploads\/2021\/03\/logo.png","contentUrl":"https:\/\/adminlte.io\/wp-content\/uploads\/2021\/03\/logo.png","width":160,"height":27,"caption":"AdminLTE.IO"},"image":{"@id":"https:\/\/adminlte.io\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/adminlte.io\/#\/schema\/person\/7f1e110d045bd4b0cd5efbc0fd6e6715","name":"Aigars Silkalns","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/adminlte.io\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/69f34259a9d0b7df04f0b50893c469ed?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/69f34259a9d0b7df04f0b50893c469ed?s=96&d=mm&r=g","caption":"Aigars Silkalns"},"sameAs":["https:\/\/colorlib.com\/wp\/"]}]}},"_links":{"self":[{"href":"https:\/\/adminlte.io\/wp-json\/wp\/v2\/posts\/1592"}],"collection":[{"href":"https:\/\/adminlte.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/adminlte.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/adminlte.io\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/adminlte.io\/wp-json\/wp\/v2\/comments?post=1592"}],"version-history":[{"count":17,"href":"https:\/\/adminlte.io\/wp-json\/wp\/v2\/posts\/1592\/revisions"}],"predecessor-version":[{"id":1615,"href":"https:\/\/adminlte.io\/wp-json\/wp\/v2\/posts\/1592\/revisions\/1615"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/adminlte.io\/wp-json\/wp\/v2\/media\/1596"}],"wp:attachment":[{"href":"https:\/\/adminlte.io\/wp-json\/wp\/v2\/media?parent=1592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/adminlte.io\/wp-json\/wp\/v2\/categories?post=1592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/adminlte.io\/wp-json\/wp\/v2\/tags?post=1592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}