Organization is an important aspect of managing a knowledge base. When
+ developing a new theme or importing an existing one it's a good idea to
+ keep them into one place.
+
As such, the first step is to create a new note to gather all the themes.
+
+
+
+
Step 2. Create the theme
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Themes are code notes with a special attribute. Start by creating a new
+ code note.
+
+
+
+
+
+
+
+
Then change the note type to a CSS code.
+
+
+
+
+
+
+
+
In the Owned Attributes section define the #appTheme attribute
+ to point to any desired name. This is the name that will show up in the
+ appearance section in settings.
+
+
+
+
+
Step 3. Define the theme's CSS
+
As a very simple example we will change the background color of the launcher
+ pane to a shade of blue.
Refresh the application (Ctrl+Shift+R is a good way to do so) and go to
+ settings. You should see the newly created theme:
+
+
+
+
Afterwards the application will refresh itself with the new theme:
+
+
+
+
Do note that the theme will be based off of the legacy theme. To override
+ that and base the theme on the new TriliumNext theme, see: Theme base (legacy vs. next)
+
+
Step 5. Making changes
+
Simply go back to the note and change according to needs. To apply the
+ changes to the current window, press Ctrl+Shift+R to refresh.
+
It's a good idea to keep two windows, one for editing and the other one
+ for previewing the changes.
+
+
+
+
+
\ No newline at end of file
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Power users/Theme development/Creating a custom theme_im.png b/src/public/app/doc_notes/en/User Guide/User Guide/Power users/Theme development/Creating a custom theme_im.png
new file mode 100644
index 000000000..60ed508e2
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Power users/Theme development/Creating a custom theme_im.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Power users/Theme development/Reference.html b/src/public/app/doc_notes/en/User Guide/User Guide/Power users/Theme development/Reference.html
new file mode 100644
index 000000000..13af6494e
--- /dev/null
+++ b/src/public/app/doc_notes/en/User Guide/User Guide/Power users/Theme development/Reference.html
@@ -0,0 +1,129 @@
+
+
+
+
+
+
+
+ Reference
+
+
+
+
+
Reference
+
+
+
Detecting horizontal vs. vertical layout
+
The user can select between vertical layout (the classical one, where
+ the launcher bar is on the left) and a horizontal layout (where the launcher
+ bar is on the top and tabs are full-width).
+
Different styles can be applied by using classes at body level:
body.layout-vertical #left-pane {
+ /* Do something */
+}
+
+body.layout-horizontal #center-pane {
+ /* Do something else */
+}
+
The two different layouts use different containers (but they are present
+ in the DOM regardless of the user's choice), for example #horizontal-main-container and #vertical-main-container can
+ be used to customize the background of the content section.
+
Detecting platform (Windows, macOS) or Electron
+
It is possible to add particular styles that only apply to a given platform
+ by using the classes in body:
+
+
+
+
+
Windows
+
macOS
+
+
+
+
+
body.platform-win32 {
+ background: red;
+}
+
+
body.platform-darwin {
+ background: red;
+}
+
+
+
+
+
+
It is also possible to only apply a style if running under Electron (desktop
+ application):
body.electron {
+ background: blue;
+}
+
Native title bar
+
It's possible to detect if the user has selected the native title bar
+ or the custom title bar by querying against body:
body.electron.native-titlebar {
+ /* Do something */
+}
+
+body.electron:not(.native-titlebar) {
+ /* Do something else */
+}
+
Native window buttons
+
When running under Electron with native title bar off, a feature was introduced
+ to use the platform-specific window buttons such as the semaphore on macOS.
The colors of the native window button area can be adjusted using a RGB
+ hex color:
body {
+ --native-titlebar-foreground: #ffffff;
+ --native-titlebar-background: #ff0000;
+}
+
It is also possible to use transparency at the cost of reduced hover colors
+ using a RGBA hex color:
body {
+ --native-titlebar-background: #ff0000aa;
+}
+
Note that the value is read when the window is initialized and then it
+ is refreshed only when the user changes their light/dark mode preference.
+
On macOS
+
On macOS the semaphore window buttons are enabled by default when the
+ native title bar is disabled. The offset of the buttons can be adjusted
+ using:
body {
+ --native-titlebar-darwin-x-offset: 12;
+ --native-titlebar-darwin-y-offset: 14 !important;
+}
+
Background/transparency effects on Windows (Mica)
+
Windows 11 offers a special background/transparency effect called Mica,
+ which can be enabled by themes by setting the --background-material variable
+ at body level:
The value can be either tabbed (especially useful for the horizontal
+ layout) or mica (ideal for the vertical layout).
+
Do note that the Mica effect is applied at body level and the
+ theme needs to make the entire hierarchy (semi-)transparent in order for
+ it to be visible. Use the TrilumNext theme as an inspiration.
+
Note icons, tab workspace accent color
+
Theme capabilities are small adjustments done through CSS variables that
+ can affect the layout or the visual aspect of the application.
+
In the tab bar, to display the icons of notes instead of the icon of the
+ workspace:
:root {
+ --tab-note-icons: true;
+}
+
When a workspace is hoisted for a given tab, it is possible to get the
+ background color of that workspace, for example to apply a small strip
+ on the tab instead of the whole background color:
+
+
+
\ No newline at end of file
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Power users/Theme development/Theme base (legacy vs. nex.png b/src/public/app/doc_notes/en/User Guide/User Guide/Power users/Theme development/Theme base (legacy vs. nex.png
new file mode 100644
index 000000000..49dedf623
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Power users/Theme development/Theme base (legacy vs. nex.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Power users/Theme development/Theme base (legacy vs. next).html b/src/public/app/doc_notes/en/User Guide/User Guide/Power users/Theme development/Theme base (legacy vs. next).html
new file mode 100644
index 000000000..d392deed4
--- /dev/null
+++ b/src/public/app/doc_notes/en/User Guide/User Guide/Power users/Theme development/Theme base (legacy vs. next).html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+ Theme base (legacy vs. next)
+
+
+
+
+
Theme base (legacy vs. next)
+
+
+
By default, any custom theme will be based on the legacy light theme.
+ To change the TriliumNext theme instead, add the #appThemeBase=next attribute
+ onto the existing theme. The appTheme attribute must also be
+ present.
+
+
+
+
When appThemeBase is set to next it will use the
+ “TriliumNext (auto)” theme. Any other value is ignored and will use the
+ legacy white theme instead.
+
Overrides
+
Do note that the TriliumNext theme has a few more overrides than the legacy
+ theme, so you might need to suffix !important if the style changes
+ are not applied.
+
+
+
\ No newline at end of file
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/10_Geo map_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/10_Geo map_image.png
new file mode 100644
index 000000000..f7be847f1
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/10_Geo map_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/11_Geo map_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/11_Geo map_image.png
new file mode 100644
index 000000000..128e1df79
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/11_Geo map_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/12_Geo map_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/12_Geo map_image.png
new file mode 100644
index 000000000..50401dd2a
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/12_Geo map_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/13_Geo map_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/13_Geo map_image.png
new file mode 100644
index 000000000..5639d80ae
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/13_Geo map_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/14_Geo map_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/14_Geo map_image.png
new file mode 100644
index 000000000..e97de57e4
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/14_Geo map_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/15_Geo map_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/15_Geo map_image.png
new file mode 100644
index 000000000..98397acee
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/15_Geo map_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/16_Geo map_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/16_Geo map_image.png
new file mode 100644
index 000000000..be7fd6f6f
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/16_Geo map_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/17_Geo map_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/17_Geo map_image.png
new file mode 100644
index 000000000..59d0cbbac
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/17_Geo map_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/18_Geo map_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/18_Geo map_image.png
new file mode 100644
index 000000000..debb47ce3
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/18_Geo map_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/19_Geo map_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/19_Geo map_image.png
new file mode 100644
index 000000000..adec6e898
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/19_Geo map_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/1_Geo map_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/1_Geo map_image.png
new file mode 100644
index 000000000..f76abe4a4
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/1_Geo map_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/2_Geo map_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/2_Geo map_image.png
new file mode 100644
index 000000000..23209e0ad
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/2_Geo map_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/3_Geo map_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/3_Geo map_image.png
new file mode 100644
index 000000000..97879b76a
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/3_Geo map_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/4_Geo map_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/4_Geo map_image.png
new file mode 100644
index 000000000..1b88e14e6
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/4_Geo map_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/5_Geo map_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/5_Geo map_image.png
new file mode 100644
index 000000000..4552aaf59
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/5_Geo map_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/6_Geo map_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/6_Geo map_image.png
new file mode 100644
index 000000000..9bb397516
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/6_Geo map_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/7_Geo map_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/7_Geo map_image.png
new file mode 100644
index 000000000..4e32110f8
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/7_Geo map_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/8_Geo map_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/8_Geo map_image.png
new file mode 100644
index 000000000..9292d9bb9
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/8_Geo map_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/9_Geo map_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/9_Geo map_image.png
new file mode 100644
index 000000000..5982cc31c
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/9_Geo map_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/Geo map.html b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/Geo map.html
new file mode 100644
index 000000000..bcaf6d7b7
--- /dev/null
+++ b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/Geo map.html
@@ -0,0 +1,295 @@
+
+
+
+
+
+
+
+ Geo map
+
+
+
+
+
Geo map
+
+
+
Creating a new geo map
+
+
+
+
+
+
+
+
+
+
1
+
+
+
+
+
+
Right click on any note on the note tree and select Insert child note → Geo Map (beta).
+
+
+
2
+
+
+
+
+
+
By default the map will be empty and will show the entire world.
+
+
+
+
+
Repositioning the map
+
+
Click and drag the map in order to move across the map.
+
Use the mouse wheel, two-finger gesture on a touchpad or the +/- buttons
+ on the top-left to adjust the zoom.
+
+
The position on the map and the zoom are saved inside the map note. When
+ visting again the note it will restore this position.
+
Adding a marker using the map
+
+
+
+
+
+
+
+
+
+
1
+
+
+
To create a marker, first navigate to the desired point on the map. Then
+ press the
+ button on the top-right of the map.
+
If the button is not visible, make sure the button section is visible
+ by pressing the chevron button (
+ ) in the top-right of the map.
+
+
+
+
2
+
+
+
+
+
+
+
+
Once pressed, the map will enter in the insert mode, as illustrated by
+ the notification.
+
Simply click the point on the map where to place the marker, or the Escape
+ key to cancel.
+
+
+
+
3
+
+
+
+
+
+
+
Enter the name of the marker/note to be created.
+
+
+
4
+
+
+
+
+
+
+
Once confirmed, the marker will show up on the map and it will also be
+ displayed as a child note of the map.
+
+
+
+
+
Repositioning markers
+
It's possible to reposition existing markers by simply drag and dropping
+ them to the new destination.
+
As soon as the mouse is released, the new position is saved.
+
If moved by mistake, there is currently no way to undo the change. If
+ the mouse was not yet released, it's possible to force a refresh of the
+ page (Ctrl+R or Meta+R) to cancel it.
+
Adding the geolocation manually
+
The location of a marker is stored in the #geolocation attribute
+ of the child notes:
+
+
+
+
The value of the attribute is made up of the latitude and longitude separated
+ by a comma.
+
Adding from Google Maps
+
+
+
+
+
1
+
+
+
+
+
+
+
Go to Google Maps on the web and look for a desired location, right click
+ on it and a context menu will show up.
+
Simply click on the first item displaying the coordinates and they will
+ be copied to clipboard.
+
Then paste the value inside the text box into the #geolocation attribute
+ of a child note of the map (don't forget to surround the value with a " character).
+
+
+
+
2
+
+
+
+
+
+
+
In Trilium, create a child note under the map.
+
+
+
+
+
+
3
+
+
+
+
+
+
And then go to Owned Attributes and type #geolocation=", then
+ paste from the clipboard as-is and then add the ending " character.
+ Press Enter to confirm and the map should now be updated to contain the
+ new note.
+
+
+
+
+
Adding from OpenStreetMap
+
Similarly to the Google Maps approach:
+
+
+
+
+
+
+
+
+
+
1
+
+
+
+
+
+
Go to any location on openstreetmap.org and right click to bring up the
+ context menu. Select the “Show address” item.
+
+
+
2
+
+
+
+
+
+
+
The address will be visible in the top-left of the screen, in the place
+ of the search bar.
+
Select the coordinates and copy them into the clipboard.
+
+
+
+
3
+
+
+
+
+
+
Simply paste the value inside the text box into the #geolocation attribute
+ of a child note of the map and then it should be displayed on the map.
+
+
+
+
+
Adding GPS tracks (.gpx)
+
Trilium has basic support for displaying GPS tracks on the geo map.
+
+
+
+
+
+
+
+
+
+
1
+
+
+
+
+
+
To add a track, simply drag & drop a .gpx file inside the geo map
+ in the note tree.
+
+
+
2
+
+
+
+
+
+
In order for the file to be recognized as a GPS track, it needs to show
+ up as application/gpx+xml in the File type field.
+
+
+
3
+
+
+
+
+
+
+
When going back to the map, the track should now be visible.
+
The start and end points of the track are indicated by the two blue markers.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/Geo map_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/Geo map_image.png
new file mode 100644
index 000000000..c7bb7f704
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Types of notes/Geo map_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Working with notes/1_Exporting as PDF_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Working with notes/1_Exporting as PDF_image.png
new file mode 100644
index 000000000..45b8774d4
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Working with notes/1_Exporting as PDF_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Working with notes/2_Exporting as PDF_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Working with notes/2_Exporting as PDF_image.png
new file mode 100644
index 000000000..64a807909
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Working with notes/2_Exporting as PDF_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Working with notes/Exporting as PDF.html b/src/public/app/doc_notes/en/User Guide/User Guide/Working with notes/Exporting as PDF.html
new file mode 100644
index 000000000..045180d5f
--- /dev/null
+++ b/src/public/app/doc_notes/en/User Guide/User Guide/Working with notes/Exporting as PDF.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+ Exporting as PDF
+
+
+
+
+
Exporting as PDF
+
+
+
+
+
+
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.
+
To print a note, select the
+ button to the right of the note and select Export as PDF.
+
Afterwards you will be prompted to select where to save the PDF file.
+ Upon confirmation, the resulting PDF will be opened automatically.
+
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
+ report the issue. In this case, it's best to offer a sample note (click
+ on the
+ button, select Export note → This note and all of its descendants → HTML
+ in ZIP archive). Make sure not to accidentally leak any personal information.
+
Landscape mode
+
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 #printLandscape attribute
+ to it (see Adding an attribute to a note).
+
Page size
+
By default, the resulting PDF will be in Letter format. It is possible
+ to adjust it to another page size via the #printPageSize attribute,
+ with one of the following values: A0, A1, A2, A3, A4, A5, A6, Legal, Letter, Tabloid, Ledger.
+
Keyboard shortcut
+
It's possible to trigger the export to PDF from the keyboard by going
+ to Keyboard shortcuts and assigning a key combination
+ for the exportAsPdf action.
+
+
+
+
+
\ No newline at end of file
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Working with notes/Exporting as PDF_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Working with notes/Exporting as PDF_image.png
new file mode 100644
index 000000000..610f54c67
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Working with notes/Exporting as PDF_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/index.html b/src/public/app/doc_notes/en/User Guide/index.html
new file mode 100644
index 000000000..bac353ead
--- /dev/null
+++ b/src/public/app/doc_notes/en/User Guide/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/public/app/doc_notes/en/User Guide/navigation.html b/src/public/app/doc_notes/en/User Guide/navigation.html
new file mode 100644
index 000000000..ddf57d958
--- /dev/null
+++ b/src/public/app/doc_notes/en/User Guide/navigation.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+