improved look & feel doc

Evolveum · Sep 28, 2022 · 97684ce · 97684ce
1 parent 8c45a18
commit 97684ce
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 2 deletions.
diff --git a/docs/admin-gui/look-feel-customization-pre-4.6.adoc b/docs/admin-gui/look-feel-customization-pre-4.6.adoc
@@ -1,4 +1,4 @@
-= Look & Feel Customization HOWTO
+= Look & Feel Customization HOWTO before 4.6
 :page-wiki-name: Look & Feel Customization HOWTO
 :page-wiki-id: 21528591
 :page-wiki-metadata-create-user: lazyman

diff --git a/docs/admin-gui/look-feel-customization.adoc b/docs/admin-gui/look-feel-customization.adoc
@@ -1,4 +1,4 @@
-= Look & Feel Customization HOWTO 4.6
+= Look & Feel Customization HOWTO
 :page-toc: top
 :page-since: "4.6"
 
@@ -33,3 +33,76 @@ Simple style and javascript changes can be done via maven overlay by adding cont
 These files are empty by default and are linked last on midPoint web pages.
 
 For more details see xref:../../devel/gui/gui-development-guide.adoc#styles-and-javascript[GUI development guide].
+
+== Quick customization
+
+=== Header color
+
+Header color can be defined in system configuration object, part `deploymentInformation/headerColor`.
+This property can be combined with `skin`, however header color value will override default skin header color.
+
+=== AdminLTE skins
+
+Skins can be defined in system configuration object, part `deploymentInformation/skin`.
+
+Previous versions of AdminLTE contained 12 predefined skins out of the box.
+Currently used version of AdminLTE 3.x doesn't support skins, however for backward compatibility these were implemented on top of AdminLTE:
+
+* skin-blue
+* skin-blue-light
+* skin-yellow
+* skin-yellow-light
+* skin-green
+* skin-green-light
+* skin-purple
+* skin-purple-light
+* skin-red
+* skin-red-light
+* skin-black
+* skin-black-light
+
+AdminLTE supports few theme colors:
+
+* primary
+* secondary
+* info
+* success
+* warning
+* danger
+* black
+* indigo
+* lightblue (default)
+* navy
+* purple
+* fuchsia
+* pink
+* maroon
+* orange
+* lime
+* teal
+* olive
+
+== Example of usage colored and dark/light themes
+
+[source, xml]
+----
+<deploymentInformation>
+    <skin>orange</skin>
+</deploymentInformation>
+----
+
+[source, xml]
+----
+<deploymentInformation>
+    <headerColor>#444</headerColor>
+    <skin>secondary</skin>
+</deploymentInformation>
+----
+
+[source, xml]
+----
+<deploymentInformation>
+    <headerColor>#444</headerColor>
+    <skin>secondary</skin>
+</deploymentInformation>
+----