mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-09-19 02:10:04 +08:00
fix(docs): missing images in theme development
This commit is contained in:
Elian Doran
parent
38ed8b6592
commit
25fe6c2690
@ -4742,6 +4742,14 @@
|
|||||||
"position": 10,
|
"position": 10,
|
||||||
"dataFileName": "10_Geo map_image.png"
|
"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",
|
"attachmentId": "Mx2xwNIk76ZS",
|
||||||
"title": "image.png",
|
"title": "image.png",
|
||||||
@ -5111,6 +5119,62 @@
|
|||||||
"format": "markdown",
|
"format": "markdown",
|
||||||
"dataFileName": "Creating a custom theme.md",
|
"dataFileName": "Creating a custom theme.md",
|
||||||
"attachments": [
|
"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",
|
"attachmentId": "yJVfT7rjp4tI",
|
||||||
"title": "image.png",
|
"title": "image.png",
|
||||||
@ -6887,28 +6951,28 @@
|
|||||||
{
|
{
|
||||||
"type": "relation",
|
"type": "relation",
|
||||||
"name": "internalLink",
|
"name": "internalLink",
|
||||||
"value": "KSZ04uQ2D1St",
|
"value": "_optionsTextNotes",
|
||||||
"isInheritable": false,
|
"isInheritable": false,
|
||||||
"position": 10
|
"position": 10
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "relation",
|
"type": "relation",
|
||||||
"name": "internalLink",
|
"name": "internalLink",
|
||||||
"value": "_optionsTextNotes",
|
"value": "_optionsCodeNotes",
|
||||||
"isInheritable": false,
|
"isInheritable": false,
|
||||||
"position": 20
|
"position": 20
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "relation",
|
"type": "relation",
|
||||||
"name": "internalLink",
|
"name": "internalLink",
|
||||||
"value": "MI26XDLSAlCD",
|
"value": "KSZ04uQ2D1St",
|
||||||
"isInheritable": false,
|
"isInheritable": false,
|
||||||
"position": 30
|
"position": 30
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "relation",
|
"type": "relation",
|
||||||
"name": "internalLink",
|
"name": "internalLink",
|
||||||
"value": "_optionsCodeNotes",
|
"value": "MI26XDLSAlCD",
|
||||||
"isInheritable": false,
|
"isInheritable": false,
|
||||||
"position": 40
|
"position": 40
|
||||||
},
|
},
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
@ -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.
|
As such, the first step is to create a new note to gather all the themes.
|
||||||
|
|
||||||
!\[\](4\_Creating%20a custom theme\_im.png)
|
|
||||||
|
|
||||||
## Step 2. Create the theme
|
## Step 2. Create the theme
|
||||||
|
|
||||||
| | |
|
| | |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
|  | Themes are code notes with a special attribute. Start by creating a new code note. |
|
|  | 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. |
|
|  | 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. |
|
|  | 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
|
## 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:
|
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)
|
|
||||||
|
|
||||||
Afterwards the application will refresh itself with the new theme:
|
Afterwards the application will refresh itself with the new theme:
|
||||||
|
|
||||||
!\[\](3\_Creating%20a%20custom theme\_im.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)
|
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)
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
72
src/public/app/doc_notes/en/User Guide/!!!meta.json
generated
72
src/public/app/doc_notes/en/User Guide/!!!meta.json
generated
@ -4742,6 +4742,14 @@
|
|||||||
"position": 10,
|
"position": 10,
|
||||||
"dataFileName": "10_Geo map_image.png"
|
"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",
|
"attachmentId": "Mx2xwNIk76ZS",
|
||||||
"title": "image.png",
|
"title": "image.png",
|
||||||
@ -5111,6 +5119,62 @@
|
|||||||
"format": "html",
|
"format": "html",
|
||||||
"dataFileName": "Creating a custom theme.html",
|
"dataFileName": "Creating a custom theme.html",
|
||||||
"attachments": [
|
"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",
|
"attachmentId": "yJVfT7rjp4tI",
|
||||||
"title": "image.png",
|
"title": "image.png",
|
||||||
@ -6887,28 +6951,28 @@
|
|||||||
{
|
{
|
||||||
"type": "relation",
|
"type": "relation",
|
||||||
"name": "internalLink",
|
"name": "internalLink",
|
||||||
"value": "KSZ04uQ2D1St",
|
"value": "_optionsTextNotes",
|
||||||
"isInheritable": false,
|
"isInheritable": false,
|
||||||
"position": 10
|
"position": 10
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "relation",
|
"type": "relation",
|
||||||
"name": "internalLink",
|
"name": "internalLink",
|
||||||
"value": "_optionsTextNotes",
|
"value": "_optionsCodeNotes",
|
||||||
"isInheritable": false,
|
"isInheritable": false,
|
||||||
"position": 20
|
"position": 20
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "relation",
|
"type": "relation",
|
||||||
"name": "internalLink",
|
"name": "internalLink",
|
||||||
"value": "MI26XDLSAlCD",
|
"value": "KSZ04uQ2D1St",
|
||||||
"isInheritable": false,
|
"isInheritable": false,
|
||||||
"position": 30
|
"position": 30
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "relation",
|
"type": "relation",
|
||||||
"name": "internalLink",
|
"name": "internalLink",
|
||||||
"value": "_optionsCodeNotes",
|
"value": "MI26XDLSAlCD",
|
||||||
"isInheritable": false,
|
"isInheritable": false,
|
||||||
"position": 40
|
"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
BIN
src/public/app/doc_notes/en/User Guide/User Guide/Theme development/1_Creating a custom theme_5_.png
generated
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
@ -18,37 +18,53 @@
|
|||||||
developing a new theme or importing an existing one it's a good idea to
|
developing a new theme or importing an existing one it's a good idea to
|
||||||
keep them into one place.</p>
|
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>As such, the first step is to create a new note to gather all the themes.</p>
|
||||||
<p></p>
|
<p>
|
||||||
|
<img src="1_Creating a custom theme_5_.png" width="181" height="84">
|
||||||
|
</p>
|
||||||
<h2>Step 2. Create the theme</h2>
|
<h2>Step 2. Create the theme</h2>
|
||||||
|
<figure class="table">
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th></th>
|
<th> </th>
|
||||||
<th></th>
|
<th> </th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<img src="Creating a custom theme_im.png">
|
<figure class="image">
|
||||||
|
<img style="aspect-ratio:651/220;" src="Creating a custom theme_3_.png"
|
||||||
|
width="651" height="220">
|
||||||
|
</figure>
|
||||||
</td>
|
</td>
|
||||||
<td>Themes are code notes with a special attribute. Start by creating a new
|
<td>Themes are code notes with a special attribute. Start by creating a new
|
||||||
code note.</td>
|
code note.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td></td>
|
<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>
|
<td>Then change the note type to a CSS code.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td></td>
|
<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
|
<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
|
to point to any desired name. This is the name that will show up in the
|
||||||
appearance section in settings.</td>
|
appearance section in settings.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</figure>
|
||||||
<h2>Step 3. Define the theme's CSS</h2>
|
<h2>Step 3. Define the theme's CSS</h2>
|
||||||
<p>As a very simple example we will change the background color of the launcher
|
<p>As a very simple example we will change the background color of the launcher
|
||||||
pane to a shade of blue.</p>
|
pane to a shade of blue.</p>
|
||||||
<p>To alter the different variables of the theme:</p><pre><code class="language-text-css">:root {
|
<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>
|
<h2>Step 4. Activating the theme</h2>
|
||||||
<p>Refresh the application (Ctrl+Shift+R is a good way to do so) and go to
|
<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>
|
settings. You should see the newly created theme:</p>
|
||||||
<p></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>Afterwards the application will refresh itself with the new theme:</p>
|
||||||
<p></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
|
<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: <a href="Customize%20the%20Next%20theme.html">Theme base (legacy vs. next)</a>
|
that and base the theme on the new TriliumNext theme, see: <a href="Customize%20the%20Next%20theme.html">Theme base (legacy vs. next)</a>
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
BIN
src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_1_.png
generated
Normal file
BIN
src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_1_.png
generated
Normal file
Binary file not shown.
|
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
BIN
src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_2_.png
generated
Normal file
Binary file not shown.
|
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
BIN
src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_3_.png
generated
Normal file
Binary file not shown.
|
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
BIN
src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_4_.png
generated
Normal file
Binary file not shown.
|
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
BIN
src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_5_.png
generated
Normal file
Binary file not shown.
|
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
BIN
src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_Cr.png
generated
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Loading…
x
Reference in New Issue
Block a user