From be42956a9d2f555795ea3f1eee60110c78152c72 Mon Sep 17 00:00:00 2001
From: REJack <info@rejack.de>
Date: Fri, 24 Jul 2020 21:27:54 +0200
Subject: [PATCH] add additional-styles docs section

---
 docs/_config.yml          | 11 ++++---
 docs/additional-styles.md | 67 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 74 insertions(+), 4 deletions(-)
 create mode 100644 docs/additional-styles.md

diff --git a/docs/_config.yml b/docs/_config.yml
index 8b4618753..a431b4db6 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -70,15 +70,18 @@ navigation:
   - title: Browser Support
     url: browser-support.html
     icon: fab fa-chrome
-  - title: Upgrade Guide
-    url: upgrade-guide.html
-    icon: fas fa-hand-point-up
   - title: Implementations
     url: implementations.html
     icon: fas fa-bookmark
+  - title: Additional Styles
+    url: additional-styles.html
+    icon: fas fa-mortar-pestle
+  - title: Upgrade Guide
+    url: upgrade-guide.html
+    icon: fas fa-hand-point-up
   - title: FAQ
     url: faq.html
     icon: fas fa-question-circle
   - title: License
     url: license.html
-    icon: fas fa-file-alt
+    icon: fas fa-file-contract
diff --git a/docs/additional-styles.md b/docs/additional-styles.md
new file mode 100644
index 000000000..4e7c4326a
--- /dev/null
+++ b/docs/additional-styles.md
@@ -0,0 +1,67 @@
+---
+layout: page
+title: Additional Styles / Custom Skin
+---
+
+If you want to create additional styles like a company specific color for buttons, the background utility or something else you can simply create your own subversion of AdminLTE with the following SCSS template.
+
+In this example we create a custom button class called `.btn-custom-color` with an extra button style and a custom class called `.my-custom-style`.
+
+```scss
+// Bootstrap
+// ---------------------------------------------------
+@import '~bootstrap/scss/functions';
+@import '~admin-lte/build/scss/bootstrap-variables';
+
+// Custom Theme Color START
+$custom-color: #00FF00;
+$theme-colors: map-merge((
+    'custom-color': $custom-color,
+), $theme-colors);
+// Custom Theme Color END
+
+// Variables and Mixins
+// ---------------------------------------------------
+@import '~admin-lte/build/scss/variables';
+@import '~admin-lte/build/scss/mixins';
+
+@import '~bootstrap/scss/bootstrap';
+
+@import '~admin-lte/build/scss/parts/core';
+@import '~admin-lte/build/scss/parts/components';
+@import '~admin-lte/build/scss/parts/extra-components';
+@import '~admin-lte/build/scss/parts/pages';
+@import '~admin-lte/build/scss/parts/plugins';
+@import '~admin-lte/build/scss/parts/miscellaneous';
+
+// Custom Style START
+.my-custom-style {
+  background-color: $custom-color;
+  padding: .5rem 0;
+}
+// Custom Style END
+```
+{: .max-height-300}
+
+You can also create a skin on top of AdminLTE with the following SCSS template.
+
+In this example we create a custom class called `.btn-custom-color` with a extra button style.
+
+```scss
+// Bootstrap
+// ---------------------------------------------------
+@import '~bootstrap/scss/functions';
+@import '~admin-lte/build/scss/bootstrap-variables';
+@import '~bootstrap/scss/mixins';
+
+$custom-color: #00FF00;
+
+.btn-custom-color {
+    @include button-variant($custom-color, $custom-color);
+}
+```
+
+
+> ##### Warning!
+> These examples are only raw SCSS templates, you will still need a SCSS -> CSS build script to compile the SCSS to CSS!
+{: .quote-warning}