Improve admin css help

1 files changed, 19 insertions, 2 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 4a5ffb37c..714a3af15 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -163,7 +163,7 @@
 
   <div class="form-group">
     <label for="customizationJavascript">JavaScript</label>
-    <my-help helpType="custom" customHtml="Write directly JavaScript code.<br />Example: console.log('my instance is amazing');"></my-help>
+    <my-help helpType="custom" customHtml="Write directly JavaScript code.<br />Example: <pre>console.log('my instance is amazing');</pre>"></my-help>
     <textarea
         id="customizationJavascript" formControlName="customizationJavascript"
         [ngClass]="{ 'input-error': formErrors['customizationJavascript'] }"
@@ -175,7 +175,24 @@
 
   <div class="form-group">
     <label for="customizationCSS">CSS</label>
-    <my-help helpType="custom" customHtml="Write directly CSS code.<br />Example: body { background-color: red; }"></my-help>
+    <my-help
+        helpType="custom"
+        customHtml="
+          Write directly CSS code. Example:<br />
+          <pre>
+body {
+  background-color: red;
+}
+          </pre>
+
+          Prepend with <em>#custom-css</em> to override styles. Example:
+          <pre>
+#custom-css .logged-in-email {
+  color: red;
+}
+          </pre>
+        "
+    ></my-help>
     <textarea
         id="customizationCSS" formControlName="customizationCSS"
         [ngClass]="{ 'input-error': formErrors['customizationCSS'] }"