docs(guide): advanced CSS customisation

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Custom app-wide CSS.html

@@ -1,53 +1,92 @@
 <p>It is possible to provide a CSS file to be used regardless of the theme
   set by the user.</p>
-<table>
-  <thead>
-    <tr>
-      <th></th>
-      <th></th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <img src="Custom app-wide CSS_image.png">
-      </td>
-      <td>Start by creating a new note and changing the note type to CSS</td>
-    </tr>
-    <tr>
-      <td>
-        <img src="1_Custom app-wide CSS_image.png">
-      </td>
-      <td>In the ribbon, press the “Owned Attributes” section and type <code>#appCss</code>.</td>
-    </tr>
-    <tr>
-      <td>
-        <img src="2_Custom app-wide CSS_image.png">
-      </td>
-      <td>Type the desired CSS.
-        <br>
-        <br>Generally it's a good idea to append <code>!important</code> for the styles
-        that are being changed, in order to prevent other</td>
-    </tr>
-  </tbody>
-</table>
-
+<figure class="table">
+  <table>
+    <thead>
+      <tr>
+        <th>&nbsp;</th>
+        <th>&nbsp;</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <img src="Custom app-wide CSS_image.png">
+        </td>
+        <td>Start by creating a new note and changing the note type to CSS</td>
+      </tr>
+      <tr>
+        <td>
+          <img src="2_Custom app-wide CSS_image.png">
+        </td>
+        <td>In the ribbon, press the “Owned Attributes” section and type <code>#appCss</code>.</td>
+      </tr>
+      <tr>
+        <td>
+          <img src="3_Custom app-wide CSS_image.png">
+        </td>
+        <td>Type the desired CSS.&nbsp;
+          <br>
+          <br>Generally it's a good idea to append <code>!important</code> for the styles
+          that are being changed, in order to prevent other</td>
+      </tr>
+    </tbody>
+  </table>
+</figure>
 <h2>Seeing the changes</h2>
 <p>Adding a new <em>app CSS note</em> or modifying an existing one does not
   immediately apply changes. To see the changes, press Ctrl+Shift+R to refresh
   the page first.</p>
-<h2>Example use-case: customizing the printing stylesheet</h2>
+<h2>Sample use cases</h2>
+<h3>Customizing the printing stylesheet</h3>
 <p>When printing a document or exporting as PDF, it is possible to adjust
   the style by creating a CSS note that uses the <code>@media</code> selector.</p>
 <p>For example, to change the font of the document from the one defined by
   the theme or the user to a serif one:</p><pre><code class="language-text-x-trilium-auto">@media print {
-
 	body {
-
         --main-font-family: serif !important;
-
         --detail-font-family: var(--main-font-family) !important;
-
     }
-
+}</code></pre>
+<h3>Per-workspace styles</h3>
+<p>When using&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/wArbEsdSae6g/_help_9sRHySam5fXb">Workspaces</a>,
+  it can be helpful to create a visual distinction between notes in different
+  workspaces.</p>
+<p>To do so:</p>
+<ol>
+  <li data-list-item-id="ebe7118e85ce0b3102e4333aef27c637d">In the note with <code>#workspace</code>, add an inheritable attribute <code>#cssClass(inheritable)</code> with
+    a value that uniquely identifies the workspace (say <code>my-workspace</code>).</li>
+  <li
+  data-list-item-id="e690ba825e168c5ec987f98c15f9b7a99">Anywhere in the note structure, create a CSS note with <code>#appCss</code>.</li>
+</ol>
+<h4>Change the color of the icons in the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_oPVyFC7WL2Lp">Note Tree</a></h4><pre><code class="language-text-x-trilium-auto">.fancytree-node.my-workspace.fancytree-custom-icon {
+    color: #ff0000;
+}</code></pre>
+<h4>Change the color of the note title and the icon</h4>
+<p>To change the color of the note title and the icon (above the content):</p><pre><code class="language-text-x-trilium-auto">.note-split.my-workspace .note-icon-widget button.note-icon,
+.note-split.my-workspace .note-title-widget input.note-title {
+    color: #ff0000;
+}</code></pre>
+<h4>Add a watermark to the note content</h4>
+<figure class="image image-style-align-right image_resized" style="width:39.97%;">
+  <img style="aspect-ratio:641/630;" src="1_Custom app-wide CSS_image.png"
+  width="641" height="630">
+</figure>
+<ol>
+  <li data-list-item-id="e9796dcbe19c3b9d39839533989b9e104">Insert an image in any note and take the URL of the image.</li>
+  <li data-list-item-id="e8da975b80585c42193516ee5d8d8a56c">Use the following CSS, adjusting the <code>background-image</code> and <code>width</code> and <code>height</code> to
+    the desired values.</li>
+</ol><pre><code class="language-text-x-trilium-auto">.note-split.my-workspace .scrolling-container:after {
+    position: fixed;
+    content: "";
+    background-image: url("/api/attachments/Rvm3zJNITQI1/image/logo.png");
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 237px;
+    height: 44px;
+    bottom: 1em;
+    right: 1em;
+    opacity: 0.5;
+    z-index: 0;
 }</code></pre>