Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-09-18 17:31:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(docs): missing images in theme development

Browse Source
This commit is contained in:
Elian Doran 2025-04-03 21:08:18 +03:00
parent 38ed8b6592
commit 25fe6c2690
No known key found for this signature in database
18 changed files with 194 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
docs/User Guide/!!!meta.json
View File

@ -4742,6 +4742,14 @@
"position": 10,
"dataFileName": "10_Geo map_image.png"
},
{
"attachmentId": "IeXU8SLZU7Oz",
"title": "image.jpg",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "Geo map_image.jpg"
},
{
"attachmentId": "Mx2xwNIk76ZS",
"title": "image.png",
@ -5111,6 +5119,62 @@
"format": "markdown",
"dataFileName": "Creating a custom theme.md",
"attachments": [
{
"attachmentId": "3kOhtnQHT9w0",
"title": "5_Creating%20a%20custom%20theme_im.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "Creating a custom theme_5_.png"
},
{
"attachmentId": "7M6PnFYlxR2t",
"title": "3_Creating a custom theme_im.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "Creating a custom theme_3_.png"
},
{
"attachmentId": "hJc5fBNfSLoY",
"title": "Creating a custom theme_im.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "Creating a custom theme_Cr.png"
},
{
"attachmentId": "j3OaGihW6eg3",
"title": "1_Creating a custom theme_im.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "Creating a custom theme_1_.png"
},
{
"attachmentId": "LCQ6zvUbvXQr",
"title": "4_Creating a custom theme_im.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "Creating a custom theme_4_.png"
},
{
"attachmentId": "mY5EGlN7TO6I",
"title": "5_Creating a custom theme_im.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "1_Creating a custom theme_5_.png"
},
{
"attachmentId": "TMHEj1M3XFGO",
"title": "2_Creating a custom theme_im.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "Creating a custom theme_2_.png"
},
{
"attachmentId": "yJVfT7rjp4tI",
"title": "image.png",
@ -6887,28 +6951,28 @@
{
"type": "relation",
"name": "internalLink",
"value": "KSZ04uQ2D1St",
"value": "_optionsTextNotes",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "_optionsTextNotes",
"value": "_optionsCodeNotes",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "MI26XDLSAlCD",
"value": "KSZ04uQ2D1St",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "_optionsCodeNotes",
"value": "MI26XDLSAlCD",
"isInheritable": false,
"position": 40
},

BIN
docs/User Guide/User Guide/Theme development/1_Creating a custom theme_5_.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

12
docs/User Guide/User Guide/Theme development/Creating a custom theme.md
View File

@ -5,15 +5,15 @@ Organization is an important aspect of managing a knowledge base. When developin
As such, the first step is to create a new note to gather all the themes.
!\[\](4\_Creating%20a custom theme\_im.png)
![](1_Creating%20a%20custom%20theme_5_.png)
## Step 2. Create the theme
| | |
| --- | --- |
| ![](Creating%20a%20custom%20theme_im.png) | Themes are code notes with a special attribute. Start by creating a new code note. |
| !\[\](Creating%20a%20custom theme\_im.png) | Then change the note type to a CSS code. |
| !\[\](5\_Creating%20a%20custom theme\_im.png) | 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. |
| ![](Creating%20a%20custom%20theme_3_.png) | Themes are code notes with a special attribute. Start by creating a new code note. |
| ![](Creating%20a%20custom%20theme_1_.png) | Then change the note type to a CSS code. |
| ![](Creating%20a%20custom%20theme_Cr.png) | 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
@ -31,11 +31,11 @@ To alter the different variables of the theme:
Refresh the application (Ctrl+Shift+R is a good way to do so) and go to settings. You should see the newly created theme:
!\[\](1\_Creating%20a%20custom theme\_im.png)
![](Creating%20a%20custom%20theme_2_.png)
Afterwards the application will refresh itself with the new theme:
!\[\](3\_Creating%20a%20custom theme\_im.png)
![](Creating%20a%20custom%20theme_4_.png)
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)](Customize%20the%20Next%20theme.md)

BIN
docs/User Guide/User Guide/Theme development/Creating a custom theme_1_.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
docs/User Guide/User Guide/Theme development/Creating a custom theme_2_.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
docs/User Guide/User Guide/Theme development/Creating a custom theme_3_.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
docs/User Guide/User Guide/Theme development/Creating a custom theme_4_.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
docs/User Guide/User Guide/Theme development/Creating a custom theme_5_.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
docs/User Guide/User Guide/Theme development/Creating a custom theme_Cr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

72
src/public/app/doc_notes/en/User Guide/!!!meta.json generated
View File

@ -4742,6 +4742,14 @@
"position": 10,
"dataFileName": "10_Geo map_image.png"
},
{
"attachmentId": "IeXU8SLZU7Oz",
"title": "image.jpg",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "Geo map_image.jpg"
},
{
"attachmentId": "Mx2xwNIk76ZS",
"title": "image.png",
@ -5111,6 +5119,62 @@
"format": "html",
"dataFileName": "Creating a custom theme.html",
"attachments": [
{
"attachmentId": "3kOhtnQHT9w0",
"title": "5_Creating%20a%20custom%20theme_im.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "Creating a custom theme_5_.png"
},
{
"attachmentId": "7M6PnFYlxR2t",
"title": "3_Creating a custom theme_im.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "Creating a custom theme_3_.png"
},
{
"attachmentId": "hJc5fBNfSLoY",
"title": "Creating a custom theme_im.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "Creating a custom theme_Cr.png"
},
{
"attachmentId": "j3OaGihW6eg3",
"title": "1_Creating a custom theme_im.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "Creating a custom theme_1_.png"
},
{
"attachmentId": "LCQ6zvUbvXQr",
"title": "4_Creating a custom theme_im.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "Creating a custom theme_4_.png"
},
{
"attachmentId": "mY5EGlN7TO6I",
"title": "5_Creating a custom theme_im.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "1_Creating a custom theme_5_.png"
},
{
"attachmentId": "TMHEj1M3XFGO",
"title": "2_Creating a custom theme_im.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "Creating a custom theme_2_.png"
},
{
"attachmentId": "yJVfT7rjp4tI",
"title": "image.png",
@ -6887,28 +6951,28 @@
{
"type": "relation",
"name": "internalLink",
"value": "KSZ04uQ2D1St",
"value": "_optionsTextNotes",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "_optionsTextNotes",
"value": "_optionsCodeNotes",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "MI26XDLSAlCD",
"value": "KSZ04uQ2D1St",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "_optionsCodeNotes",
"value": "MI26XDLSAlCD",
"isInheritable": false,
"position": 40
},

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Theme development/1_Creating a custom theme_5_.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

84
src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme.html generated
View File

@ -18,37 +18,53 @@
developing a new theme or importing an existing one it's a good idea to
keep them into one place.</p>
<p>As such, the first step is to create a new note to gather all the themes.</p>
<p>![](4_Creating%20a custom theme_im.png)</p>
<p>
<img src="1_Creating a custom theme_5_.png" width="181" height="84">
</p>
<h2>Step 2. Create the theme</h2>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="Creating a custom theme_im.png">
</td>
<td>Themes are code notes with a special attribute. Start by creating a new
code note.</td>
</tr>
<tr>
<td>![](Creating%20a%20custom theme_im.png)</td>
<td>Then change the note type to a CSS code.</td>
</tr>
<tr>
<td>![](5_Creating%20a%20custom theme_im.png)</td>
<td>In the <em>Owned Attributes</em> section define the <code>#appTheme</code> attribute
to point to any desired name. This is the name that will show up in the
appearance section in settings.</td>
</tr>
</tbody>
</table>
<h2>Step 3. Define the theme's CSS</h2>
<figure class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<figure class="image">
<img style="aspect-ratio:651/220;" src="Creating a custom theme_3_.png"
width="651" height="220">
</figure>
</td>
<td>Themes are code notes with a special attribute. Start by creating a new
code note.</td>
</tr>
<tr>
<td>
<figure class="image">
<img style="aspect-ratio:302/349;" src="Creating a custom theme_1_.png"
width="302" height="349">
</figure>
</td>
<td>Then change the note type to a CSS code.</td>
</tr>
<tr>
<td>
<figure class="image">
<img style="aspect-ratio:316/133;" src="Creating a custom theme_Cr.png"
width="316" height="133">
</figure>
</td>
<td>In the <em>Owned Attributes</em> section define the <code>#appTheme</code> attribute
to point to any desired name. This is the name that will show up in the
appearance section in settings.</td>
</tr>
</tbody>
</table>
</figure>
<h2>Step 3. Define the theme's CSS</h2>
<p>As a very simple example we will change the background color of the launcher
pane to a shade of blue.</p>
<p>To alter the different variables of the theme:</p><pre><code class="language-text-css">:root {
@ -57,9 +73,13 @@
<h2>Step 4. Activating the theme</h2>
<p>Refresh the application (Ctrl+Shift+R is a good way to do so) and go to
settings. You should see the newly created theme:</p>
<p>![](1_Creating%20a%20custom theme_im.png)</p>
<p>
<img src="Creating a custom theme_2_.png" width="631" height="481">
</p>
<p>Afterwards the application will refresh itself with the new theme:</p>
<p>![](3_Creating%20a%20custom theme_im.png)</p>
<p>
<img src="Creating a custom theme_4_.png" width="653" height="554">
</p>
<p>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:&nbsp;<a href="Customize%20the%20Next%20theme.html">Theme base (legacy vs. next)</a>
</p>

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_1_.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_2_.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_3_.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_4_.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_5_.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_Cr.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB