mirror of
https://github.com/zadam/trilium.git
synced 2025-10-31 10:26:08 +01:00
docs(user): improve & update documentation for printing
This commit is contained in:
Elian Doran
2
apps/server/src/assets/doc_notes/en/User Guide/!!!meta.json
generated
vendored
2
apps/server/src/assets/doc_notes/en/User Guide/!!!meta.json
generated
vendored
File diff suppressed because one or more lines are too long
@@ -302,7 +302,9 @@
|
||||
<td><code>color</code>
|
||||
</td>
|
||||
<td>defines color of the note in note tree, links etc. Use any valid CSS color
|
||||
value like 'red' or #a13d5f</td>
|
||||
value like 'red' or #a13d5f
|
||||
<br>Note: this color may be automatically adjusted when displayed to ensure
|
||||
sufficient contrast with the background.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>keyboardShortcut</code>
|
||||
|
||||
|
Before Width: | Height: | Size: 150 B After Width: | Height: | Size: 150 B |
@@ -1,42 +0,0 @@
|
||||
<p>
|
||||
<img src="Export as PDF_image.png">
|
||||
</p>
|
||||
<p>Screenshot of the note contextual menu indicating the “Export as PDF”
|
||||
option.</p>
|
||||
<p>On the desktop application of Trilium it is possible to export a note
|
||||
as PDF. On the server or PWA (mobile), the option is not available due
|
||||
to technical constraints and it will be hidden.</p>
|
||||
<p>To print a note, select the
|
||||
<img src="1_Export as PDF_image.png">button to the right of the note and select <em>Export as PDF</em>.</p>
|
||||
<p>Afterwards you will be prompted to select where to save the PDF file.</p>
|
||||
<h2>Automatic opening of the file</h2>
|
||||
<p>When the PDF is exported, it is automatically opened with the system default
|
||||
application for easy preview.</p>
|
||||
<p>Note that if you are using Linux with the GNOME desktop environment, sometimes
|
||||
the default application might seem incorrect (such as opening in GIMP).
|
||||
This is because it uses Gnome's “Recommended applications” list.</p>
|
||||
<p>To solve this, you can change the recommended application for PDFs via
|
||||
this command line. First, list the available applications via <code>gio mime application/pdf</code> and
|
||||
then set the desired one. For example to use GNOME's Evince:</p><pre><code class="language-text-x-trilium-auto">gio mime application/pdf</code></pre>
|
||||
<h2>Reporting issues with the rendering</h2>
|
||||
<p>Should you encounter any visual issues in the resulting PDF file (e.g.
|
||||
a table does not fit properly, there is cut off text, etc.) feel free to
|
||||
<a
|
||||
href="#root/_help_wy8So3yZZlH9">report the issue</a>. In this case, it's best to offer a sample note (click
|
||||
on the
|
||||
<img src="1_Export as PDF_image.png">button, select Export note → This note and all of its descendants → HTML
|
||||
in ZIP archive). Make sure not to accidentally leak any personal information.</p>
|
||||
<h2>Landscape mode</h2>
|
||||
<p>When exporting to PDF, there are no customizable settings such as page
|
||||
orientation, size, etc. However, it is possible to specify a given note
|
||||
to be printed as a PDF in landscape mode by adding the <code>#printLandscape</code> attribute
|
||||
to it (see <a class="reference-link" href="#root/_help_zEY4DaJG4YT5">Attributes</a>).</p>
|
||||
<h2>Page size</h2>
|
||||
<p>By default, the resulting PDF will be in Letter format. It is possible
|
||||
to adjust it to another page size via the <code>#printPageSize</code> attribute,
|
||||
with one of the following values: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>.</p>
|
||||
<h2>Keyboard shortcut</h2>
|
||||
<p>It's possible to trigger the export to PDF from the keyboard by going
|
||||
to <em>Keyboard shortcuts</em> in <a class="reference-link"
|
||||
href="#root/_help_4TIF1oA4VQRO">Options</a> and assigning a key combination
|
||||
for the <code>exportAsPdf</code> action.</p>
|
||||
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
111
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.html
generated
vendored
Normal file
111
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.html
generated
vendored
Normal file
@@ -0,0 +1,111 @@
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:951/432;" src="Printing & Exporting as PD.png"
|
||||
width="951" height="432">
|
||||
<figcaption>Screenshot of the note contextual menu indicating the “Export as PDF”
|
||||
option.</figcaption>
|
||||
</figure>
|
||||
<h2>Printing</h2>
|
||||
<p>This feature allows printing of notes. It works on both the desktop client,
|
||||
but also on the web.</p>
|
||||
<p>Note that not all note types are printable as of now. We do plan to increase
|
||||
the coverage of supported note types in the future.</p>
|
||||
<p>To print a note, select the
|
||||
<img src="1_Printing & Exporting as PD.png"
|
||||
width="29" height="31">button to the right of the note and select <em>Print note</em>. Depending
|
||||
on the size and type of the note, this can take up to a few seconds. Afterwards
|
||||
you will be redirected to the system/browser printing dialog.</p>
|
||||
<aside
|
||||
class="admonition note">
|
||||
<p>Printing and exporting as PDF are not perfect. Due to technical limitations,
|
||||
and sometimes even browser glitches the text might appear cut off in some
|
||||
circumstances. </p>
|
||||
</aside>
|
||||
<h2>Reporting issues with the rendering</h2>
|
||||
<p>Should you encounter any visual issues in the resulting PDF file (e.g.
|
||||
a table does not fit properly, there is cut off text, etc.) feel free to
|
||||
<a
|
||||
href="#root/_help_wy8So3yZZlH9">report the issue</a>. In this case, it's best to offer a sample note (click
|
||||
on the
|
||||
<img src="1_Printing & Exporting as PD.png" width="29" height="31">button, select Export note → This note and all of its descendants → HTML
|
||||
in ZIP archive). Make sure not to accidentally leak any personal information.</p>
|
||||
<p>Consider adjusting font sizes and using <a href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/iPIMuisry3hd/_help_CohkqWQC1iBv">page breaks</a> to
|
||||
work around the layout.</p>
|
||||
<h2>Exporting as PDF</h2>
|
||||
<p>On the desktop application of Trilium it is possible to export a note
|
||||
as PDF. On the server or PWA (mobile), the option is not available due
|
||||
to technical constraints and it will be hidden.</p>
|
||||
<p>To print a note, select the
|
||||
<img src="1_Printing & Exporting as PD.png">button to the right of the note and select <em>Export as PDF</em>. Afterwards
|
||||
you will be prompted to select where to save the PDF file.</p>
|
||||
<h3>Automatic opening of the file</h3>
|
||||
<p>When the PDF is exported, it is automatically opened with the system default
|
||||
application for easy preview.</p>
|
||||
<p>Note that if you are using Linux with the GNOME desktop environment, sometimes
|
||||
the default application might seem incorrect (such as opening in GIMP).
|
||||
This is because it uses Gnome's “Recommended applications” list.</p>
|
||||
<p>To solve this, you can change the recommended application for PDFs via
|
||||
this command line. First, list the available applications via <code>gio mime application/pdf</code> and
|
||||
then set the desired one. For example to use GNOME's Evince:</p><pre><code class="language-text-x-trilium-auto">gio mime application/pdf</code></pre>
|
||||
<h3>Customizing exporting as PDF</h3>
|
||||
<p>When exporting to PDF, there are no customizable settings such as page
|
||||
orientation, size. However, there are a few <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_zEY4DaJG4YT5">Attributes</a> to
|
||||
adjust some of the settings:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e76a765fe309058890d4f4d3e63bca578">To print in landscape mode instead of portrait (useful for big diagrams
|
||||
or slides), add <code>#printLandscape</code>.</li>
|
||||
<li data-list-item-id="e78123a3a12954d7c9f520f4e75ed375d">By default, the resulting PDF will be in Letter format. It is possible
|
||||
to adjust it to another page size via the <code>#printPageSize</code> attribute,
|
||||
with one of the following values: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>.</li>
|
||||
</ul>
|
||||
<aside class="admonition note">
|
||||
<p>These options have no effect when used with the printing feature, since
|
||||
the user-defined settings are used instead.</p>
|
||||
</aside>
|
||||
<h2>Keyboard shortcut</h2>
|
||||
<p>It's possible to trigger both printing and export as PDF from the keyboard
|
||||
by going to <em>Keyboard shortcuts</em> in <a class="reference-link"
|
||||
href="#root/_help_4TIF1oA4VQRO">Options</a> and assigning a key combination
|
||||
for:</p>
|
||||
<ul>
|
||||
<li class="ck-list-marker-italic" data-list-item-id="e52b4441f2a3af7773585b19c8f796c8d"><em>Print Active Note</em>
|
||||
</li>
|
||||
<li class="ck-list-marker-italic" data-list-item-id="e40e1f6f480c7857100f64c2f63e062fb"><em>Export Active Note as PDF</em>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Constraints & limitations</h2>
|
||||
<p>Not all <a class="reference-link" href="#root/pOsGYCXsbNQG/_help_KSZ04uQ2D1St">Note Types</a> are
|
||||
supported when printing, in which case the <em>Print</em> and <em>Export as PDF</em> options
|
||||
will be disabled.</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e448a833da1bb1643181c72779382d1b6">For <a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_6f9hih2hXXZk">Code</a> notes:
|
||||
<ul>
|
||||
<li data-list-item-id="e6b699104a21930de7c2618123d0d5750">Line numbers are not printed.</li>
|
||||
<li data-list-item-id="e342cba939534f0989c9620520c7b87a3">Syntax highlighting is enabled, however a default theme (Visual Studio)
|
||||
is enforced.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-list-item-id="ea23948a21d6ad2a01d70dfbdfa9bd62f">For <a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_GTwFsgaA0lCt">Collections</a>:
|
||||
<ul>
|
||||
<li data-list-item-id="e387ee52424d8b78fd61c3a1e0d395d3e">Only <a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/GTwFsgaA0lCt/_help_zP3PMqaG71Ct">Presentation View</a> is
|
||||
currently supported.</li>
|
||||
<li data-list-item-id="e94fa0cced6a7668c96cf7513557f2906">We plan to add support for all the collection types at some point.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-list-item-id="e8b17c931e05f9d579767536088a108da">Using <a class="reference-link" href="#root/pOsGYCXsbNQG/pKK96zzmvBGf/_help_AlhDUqhENtH7">Custom app-wide CSS</a> for
|
||||
printing is not longer supported, due to a more stable but isolated mechanism.
|
||||
<ul>
|
||||
<li data-list-item-id="eae91219e277cc2366d86d47291ed9cec">We plan to introduce a new mechanism specifically for a print CSS.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Under the hood</h2>
|
||||
<p>Both printing and exporting as PDF use the same mechanism: a note is rendered
|
||||
individually in a separate webpage that is then sent to the browser or
|
||||
the Electron application either for printing or exporting as PDF.</p>
|
||||
<p>The webpage that renders a single note can actually be accessed in a web
|
||||
browser. For example <code>http://localhost:8080/#root/WWRGzqHUfRln/RRZsE9Al8AIZ?ntxId=0o4fzk</code> becomes <code>http://localhost:8080/?print#root/WWRGzqHUfRln/RRZsE9Al8AIZ</code>.</p>
|
||||
<p>Accessing the print note in a web browser allows for easy debugging to
|
||||
understand why a particular note doesn't render well. The mechanism for
|
||||
rendering is similar to the one used in <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/_help_0ESUbbAxVnoK">Note List</a>.</p>
|
||||
@@ -6,33 +6,31 @@
|
||||
within Trilium.</p>
|
||||
<h2>How it works</h2>
|
||||
<ul>
|
||||
<li data-list-item-id="e51cbe078fb06e2bfdfb1f2bf6fd82225">Each slide is a child note of the collection.</li>
|
||||
<li data-list-item-id="efffc6f15623109770c57338c61b4ccb6">The order of the child notes determines the order of the slides.</li>
|
||||
<li
|
||||
data-list-item-id="e1a795af0f85ba888f84586be6ed2de2a">Unlike traditional presentation software, slides can be laid out both
|
||||
<li>Each slide is a child note of the collection.</li>
|
||||
<li>The order of the child notes determines the order of the slides.</li>
|
||||
<li>Unlike traditional presentation software, slides can be laid out both
|
||||
horizontally and vertically (see belwo for more information).</li>
|
||||
<li data-list-item-id="e9a2a74d8e19974766f65416100e8f877">Direct children will be laid out horizontally and the children of those
|
||||
will be laid out vertically. Children deeper than two levels of nesting
|
||||
are ignored.</li>
|
||||
<li>Direct children will be laid out horizontally and the children of those
|
||||
will be laid out vertically. Children deeper than two levels of nesting
|
||||
are ignored.</li>
|
||||
</ul>
|
||||
<h2>Interaction and navigation</h2>
|
||||
<p>In the floating buttons section (top-right):</p>
|
||||
<ul>
|
||||
<li data-list-item-id="ee6dd604137e6918dcfac24fe271b05bf">Edit button to go to the corresponding note of the current slide.</li>
|
||||
<li
|
||||
data-list-item-id="e4805f237077e9dc8ddbed2cb0b56e585">Press Overview button (or the <kbd>O</kbd> key) to show a birds-eye view
|
||||
<li>Edit button to go to the corresponding note of the current slide.</li>
|
||||
<li>Press Overview button (or the <kbd>O</kbd> key) to show a birds-eye view
|
||||
of the slides. Press the button again to disable it.</li>
|
||||
<li data-list-item-id="ee714da289257895faf87a26f6849e050">Press the “Start presentation” button to show the presentation in full-screen.</li>
|
||||
<li>Press the “Start presentation” button to show the presentation in full-screen.</li>
|
||||
</ul>
|
||||
<p>The following keyboard shortcuts are supported:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e5a34fbaa9c98cd91ffac8301e153a083">Press <kbd>←</kbd> and <kbd>→</kbd> (or <kbd>H</kbd> and <kbd>L</kbd>) to go
|
||||
<li>Press <kbd>←</kbd> and <kbd>→</kbd> (or <kbd>H</kbd> and <kbd>L</kbd>) to go
|
||||
to the slide on the left or on the right (horizontal).</li>
|
||||
<li data-list-item-id="e39394b060a9b767d04c466440106cbf0">Press <kbd>↑</kbd> and <kbd>↓</kbd> (or <kbd>K</kbd> and <kbd>J</kbd>)
|
||||
<li>Press <kbd>↑</kbd> and <kbd>↓</kbd> (or <kbd>K</kbd> and <kbd>J</kbd>)
|
||||
to go to the upward or downward slide (vertical).</li>
|
||||
<li data-list-item-id="e17441e9598f687e89a161a8afe2f703d">Press <kbd>Space</kbd> and <kbd>Shift</kbd> + <kbd>Space</kbd> or to go
|
||||
<li>Press <kbd>Space</kbd> and <kbd>Shift</kbd> + <kbd>Space</kbd> or to go
|
||||
to the next/previous slide in order.</li>
|
||||
<li data-list-item-id="e4212130fc1fdc5de980e2e40feae68c2">And a few more, press <kbd>?</kbd> to display a popup with all the supported
|
||||
<li>And a few more, press <kbd>?</kbd> to display a popup with all the supported
|
||||
keyboard combinations.</li>
|
||||
</ul>
|
||||
<h2>Vertical slides and nesting</h2>
|
||||
@@ -42,15 +40,15 @@
|
||||
<p>This horizontal/vertical organization affects transitions (especially
|
||||
on the “slide” transition), however it is most noticeable in navigation.</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e9245eba99da45713930c1714202add31">Pressing <kbd>←</kbd> and <kbd>→</kbd> will navigate through slides horizontally,
|
||||
<li>Pressing <kbd>←</kbd> and <kbd>→</kbd> will navigate through slides horizontally,
|
||||
thus skipping vertical notes under the current slide. This is useful to
|
||||
skip entire chapters/related slides. </li>
|
||||
<li data-list-item-id="ef9aedf69e5e2a599e9fbd0de1b89b4ad">Pressing <kbd>↑</kbd> and <kbd>↓</kbd> will navigate through the vertical
|
||||
skip entire chapters/related slides.</li>
|
||||
<li>Pressing <kbd>↑</kbd> and <kbd>↓</kbd> will navigate through the vertical
|
||||
slides at the current level.</li>
|
||||
<li data-list-item-id="e436fc36f74a22fdefe31e498684e23b3">Pressing <kbd>Space</kbd> and <kbd>Shift</kbd> + <kbd>Space</kbd> will go to
|
||||
<li>Pressing <kbd>Space</kbd> and <kbd>Shift</kbd> + <kbd>Space</kbd> will go to
|
||||
the next/previous slide in order, regardless of the direction. This is
|
||||
generally the key combination to use when presenting.</li>
|
||||
<li data-list-item-id="e9c5dcf5efec250876bd2c527082e76d7">The arrows on the bottom-right of the slide will also reflect this navigation
|
||||
<li>The arrows on the bottom-right of the slide will also reflect this navigation
|
||||
scheme.</li>
|
||||
</ul>
|
||||
<figure class="image image-style-align-right image_resized" style="width:55.57%;">
|
||||
@@ -62,19 +60,19 @@
|
||||
slides.</p>
|
||||
<p>In the following example, the note structure is as follows:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e4d5d440ec56a9c81b7c8323ab142478d">Presentation collection
|
||||
<li>Presentation collection
|
||||
<ul>
|
||||
<li data-list-item-id="e255021a351d18e2792c15ab2b80c0a57">Trilium Notes (demo page)</li>
|
||||
<li data-list-item-id="ef6f95ec54572aa247a13e8104a2db0c3">“Introduction” slide
|
||||
<li>Trilium Notes (demo page)</li>
|
||||
<li>“Introduction” slide
|
||||
<ul>
|
||||
<li data-list-item-id="eccb526d7f2dd67ac686f8e963e660a77">“The challenge of personal knowledge management”</li>
|
||||
<li data-list-item-id="e0aca477122bb0b00ab9b3bc163436b5f">“Note-taking structures”</li>
|
||||
<li>“The challenge of personal knowledge management”</li>
|
||||
<li>“Note-taking structures”</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-list-item-id="e3bbbe33c8d7a18cb17cd0de29b6eff05">“Demo & Feature highlights” slide
|
||||
<li>“Demo & Feature highlights” slide
|
||||
<ul>
|
||||
<li data-list-item-id="ebf5e3fe8a8b4400f21d5cc99b8198898">“Really fast installation process”</li>
|
||||
<li data-list-item-id="e0b6885a0bf7f76fa2ce7801f004a2d42">Video slide</li>
|
||||
<li>“Really fast installation process”</li>
|
||||
<li>Video slide</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -83,56 +81,54 @@
|
||||
<h2>Customization</h2>
|
||||
<p>At collection level, it's possible to adjust:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="edc0a7c71ee836a225a8793e3cb1e29e8">The theme of the entire presentation to one of the predefined themes by
|
||||
going to the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_BlN9DFI679QC">Ribbon</a> and
|
||||
<li>The theme of the entire presentation to one of the predefined themes by
|
||||
going to the <a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a> and
|
||||
looking for the <em>Collection Properties</em> tab.</li>
|
||||
<li data-list-item-id="ed04e1bd7a997de717d8b8b8b90f19e7f">It's currently not possible to create custom themes, although it is planned.</li>
|
||||
<li
|
||||
data-list-item-id="edb37c7902c9e464de4555ec3ede05403">Note that it is note possible to alter the CSS via <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/pKK96zzmvBGf/_help_AlhDUqhENtH7">Custom app-wide CSS</a> because
|
||||
the slides are rendered isolated (in a shadow DOM).</li>
|
||||
<li>It's currently not possible to create custom themes, although it is planned.</li>
|
||||
<li>Note that it is note possible to alter the CSS via <a class="reference-link"
|
||||
href="#root/_help_AlhDUqhENtH7">Custom app-wide CSS</a> because the
|
||||
slides are rendered isolated (in a shadow DOM).</li>
|
||||
</ul>
|
||||
<p>At slide level:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="eb9c23ec94dcd00a3a8539d3cd633d7df">It's possible to adjust the background color of a slide by using the
|
||||
<li>It's possible to adjust the background color of a slide by using the
|
||||
<a
|
||||
href="#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/_help_OFXdgB2nNk1F">predefined promoted attribute</a>for the color or manually setting <code>#slide:background</code> to
|
||||
href="#root/_help_OFXdgB2nNk1F">predefined promoted attribute</a>for the color or manually setting <code>#slide:background</code> to
|
||||
a hex color.</li>
|
||||
<li data-list-item-id="e70af66a7d3468b7fa86badb1e2c93cc9">More complex backgrounds can be achieved via gradients. There's no UI
|
||||
<li>More complex backgrounds can be achieved via gradients. There's no UI
|
||||
for it; it has to be set via <code>#slide:background</code> to a CSS gradient
|
||||
definition such as: <code>linear-gradient(to bottom, #283b95, #17b2c3)</code>.</li>
|
||||
</ul>
|
||||
<h2>Tips and tricks</h2>
|
||||
<ul>
|
||||
<li data-list-item-id="ec501025735d0063969f2a48eedb651dc">Text notes generally respect the formatting (bold, italic, foreground
|
||||
<li>Text notes generally respect the formatting (bold, italic, foreground
|
||||
and background colors) and font size. Code blocks and tables also work.</li>
|
||||
<li
|
||||
data-list-item-id="e8acd457a2660726905aee30a9325a620">Try using more than just text notes, the presentation uses the same mechanism
|
||||
as <a href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_R9pX4DGra2Vt">shared notes</a> and
|
||||
<li>Try using more than just text notes, the presentation uses the same mechanism
|
||||
as <a href="#root/_help_R9pX4DGra2Vt">shared notes</a> and <a class="reference-link"
|
||||
href="#root/_help_0ESUbbAxVnoK">Note List</a> so it should be able
|
||||
to display <a class="reference-link" href="#root/_help_s1aBHPd79XYj">Mermaid Diagrams</a>,
|
||||
<a
|
||||
class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/_help_0ESUbbAxVnoK">Note List</a> so it should be able to display <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_s1aBHPd79XYj">Mermaid Diagrams</a>,
|
||||
<a
|
||||
class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_grjYqerjn243">Canvas</a> and <a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_gBbsAeiuUxI5">Mind Map</a> in
|
||||
full-screen (without the interactivity).
|
||||
<ul>
|
||||
<li data-list-item-id="e91cdf4823552f771ed802de7fd6330e4">Consider using a transparent background for <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_grjYqerjn243">Canvas</a>, if
|
||||
the slides have a custom background (go to the hamburger menu in the Canvas,
|
||||
press the button select a custom color and write <code>transparent</code>).</li>
|
||||
<li
|
||||
data-list-item-id="ebed408174c89a15dc9b0ee74d36e2e70">
|
||||
<p>For <a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_s1aBHPd79XYj">Mermaid Diagrams</a>,
|
||||
some of them have a predefined background which can be changed via the
|
||||
frontmatter. For example, for XY-charts:</p><pre><code class="language-text-x-trilium-auto">---
|
||||
class="reference-link" href="#root/_help_grjYqerjn243">Canvas</a> and <a class="reference-link" href="#root/_help_gBbsAeiuUxI5">Mind Map</a> in
|
||||
full-screen (without the interactivity).
|
||||
<ul>
|
||||
<li>
|
||||
<p>Consider using a transparent background for <a class="reference-link"
|
||||
href="#root/_help_grjYqerjn243">Canvas</a>, if the slides have a custom
|
||||
background (go to the hamburger menu in the Canvas, press the button select
|
||||
a custom color and write <code>transparent</code>).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>For <a class="reference-link" href="#root/_help_s1aBHPd79XYj">Mermaid Diagrams</a>,
|
||||
some of them have a predefined background which can be changed via the
|
||||
frontmatter. For example, for XY-charts:</p><pre><code class="language-text-x-trilium-auto">---
|
||||
config:
|
||||
themeVariables:
|
||||
xyChart:
|
||||
backgroundColor: transparent
|
||||
---</code></pre>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Under the hood</h2>
|
||||
<p>The Presentation view uses <a href="https://revealjs.com/">Reveal.js</a> to
|
||||
|
||||
@@ -1,38 +1,37 @@
|
||||
<p>It is possible to provide a CSS file to be used regardless of the theme
|
||||
set by the user.</p>
|
||||
<figure class="table">
|
||||
<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.
|
||||
<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>
|
||||
<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.
|
||||
<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>
|
||||
|
||||
<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
|
||||
@@ -54,10 +53,9 @@
|
||||
workspaces.</p>
|
||||
<p>To do so:</p>
|
||||
<ol>
|
||||
<li data-list-item-id="eaca1b6777262e20c38dae5e2c2ef8496">In the note with <code>#workspace</code>, add an inheritable attribute <code>#cssClass(inheritable)</code> with
|
||||
<li>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="e01663cf2128c10a0cd0cab1bb27fd44d">Anywhere in the note structure, create a CSS note with <code>#appCss</code>.</li>
|
||||
<li>Anywhere in the note structure, create a CSS note with <code>#appCss</code>.</li>
|
||||
</ol>
|
||||
<h4>Change the color of the icons in the <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;
|
||||
@@ -73,8 +71,8 @@
|
||||
width="641" height="630">
|
||||
</figure>
|
||||
<ol>
|
||||
<li data-list-item-id="e6e7ec9751bdc6f7846d10bf42c42c9b1">Insert an image in any note and take the URL of the image.</li>
|
||||
<li data-list-item-id="edc7f77ed718593d91bda3b2983b81bed">Use the following CSS, adjusting the <code>background-image</code> and <code>width</code> and <code>height</code> to
|
||||
<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
|
||||
the desired values.</li>
|
||||
</ol><pre><code class="language-text-x-trilium-auto">.note-split.my-workspace .scrolling-container:after {
|
||||
position: fixed;
|
||||
@@ -94,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 data-list-item-id="e3ce2c089fe536bc42856bb1b5edc8c8e">The slides in a <a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/GTwFsgaA0lCt/_help_zP3PMqaG71Ct">Presentation View</a>.</li>
|
||||
<li>The slides in a <a class="reference-link" href="#root/_help_zP3PMqaG71Ct">Presentation View</a>.</li>
|
||||
</ul>
|
||||
Reference in New Issue
Block a user