diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Custom app-wide CSS.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Custom app-wide CSS.html index f7d9fd394..190a542f0 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Custom app-wide CSS.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Custom app-wide CSS.html @@ -1,61 +1,61 @@

It is possible to provide a CSS file to be used regardless of the theme set by the user.

- - - - - - - - - - - - - - - - - - - - - -
- - Start by creating a new note and changing the note type to CSS
- - In the ribbon, press the “Owned Attributes” section and type #appCss.
- - Type the desired CSS.   -
-
Generally it's a good idea to append !important for the styles - that are being changed, in order to prevent other
- +
+ + + + + + + + + + + + + + + + + + + + + +
  
+ + Start by creating a new note and changing the note type to CSS
+ + In the ribbon, press the “Owned Attributes” section and type #appCss.
+ + Type the desired CSS.    +
+
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.

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.

-

For example, to change the font of the document from the one defined by - the theme or the user to a serif one:

@media print {
-	body {
-        --main-font-family: serif !important;
-        --detail-font-family: var(--main-font-family) !important;
-    }
-}
+

Per-workspace styles

When using Workspaces, 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 +
  2. In the note with #workspace, add an inheritable attribute #cssClass(inheritable) with a value that uniquely identifies the workspace (say my-workspace).
    3. -
  3. Anywhere in the note structure, create a CSS note with #appCss.
    4. +
  4. Anywhere in the note structure, create a CSS note with #appCss.

Change the color of the icons in the Note Tree

.fancytree-node.my-workspace.fancytree-custom-icon {
     color: #ff0000;
@@ -71,8 +71,8 @@
   width="641" height="630">
 
 
    
-  
  1. Insert an image in any note and take the URL of the image.
    2. 
-  
  2. Use the following CSS, adjusting the background-image and width and height to
+  
  3. Insert an image in any note and take the URL of the image.
    4. 
+  
  4. Use the following CSS, adjusting the background-image and width and height to
     the desired values.
    5. 
 
.note-split.my-workspace .scrolling-container:after {
     position: fixed;
@@ -92,5 +92,5 @@
 
Some parts of the application can't be styled directly via custom CSS
   because they are rendered in an isolated mode (shadow DOM), more specifically:

 
\ No newline at end of file
diff --git a/docs/Developer Guide/Developer Guide/Concepts/Printing and exporting to PDF.md b/docs/Developer Guide/Developer Guide/Concepts/Printing and exporting to PDF.md
index ad057206b..4db40a295 100644
--- a/docs/Developer Guide/Developer Guide/Concepts/Printing and exporting to PDF.md	
+++ b/docs/Developer Guide/Developer Guide/Concepts/Printing and exporting to PDF.md	
@@ -15,4 +15,28 @@ Syntax highlighting for code blocks is supported as well:
 
 *   It works by injecting a Highlight.js stylesheet into the print.
 *   The theme used is hard-coded (the _Visual Studio Light theme_, at the time of writing) in order not to have a dark background in print.
-*   Syntax highlighting is handled by the content renderer.
\ No newline at end of file
+*   Syntax highlighting is handled by the content renderer.
+
+## Customizing the print CSS
+
+As an advanced use case, it's possible to customize the CSS used for printing such as adjusting the fonts, sizes or margins. Note that Custom app-wide CSS will not work for printing.
+
+To do so:
+
+*   Create a CSS [code note](#root/pOsGYCXsbNQG/KSZ04uQ2D1St/6f9hih2hXXZk).
+*   On the note being printed, apply the `~printCss` relation to point to the newly created CSS code note.
+*   To apply the CSS to multiple notes, consider using [inheritable attributes](#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/bwZpz2ajCEwO) or Templates.
+
+For example, to change the font of the document from the one defined by the theme or the user to a serif one:
+
+```
+body {
+	--main-font-family: serif !important;
+    --detail-font-family: var(--main-font-family) !important;
+}
+```
+
+To remark:
+
+*   Multiple CSS notes can be add by using multiple `~printCss` relations.
+*   If migrating from a previous version where Custom app-wide CSS, there's no need for `@media print {`  since the style-sheet is used only for printing.
\ No newline at end of file
diff --git a/docs/Developer Guide/Developer Guide/Documentation.md b/docs/Developer Guide/Developer Guide/Documentation.md
index f5956d744..ec29800a5 100644
--- a/docs/Developer Guide/Developer Guide/Documentation.md	
+++ b/docs/Developer Guide/Developer Guide/Documentation.md	
@@ -1,5 +1,5 @@
 # Documentation
-There are multiple types of documentation for Trilium:
+There are multiple types of documentation for Trilium:
 
 *   The _User Guide_ represents the user-facing documentation. This documentation can be browsed by users directly from within Trilium, by pressing F1.
 *   The _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers.
diff --git a/docs/User Guide/User Guide/Theme development/Custom app-wide CSS.md b/docs/User Guide/User Guide/Theme development/Custom app-wide CSS.md
index 5f63a4579..62e5b4c63 100644
--- a/docs/User Guide/User Guide/Theme development/Custom app-wide CSS.md	
+++ b/docs/User Guide/User Guide/Theme development/Custom app-wide CSS.md	
@@ -5,7 +5,7 @@ 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 |
 | ![](2_Custom%20app-wide%20CSS_image.png) | In the ribbon, press the “Owned Attributes” section and type `#appCss`. |
-| ![](3_Custom%20app-wide%20CSS_image.png) | Type the desired CSS.    
  
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.     
  
Generally it's a good idea to append `!important` for the styles that are being changed, in order to prevent other |
 
 ## Seeing the changes
 
@@ -15,18 +15,10 @@ Adding a new _app CSS note_ or modifying an existing one does not immediately ap
 
 ### 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.
-
-For example, to change the font of the document from the one defined by the theme or the user to a serif one:
-
-```
-@media print {
-	body {
-        --main-font-family: serif !important;
-        --detail-font-family: var(--main-font-family) !important;
-    }
-}
-```
+> [!TIP]
+> Since v0.99.2, it's no longer possible to use `#appCss` to customize the printing CSS, since the printing is now done in an isolated environment.
+> 
+> However, it's still possible to customize the CSS via `~printCss`; see Printing and exporting to PDF for more information.
 
 ### Per-workspace styles
 
@@ -84,4 +76,4 @@ To change the color of the note title and the icon (above the content):
 
 Some parts of the application can't be styled directly via custom CSS because they are rendered in an isolated mode (shadow DOM), more specifically:
 
-*   The slides in a Presentation View.
\ No newline at end of file
+*   The slides in a Presentation.
\ No newline at end of file