gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-10 08:29:00 +01:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

docs(user): document custom print CSS

Browse Source
This commit is contained in:
Elian Doran 2025-11-07 17:25:14 +02:00
parent 7a677cff5f
commit cedd1c4789
No known key found for this signature in database
4 changed files with 78 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Custom app-wide CSS.html generated vendored
View File

@ -1,61 +1,61 @@
<p>It is possible to provide a CSS file to be used regardless of the theme <p>It is possible to provide a CSS file to be used regardless of the theme
set by the user.</p> 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="2_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="3_Custom app-wide CSS_image.png"> <td>
</td> <img src="3_Custom app-wide CSS_image.png">
<td>Type the desired CSS.&nbsp;&nbsp; </td>
<br> <td>Type the desired CSS.&nbsp;&nbsp;&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> <h2>Seeing the changes</h2>
<p>Adding a new <em>app CSS note</em> or modifying an existing one does not <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 immediately apply changes. To see the changes, press Ctrl+Shift+R to refresh
the page first.</p> the page first.</p>
<h2>Sample use cases</h2> <h2>Sample use cases</h2>
<h3>Customizing the printing stylesheet</h3> <h3>Customizing the printing stylesheet</h3>
<p>When printing a document or exporting as PDF, it is possible to adjust <aside class="admonition tip">
the style by creating a CSS note that uses the <code>@media</code> selector.</p> <p>Since v0.99.2, it's no longer possible to use <code>#appCss</code> to customize
<p>For example, to change the font of the document from the one defined by the printing CSS, since the printing is now done in an isolated environment.</p>
the theme or the user to a serif one:</p><pre><code class="language-text-x-trilium-auto">@media print { <p>However, it's still possible to customize the CSS via <code>~printCss</code>;
body { see&nbsp;<a class="reference-link" href="#root/jdjRLhLV3TtI/yeqU0zo0ZQ83/_help_W0msUwLxm40d">Printing and exporting to PDF</a>&nbsp;for
--main-font-family: serif !important; more information.</p>
--detail-font-family: var(--main-font-family) !important; </aside>
}
}</code></pre>
<h3>Per-workspace styles</h3> <h3>Per-workspace styles</h3>
<p>When using&nbsp;<a class="reference-link" href="#root/_help_9sRHySam5fXb">Workspaces</a>, <p>When using&nbsp;<a class="reference-link" href="#root/_help_9sRHySam5fXb">Workspaces</a>,
it can be helpful to create a visual distinction between notes in different it can be helpful to create a visual distinction between notes in different
workspaces.</p> workspaces.</p>
<p>To do so:</p> <p>To do so:</p>
<ol> <ol>
<li>In the note with <code>#workspace</code>, add an inheritable attribute <code>#cssClass(inheritable)</code> with <li data-list-item-id="e591e9a3631fa3729bc62dbfc7c30cf73">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> a value that uniquely identifies the workspace (say <code>my-workspace</code>).</li>
<li>Anywhere in the note structure, create a CSS note with <code>#appCss</code>.</li> <li
data-list-item-id="eb0073ce6acba5e4f91cc4bfc2acbdd2a">Anywhere in the note structure, create a CSS note with <code>#appCss</code>.</li>
</ol> </ol>
<h4>Change the color of the icons in the&nbsp;<a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a></h4><pre><code class="language-text-x-trilium-auto">.fancytree-node.my-workspace.fancytree-custom-icon { <h4>Change the color of the icons in the&nbsp;<a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a></h4><pre><code class="language-text-x-trilium-auto">.fancytree-node.my-workspace.fancytree-custom-icon {
color: #ff0000; color: #ff0000;
@ -71,8 +71,8 @@
width="641" height="630"> width="641" height="630">
</figure> </figure>
<ol> <ol>
<li>Insert an image in any note and take the URL of the image.</li> <li data-list-item-id="e3297614b2f73893bb02f38ab1c3a4307">Insert an image in any note and take the URL of the image.</li>
<li>Use the following CSS, adjusting the <code>background-image</code> and <code>width</code> and <code>height</code> to <li data-list-item-id="eaedddcc05035bff463d91c83484faac2">Use the following CSS, adjusting the <code>background-image</code> and <code>width</code> and <code>height</code> to
the desired values.</li> the desired values.</li>
</ol><pre><code class="language-text-x-trilium-auto">.note-split.my-workspace .scrolling-container:after { </ol><pre><code class="language-text-x-trilium-auto">.note-split.my-workspace .scrolling-container:after {
position: fixed; position: fixed;
@ -92,5 +92,5 @@
<p>Some parts of the application can't be styled directly via custom CSS <p>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:</p> because they are rendered in an isolated mode (shadow DOM), more specifically:</p>
<ul> <ul>
<li>The slides in a&nbsp;<a class="reference-link" href="#root/_help_zP3PMqaG71Ct">Presentation View</a>.</li> <li data-list-item-id="ed33bb330d4e5c6d1219334b51edcc1b7">The slides in a&nbsp;<a class="reference-link" href="#root/_help_zP3PMqaG71Ct">Presentation</a>.</li>
</ul> </ul>

26
docs/Developer Guide/Developer Guide/Concepts/Printing and exporting to PDF.md vendored
View File

@ -15,4 +15,28 @@ Syntax highlighting for code blocks is supported as well:
* It works by injecting a Highlight.js stylesheet into the print. * 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. * 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.
* <a class="reference-link" href="Syntax%20highlighting.md">Syntax highlighting</a> is handled by the content renderer. * <a class="reference-link" href="Syntax%20highlighting.md">Syntax highlighting</a> 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 <a class="reference-link" href="#root/pOsGYCXsbNQG/pKK96zzmvBGf/AlhDUqhENtH7">Custom app-wide CSS</a> 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 <a class="reference-link" href="#root/pOsGYCXsbNQG/tC7s2alapj8V/KC1HB96bqqHX">Templates</a>.
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 <a class="reference-link" href="#root/pOsGYCXsbNQG/pKK96zzmvBGf/AlhDUqhENtH7">Custom app-wide CSS</a>, there's no need for `@media print {`  since the style-sheet is used only for printing.

2
docs/Developer Guide/Developer Guide/Documentation.md vendored
View File

@ -1,5 +1,5 @@
# Documentation # Documentation
There are multiple types of documentation for Trilium:<img class="image-style-align-right" src="api/images/kaFXA5t813qK/Documentation_image.png" width="205" height="162"> There are multiple types of documentation for Trilium:<img class="image-style-align-right" src="api/images/cWbjcMrvgaUn/Documentation_image.png" width="205" height="162">
* The _User Guide_ represents the user-facing documentation. This documentation can be browsed by users directly from within Trilium, by pressing <kbd>F1</kbd>. * The _User Guide_ represents the user-facing documentation. This documentation can be browsed by users directly from within Trilium, by pressing <kbd>F1</kbd>.
* The _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers. * The _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers.

20
docs/User Guide/User Guide/Theme development/Custom app-wide CSS.md vendored
View File

@ -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 | | ![](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`. | | ![](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.   <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 ## 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 ### 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. > [!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.
For example, to change the font of the document from the one defined by the theme or the user to a serif one: >
> However, it's still possible to customize the CSS via `~printCss`; see <a class="reference-link" href="#root/jdjRLhLV3TtI/yeqU0zo0ZQ83/W0msUwLxm40d">Printing and exporting to PDF</a> for more information.
```
@media print {
body {
--main-font-family: serif !important;
--detail-font-family: var(--main-font-family) !important;
}
}
```
### Per-workspace styles ### 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: 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 <a class="reference-link" href="../Collections/Presentation.md">Presentation View</a>. * The slides in a <a class="reference-link" href="../Collections/Presentation.md">Presentation</a>.