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>
+<figure class="table">
-  <thead>
+  <table>
-    <tr>
+    <thead>
-      <th></th>
+      <tr>
-      <th></th>
+        <th>&nbsp;</th>
-    </tr>
+        <th>&nbsp;</th>
-  </thead>
+      </tr>
-  <tbody>
+    </thead>
-    <tr>
+    <tbody>
-      <td>
+      <tr>
-        <img src="Custom app-wide CSS_image.png">
+        <td>
-      </td>
+          <img src="Custom app-wide CSS_image.png">
-      <td>Start by creating a new note and changing the note type to CSS</td>
+        </td>
-    </tr>
+        <td>Start by creating a new note and changing the note type to CSS</td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <img src="1_Custom app-wide CSS_image.png">
+        <td>
-      </td>
+          <img src="2_Custom app-wide CSS_image.png">
-      <td>In the ribbon, press the “Owned Attributes” section and type <code>#appCss</code>.</td>
+        </td>
-    </tr>
+        <td>In the ribbon, press the “Owned Attributes” section and type <code>#appCss</code>.</td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <img src="2_Custom app-wide CSS_image.png">
+        <td>
-      </td>
+          <img src="3_Custom app-wide CSS_image.png">
-      <td>Type the desired CSS.
+        </td>
-        <br>
+        <td>Type the desired CSS.&nbsp;
-        <br>Generally it's a good idea to append <code>!important</code> for the styles
+          <br>
-        that are being changed, in order to prevent other</td>
+          <br>Generally it's a good idea to append <code>!important</code> for the styles
-    </tr>
+          that are being changed, in order to prevent other</td>
-  </tbody>
+      </tr>
-</table>
+    </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>

docs/User Guide/!!!meta.json

@@ -9566,7 +9566,22 @@
                             "isExpanded": false,
                             "type": "text",
                             "mime": "text/html",
-                            "attributes": [],
+                            "attributes": [
+                                {
+                                    "type": "relation",
+                                    "name": "internalLink",
+                                    "value": "9sRHySam5fXb",
+                                    "isInheritable": false,
+                                    "position": 10
+                                },
+                                {
+                                    "type": "relation",
+                                    "name": "internalLink",
+                                    "value": "oPVyFC7WL2Lp",
+                                    "isInheritable": false,
+                                    "position": 20
+                                }
+                            ],
                             "format": "markdown",
                             "dataFileName": "Custom app-wide CSS.md",
                             "attachments": [
@@ -9579,7 +9594,7 @@
                                     "dataFileName": "Custom app-wide CSS_image.png"
                                 },
                                 {
-                                    "attachmentId": "TIerrMjmeich",
+                                    "attachmentId": "qBzZ9Qpxwoba",
                                     "title": "image.png",
                                     "role": "image",
                                     "mime": "image/png",
@@ -9587,12 +9602,20 @@
                                     "dataFileName": "1_Custom app-wide CSS_image.png"
                                 },
                                 {
-                                    "attachmentId": "YUrNq5vsCwHe",
+                                    "attachmentId": "TIerrMjmeich",
                                     "title": "image.png",
                                     "role": "image",
                                     "mime": "image/png",
                                     "position": 10,
                                     "dataFileName": "2_Custom app-wide CSS_image.png"
+                                },
+                                {
+                                    "attachmentId": "YUrNq5vsCwHe",
+                                    "title": "image.png",
+                                    "role": "image",
+                                    "mime": "image/png",
+                                    "position": 10,
+                                    "dataFileName": "3_Custom app-wide CSS_image.png"
                                 }
                             ]
                         }

docs/User Guide/User Guide/Theme development/Custom app-wide CSS.md

@@ -4,14 +4,16 @@ It is possible to provide a CSS file to be used regardless of the theme set by t
 |     |     |
 | --- | --- |
 | ![](Custom%20app-wide%20CSS_image.png) | Start by creating a new note and changing the note type to CSS |
-| ![](1_Custom%20app-wide%20CSS_image.png) | In the ribbon, press the “Owned Attributes” section and type `#appCss`. |
+| ![](2_Custom%20app-wide%20CSS_image.png) | In the ribbon, press the “Owned Attributes” section and type `#appCss`. |
-| ![](2_Custom%20app-wide%20CSS_image.png) | Type the desired CSS.  <br>  <br>Generally it's a good idea to append `!important` for the styles that are being changed, in order to prevent other |
+| ![](3_Custom%20app-wide%20CSS_image.png) | Type the desired CSS.   <br>  <br>Generally it's a good idea to append `!important` for the styles that are being changed, in order to prevent other |
 
 ## Seeing the changes
 
 Adding a new _app CSS note_ or modifying an existing one does not immediately apply changes. To see the changes, press Ctrl+Shift+R to refresh the page first.
 
-## Example use-case: customizing the printing stylesheet
+## Sample use cases
+
+### Customizing the printing stylesheet
 
 When printing a document or exporting as PDF, it is possible to adjust the style by creating a CSS note that uses the `@media` selector.
 
@@ -19,14 +21,61 @@ For example, to change the font of the document from the one defined by the them
 
 ```
 @media print {
-
 	body {
-
         --main-font-family: serif !important;
-
         --detail-font-family: var(--main-font-family) !important;
-
     }
+}
+```
 
+### Per-workspace styles
+
+When using <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Navigation/Workspaces.md">Workspaces</a>, it can be helpful to create a visual distinction between notes in different workspaces.
+
+To do so:
+
+1.  In the note with `#workspace`, add an inheritable attribute `#cssClass(inheritable)` with a value that uniquely identifies the workspace (say `my-workspace`).
+2.  Anywhere in the note structure, create a CSS note with `#appCss`.
+
+#### Change the color of the icons in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Note%20Tree.md">Note Tree</a>
+
+```
+.fancytree-node.my-workspace.fancytree-custom-icon {
+    color: #ff0000;
+}
+```
+
+#### Change the color of the note title and the icon
+
+To change the color of the note title and the icon (above the content):
+
+```
+.note-split.my-workspace .note-icon-widget button.note-icon,
+.note-split.my-workspace .note-title-widget input.note-title {
+    color: #ff0000;
+}
+```
+
+#### Add a watermark to the note content
+
+<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>
+
+1.  Insert an image in any note and take the URL of the image.
+2.  Use the following CSS, adjusting the `background-image` and `width` and `height` to the desired values.
+
+```
+.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;
 }
 ```