gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-10 00:19:04 +01:00
Code Issues Actions 12 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
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="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;&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 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;&nbsp;&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>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>
<aside class="admonition tip">
<p>Since v0.99.2, it's no longer possible to use <code>#appCss</code> to customize
the printing CSS, since the printing is now done in an isolated environment.</p>
<p>However, it's still possible to customize the CSS via <code>~printCss</code>;
see&nbsp;<a class="reference-link" href="#root/jdjRLhLV3TtI/yeqU0zo0ZQ83/_help_W0msUwLxm40d">Printing and exporting to PDF</a>&nbsp;for
more information.</p>
</aside>
<h3>Per-workspace styles</h3>
<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
workspaces.</p>
<p>To do so:</p>
<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>
<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>
<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;
@ -71,8 +71,8 @@
width="641" height="630">
</figure>
<ol>
<li>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="e3297614b2f73893bb02f38ab1c3a4307">Insert an image in any note and take the URL of the image.</li>
<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>
</ol><pre><code class="language-text-x-trilium-auto">.note-split.my-workspace .scrolling-container:after {
position: fixed;
@ -92,5 +92,5 @@
<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>
<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>

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

@ -16,3 +16,27 @@ 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.
* <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
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 _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 |
| ![](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
@ -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 <a class="reference-link" href="#root/jdjRLhLV3TtI/yeqU0zo0ZQ83/W0msUwLxm40d">Printing and exporting to PDF</a> 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 <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>.